[Twitter] Twitter for Websites-Web Intents

[Twitter] Twitter for Websites-Web Intents

2011. 9. 26. 19:09ㆍOthers/SNS

Web Intents는 Popup으로 최적화된 작업 흐름을 통해 Tweet, Reply, Retweet, Favorite, Follow을 처리합니다. 따라서 당신이 구현한 웹사이트를 떠나거나, 혹은 App 인증을 받는 과정 없이 Twitter와 연동작업을 진행할 수 있습니다. Web Intents는 Mobile환경에서도 잘 동작하며, 구현하기에도 굉장히 쉽습니다~!

Web Intents 사용하기!

Web Intetns는 당신이 구현한 웹사이트에서 Tweet를 날릴 수 있는 가장 쉬운 방법입니다.

Web Intents는 사용자가 현재 Twitter에 로그인 상태인지 확인하며, 필요할 경우 사용자에게 로그인을 요청합니다. 만약 사용자가 Twitter 계정이 없다면 손쉽게 Twitter 계정을 생성할 수 있도록 해 줍니다. 기존 App과 같이 승인을 받거나 API Key를 등록하는 과정이 전혀 필요 없습니다.

Wet Intents는 구현에 있어 Javascript의 사용을 반드시 요구하지 않으며, 단지 Web Intent를 Popup으로 띄우시면 됩니다. 각각의 Web Intent는 가로 550px, 세로 420px를 사용할 것을 권장 드립니다. 만약, Twitter Javascript Libarary를 사용하신다면 너비와 높이는 자동으로 설정될 것입니다. Web Intent를 통해 의도한 작업이 완료되면은 해당 Poup를 닫을 수 있는 화면이 나타나게 됩니다.

Web Intents는 iOS, Android 외 대다수의 Mobile 장치에서도 정상적으로 동작합니다. Web Intents란 Browser Window에서 읽히는 URL을 말합니다. Browser Window 또는 Browser Popup이 아닌 IFrame에 이 URL을 제공할 순 있겠지만, 화면이 렌더링 되지 않을 것입니다.

Image Resource에서 제공하는 이미지들(Tweet:, Favorite:, Reply:, Retweet:)을 그대로 사용하실 수 있습니다. Twitter에서 제공하는 각 종 자료들을 사용하기 위해 Display Guidelines를 확인해보세요.

만약 사용자가 영어가 아닌 다른 언어를 사용한다면 해당 언어에 맞는 지역화된 Intents의 사용을 권해드립니다. 자세한 사항은 Internaltional glossary page를 확인해주세요!

Get Started!

Web Intents는 간단한 Javascript와 HTML의 조합으로써 구현될 수 있으며, 새로운 Browser Window에서 열려야 합니다~!

가장 쉬운 구현 방법은 Twitter Javascript Library를 이용하는 방법입니다.

<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
<p><a href="https://twitter.com/intent/tweet">Tweet</a></p>
<p><a href="https://twitter.com/intent/tweet?in_reply_to=51113028241989632">Reply</a></p>
<p><a href="https://twitter.com/intent/retweet?tweet_id=51113028241989632">Retweet</a></p>
<p><a href="https://twitter.com/intent/favorite?tweet_id=51113028241989632">Favorite</a></p>
<p><a href="https://twitter.com/intent/intent/user?screen_name=thankees">Following</a></p>

사용자가 링크를 클릭하면 Twitter Javascript Library는 자동으로 적절한 높이와 너비의 Popup Windows를 열고 Web Intents가 나타나도록 할 것입니다.

Tweet Intents – Tweet or Reply to a Tweet

Intents : https://twitter.com/intent/tweet

Tweet Intent는 사용자가 어떤 내용이든 자유롭게 Tweet할 수 있도록 해줍니다. 또한 다양한 추가적인 매개변수를 지원함으로써 다양한 동작을 지원합니다. 매개변수를 통해 Reply, @Mention, Link 공유, 기본 Tweet 문자포함 등의 기능을 지원합니다.

