[Twitter] @Anywhere

2011. 9. 28. 10:29ㆍOthers/SNS

@Anywhere를 통해서 사이트를 Twitter와 더 깊은 통합을 더 쉽게 이루어 낼 수 있습니다. @Anywhere를 Follow Button, Hovercards, linkify Twitter usernames에 추가하셔서

Getting Started

가장 먼저, Twitter와 연동하는 Client Application을 등록하는 과정이 필요합니다. 기존에 사용하셨던 Application을 사용하셔도 되지만, @Anywhere를 위해 새롭게 만드시는 것을 추천 드립니다! 등록하실 때 Callback URL 값으로 해당 Application의 Domain과 Subdomain 값을 정확하게 입력해야 합니다!

다음 링크를 통해서 @Anywhere를 위한 Application을 신규로 등록하실 수 있습니다~!
https://dev.twitter.com/apps/new

@Anywhere를 사용하는 Page에서는 Anywhere를 동작하게하는 <script />를 삽입해야 합니다. Script의 주소는 http://plateform.twitter.com/anywhere.js이고 Querystring으로 당신의 API Key(id=)와 사용할 @Anywhere Version(v=)를 지정하세요. Best Practice에서 언급한 것과 같이 이 <script />는 Page에서 가능한 최 상단에 두시기 바랍니다. 이에 관한 자세한 정보는 하단의 Best Practice Section을 참고하도록 하세요.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Anywhere Sample</title>
    <script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>
  </head>
  <body>
    ...
  </body>
</html>

@Anywhere Javascript 파일은 단 하나의 전역 개체 twttr을 생성합니다. @Anywhere를 사용하기 위해서 anywhere method를 호출하면서 callback을 매개변수로 전달하시기 바랍니다. callback은 호출될 때 Twitter API Client를 전달받게 되며, 모든 @Anywhere에 관한 정보와 동작은 이 Twitter API CLient를 통해서 이루어질 수 있습니다. 예를 들어 Hovercards를 사용하시려면 hovercards method를 호출하시면 됩니다.

초기화 예제

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T.hovercards();
  });
</script>

ahywhere method는 한 페이지에서 몇 번이고 호출될 수 있습니다. 아래의 예제에서는 anywhere method가 Hovercards와 Follow Button을 생성하기 위해서, 2번 호출되고 있습니다.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Anywhere Sample</title>
    <script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>
  </head>
  <body>
  <script type="text/javascript">
    twttr.anywhere(function (T) {
      T.hovercards();
    });
  </script>
  ...
  <span id="follow-placeholder"></span>
  <script type="text/javascript">
    twttr.anywhere(function (T) {
      T("#follow-placeholder").followButton('anywhere');
    });
  </script>
  </body>
</html>

@Anywhere Features

Auto-linkification of Twitter usernames

@Anywhere는 Page내부에 존재하는 Twitter Username에 해당하는 User Profile로 이동하는 Link를 설정할 수 있는 간편한 방법을 제공합니다. Twitter Username이란 @ + 1~20자의 영문자와 Underbar(_)로 구성되는 Screen Name을 말합니다.

T.linkifyUsers();를 호출하시면 자동으로 Twitter username들에 Link가 걸립니다.(T란 Twitter API Client Object를 말하며 앞으로 등장하는 예제에서도 T는 같은 의미로 사용됩니다.)

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T.linkifyUsers();
  });
</script>

위와 같이 T.linkifyUsers()를 호출하면 해당 페이지의 <body> 내부의 Twitter User Name가 될 수 있는 항목을 찾아 링크를 걸어 줍니다.

위와 같이 Link를 자동 생성하는 작업의 영역을 지정하실 수 도 있습니다. 단순히 매개변수로 대상 영역의 CSS 선택자 문자열을 Twitter API Client Object로 넘겨주시면 됩니다. 아래의 예제는 “linkify-this-content”라는 Id를 가진 Element내부에만 linkifyUsers() method가 동작하게 됩니다.

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#linkify-this-content").linkifyUsers();
  });
</script>

Linkify 작업 결과 예

@anywhere was made possible by @ded, @dsa, @todd, @danwrong, @noradio, and the rest of the @twitter team.

linkfyUsers() 외 제공되는 다른 대부분의 API method는 특정한 설정을 위한 매개변수를 받습니다. 예를 들어, linkfyUsers()는 대상 Twitter User Name을 찾아 <a class=’twitter-anywhere-user’></a>태그로 감싸게 되는데, linkfyUsers()에 아래 예제와 같이 class 설정을 위한 매개변수를 넘겨주시면 직접 원하는 class값을 설정할 수 있게 됩니다. 아래 예제는 ‘twitter-anywhere-users’라는 기본 class 값을 ‘my-tweep’라는 지정 값으로 설정하게 됩니다.

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#linkify-this-content").linkifyUsers({ className: 'my-tweep' });
  });
</script>

Hovercards

Hovercards는 witter.com에서 특정 Screen Name에 마우스를 올려두면 해당 사용자 정보를 Tooltip으로 간단히 나타내고 그 사용자에 대한 몇 가지 작업을 할 수 있도록 지원하는 유용한 기능입니다. 이제 Twitter.com 외부에서도 @Anywhere를 이용하여 Hovercards가 나타나도록 설정할 수 있습니다.

Hovercards의 예

Hovercards를 지정한 Web에서 나타나게 하는 방법은 hovercards()를 호출하는 것입니다.

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T.hovercards();
  });
</script>

hovercards()는 기본적으로 linkifyUsers()를 먼저 호출하여 Twitter Screen Name을 Link로 변경합니다. 그리고 나서 해당 Link에 마우스를 올리면 Hovercard가 나타나도록 설정합니다.

Hovercard Configration Options

linkifyUsers()와 마찬가지로 적용되는 범위를 지정하실 수 있습니다. 다음 예제와 같이 CSS Selector Text를 매개변수로 지정해주시면 됩니다.

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#main-content").hovercards();
  });
</script>

Twitter Screen Name에 linkifyUsers()적용되지 않게 하기

위에서 언급한 바와 같이 hovercards()를 호출하면 linkifyUsers()가 자동적으로 호출되어 적용됩니다. 하지만, 이 동작이 불필요하다면 아래 예제와 같이 ‘linkify:false’를 매개변수로 지정하여 linkifyUsers()가 실행되지 않도록 할 수 있습니다.

infer option 사용하기

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

[Facebook] Access Tokens (2)	2014.03.21
[Facebook] Facebook Connect 개요 (0)	2014.03.19
[Twitter] Twitter에서 글자수 제한 (0)	2011.09.27
[Twitter] Web Intents Javascript Events (0)	2011.09.27
[Twitter] Twitter for Websites-Web Intents (0)	2011.09.26

NakedStrength