지원하는 매개변수

url
URL Encoding된 HTTP 또는 HTTPS URL을 지정하실 수 있습니다. 여기서 지정한 값은 t.co에 의해서 축약된 URL로 변경되어 Tweet Text의 마지막에 추가되게 됩니다.
구현예제

포함할 URL http://nsinc.tistory.com을 URL-Encoding하여 Querystring에 지정합니다.
[Tweet]
```
<a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fnsinc.tistory.com%2F">Tweet</a>
```
via
Tweet에 관계된 사용자의 사용자명을 지정합니다. 여기서 여기서 지정한 사용자명은 “via @username” 형태로 Tweet Text 마지막에 추가되게 됩니다. “via”라는 문자는 사용자의 지역에 따라 번역된 값으로 변경될 수 있습니다. 사용자가 via에 지정한 계정을 Follow하지 않고 있을 경우, Tweet 후 Follow Suggestion 화면으로 전환됩니다.
구현예제
[Tweet]
```
<a href="https://twitter.com/intent/tweet?via=thankees">Tweet</a>
```
text
여기서 지정된 값은 Tweet 할 기본 Text로 사용됩니다. 이 값은 UTF-8 & URL Encoding 처리가 되어야 합니다. 이 값은 최대 140자를 넘길 수 없으며, via 또는 url 속성에 지정한 값에 따라 140자 보다 더 작은 길이제한을 받을 수 있습니다. 사용자는 여기서 지정한 값을 수정하여 Tweet할 수 있습니다.
구현예제
[Tweet]
```

<a href="https://twitter.com/intent/tweet?text=%EC%A2%8B%EC%9D%80%20%EC%A0%95%EB%B3%B4%20%EA%B0%90%EC%82%AC%ED%95%A9%EB%8B%88%EB%8B%A4">Tweet</a>
```
in_reply_to
지정한 ID에 해당하는 Tweet의 Reply를 작성하도록 합니다. 모든 Tweet는 유일한 ID를 가지고 있습니다. ID를 얻기위해서는 API를 활용하거나, 해당 Tweet의 고유 URL을 확인합니다. 고유 URL을 확인하는 방법 중 하나는 해당 Tweet의 작성일을 클릭하는 것입니다.
구현예제
[Reply]
```
<a href="https://twitter.com/intent/tweet?in_reply_to=51113028241989632">Reply</a>
```
hastags
Tweet에 지정한 #HashTag를 포함하도록 합니다. #을 제거한 문자열을 지정하며 N개를 지정할 경우 각각 콤마(,)로 구분합니다.
구현예제
[Tweet]
```
<a href="https://twitter.com/intent/tweet?hashtags=news,nsinc">Tweet</a>
```
related
Tweet에 관계된 계정의 Screen Name을 지정합니다. 사용자가 Tweet 완료하면 realted에 지정한 계정을 Follow 할 것인지 묻는 화면이 나타나게 됩니다. N개의 계정을 지정할 경우 각 계정을 콤마(,)로 구분합니다. 또한 각 지정한 계정에 대해 왜 이 계정이 Tweet와 관련이 있는지 설명을 지정할 수 있는데 계정 다음에 콜론(:)을 입력하고 설명을 지정하시면 됩니다. 물론 여기에 지정하는 모든 값은 URL-Encoding되어야 합니다.
구현예제
[Tweet]
```
<a href="https://twitter.com/intent/tweet?related=thankees:Author,nsinc:Name%20of%20this%20blog">Tweet</a>
```

Tweet Intents – Retweet a Tweet

Intents : https://twitter.com/intent/retweet

Retweet는 특정 Tweet를 자신의 Follower에게 알릴 수 있는 매우 강력한 입소문 전파 기능입니다.

지원하는 매개변수

tweet_id
Retweet할 대상 Id를 지정합니다. (모든 Tweet는 유일한 ID를 가지고 있습니다. ID를 얻기위해서는 API를 활용하거나, 해당 Tweet의 고유 URL을 확인합니다. 고유 URL을 확인하는 방법 중 하나는 해당 Tweet의 작성일을 클릭하는 것입니다.)
구현예제
[Retweet]
```
<a href="https://twitter.com/intent/retweet?tweet_id=51113028241989632">Retweet</a>
```
related
Tweet에 관계된 Screen Name을 지정합니다. 사용자가 Tweet 완료하면 realted에 지정한 계정을 Follow 할 것인지 묻는 화면이 나타나게 됩니다. N개의 계정을 지정할 경우 각 계정을 콤마(,)로 구분합니다. 또한 각 지정한 계정에 대해 왜 이 계정이 Tweet와 관련이 있는지 설명을 지정할 수 있는데 계정 다음에 콜론(:)을 입력하고 설명을 지정하시면 됩니다. 물론 여기에 지정하는 모든 값은 URL-Encoding되어야 합니다.
구현예제
[Retweet]
```
<a href="https://twitter.com/intent/retweet?tweet_id=51113028241989632&related=thankees:Author,nsinc:Name%20of%20this%20blog">Retweet</a>
```

Tweet Intents – Favorite a Tweet

Intents : https://twitter.com/intent/favorite

Favorite는 사용자들이 마음에 드는 Tweet를 발견했을 때, 다음에 다시 확인하거나 또는 작성자에게 감사하는 의미를 표현하기 위해 사용하게 되는 기능 중 하나입니다.

지원하는 매개변수

tweet_id
Favorite 할 대상 Id를 지정합니다. (모든 Tweet는 유일한 ID를 가지고 있습니다. ID를 얻기위해서는 API를 활용하거나, 해당 Tweet의 고유 URL을 확인합니다. 고유 URL을 확인하는 방법 중 하나는 해당 Tweet의 작성일을 클릭하는 것입니다.)
구현예제
[Favorite]
```
<a href="https://twitter.com/intent/favorite?tweet_id=51113028241989632">Favorite</a>
```
related
Tweet에 관계된 Screen Name을 지정합니다. 사용자가 Tweet 완료하면 realted에 지정한 계정을 Follow 할 것인지 묻는 화면이 나타나게 됩니다. N개의 계정을 지정할 경우 각 계정을 콤마(,)로 구분합니다. 또한 각 지정한 계정에 대해 왜 이 계정이 Tweet와 관련이 있는지 설명을 지정할 수 있는데 계정 다음에 콜론(:)을 입력하고 설명을 지정하시면 됩니다. 물론 여기에 지정하는 모든 값은 URL-Encoding되어야 합니다.
구현예제
[Favorite]
```
<a href="https://twitter.com/intent/favorite?tweet_id=51113028241989632&related=thankees:Author,nsinc:Name%20of%20this%20blog">Favorite</a>
```

User Intents – Follow and Mini-Profile

Intents : https://twitter.com/intent/user

이 Intent는 사용자를 해당 Twitter 계정으로 Follow할 수 있도록 도와줍니다. 이 Intent로 인해 나타나는 Popup은 사용자의 소개, 사진, 요약된 통계정보(Follwer, Tweets 숫자 등), 작성한 Tweet과 더불어 Follow 버튼을 제공하게 됩니다.

지원하는 매개변수

screen_name
Follow 할 사용자의 Screen Name을 지정합니다. (모든 사용자는 Screen Name을 가지지만, Screen Name은 변경될 수 있는 값입니다. 따라서 가능한 UserId를 사용할 것을 권장합니다.)
구현예제
[Following]
```
<a href="https://twitter.com/intent/user?screen_name=thankees">Following</a>
```
user_id
Follow 할 사용자의 User Id를 지정합니다. (사용자를 구분짓는 유일한 값으로써 API를 통해서 확인하실 수 있습니다.)
구현예제
[Following]
```
<a href="https://twitter.com/intent/user?user_id=126859487">Following</a>
```

Localization

만약 Web Intents가 특정한 언어로 나타나길 원한다면, Intent URL의 Querystring에 lang 속성을 지정해주시면 됩니다.

사용가능한 속성 값

en – 영어
it – 이탈리아어
es – 스페인어
fr – 프랑스어
ko – 한국어
ja – 일본어

Optimization

Re-evaluationg content

Javascript 등을 통해 페이지의 내용이 동적으로 변경될 때, Twitter Javascript Libarary에 의해서 생성된 Button(Tweet, Folow Button)들의 속성 값이 변경되었을 때 해당 버튼을 다시 읽혀지길 원하신다면 다음 코드를 실행해주세요!

twttr.widgets.load();

Limited Dependencies

Twitter Javascript Libarary없이 Web Intents를 사용하실 때, 일일이 Popup을 위한 코드를 생성하실 필요 없이 아래의 코드를 사용하시면 동일한 기능이 나타나게 됩니다.

(function() {
  if (window.__twitterIntentHandler) return;
  var intentRegex = /twitter\.com(\:\d{2,4})?\/intent\/(\w+)/,
      windowOptions = 'scrollbars=yes,resizable=yes,toolbar=no,location=yes',
      width = 550,
      height = 420,
      winHeight = screen.height,
      winWidth = screen.width;
 
  function handleIntent(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        m, left, top;
 
    while (target && target.nodeName.toLowerCase() !== 'a') {
      target = target.parentNode;
    }
 
    if (target && target.nodeName.toLowerCase() === 'a' && target.href) {
      m = target.href.match(intentRegex);
      if (m) {
        left = Math.round((winWidth / 2) - (width / 2));
        top = 0;
 
        if (winHeight > height) {
          top = Math.round((winHeight / 2) - (height / 2));
        }
 
        window.open(target.href, 'intent', windowOptions + ',width=' + width +
                                           ',height=' + height + ',left=' + left + ',top=' + top);
        e.returnValue = false;
        e.preventDefault && e.preventDefault();
      }
    }
  }
 
  if (document.addEventListener) {
    document.addEventListener('click', handleIntent, false);
  } else if (document.attachEvent) {
    document.attachEvent('onclick', handleIntent);
  }
  window.__twitterIntentHandler = true;
}());

How to Render a Tweet

유용한 예제

구현 예제

Twitter Blackbird Pie for WordPress

'Others > SNS' 카테고리의 다른 글

[Twitter] Twitter에서 글자수 제한 (0)	2011.09.27
[Twitter] Web Intents Javascript Events (0)	2011.09.27
[Twitter] Twitter for Websites - Follow Button (0)	2011.09.23
[Twitter] Twitter for Websites - Tweet Button (0)	2011.09.22
[Twitter] Twitter API Getting Started (0)	2011.09.22

NakedStrength

태그

최근글

댓글

Web Intents 사용하기!

Get Started!

Tweet Intents – Tweet or Reply to a Tweet

지원하는 매개변수

url

구현예제

via

구현예제

text

구현예제

in_reply_to

구현예제

hastags

구현예제

related

구현예제

Tweet Intents – Retweet a Tweet

지원하는 매개변수

tweet_id

구현예제

related

구현예제

Tweet Intents – Favorite a Tweet

지원하는 매개변수

tweet_id

구현예제

related

구현예제

User Intents – Follow and Mini-Profile

지원하는 매개변수

screen_name

구현예제

user_id

구현예제

Localization

사용가능한 속성 값

Optimization

Re-evaluationg content

Limited Dependencies

How to Render a Tweet

유용한 예제

구현 예제

'Others > SNS' 카테고리의 다른 글

관련글

티스토리툴바