[Twitter] Twitter for Websites - Follow Button

Follow Button은 사용자가 손쉽게 다른 Twitter 사용자를 Follow할 수 있도록 해주는 간단한 Widget입니다. 여기서 설명하는 Follow Button은 Twitter for Website의 Tweet Button과 동일한 방법으로 구현하실 수 있습니다.

여기에서는 개발자나 사용자가 직접 원하는 Follow Button의 코드를 생성하는 방법에 대해서 설명합니다. 만약 직접 생성하지 않고 간단히 코드를 자동으로 생성하고 싶으시면 https://twitter.com/about/resources/followbutton를 방문하시기 바랍니다.

상호작용 흐름

Follow Button은 사용자의 로그인 상태에 따라 다음과 같은 흐름으로 작업이 진행됩니다.

• 이미 Twitter에 로그인한 상태

  Follow Button을 클릭하면 팝업 창을 통해 Follow 할 사용자의 정보가 간단히 나타나며, Follow 버튼을 통해 Follow 작업을 수행할 수 있습니다.

• Twitter에 로그인 되지 않은 상태

  Follow 버튼을 클릭하면, 로그인 작업을 수행할 수 있는 팝업 창이 나타나며, 로그인이 완료되면 Foolw 동작을 수행합니다.

Follow Button을 WebSite에 추가하기

Follow Button을 추가하는 방법은 크게 두 가지로 나뉩니다.

Twitter Javascript Library를 이용하는 방법

만약 Javasciprt의 사용하기로 결정한 WebSite일 경우, 이 방법은 가장 간편하게 Follow Button을 추가할 수 있는 방법입니다. 이 방법을 사용할 경우 Button 의 속성을 Querystring가 아닌 data- 속성을 통해 보다 간편하고 직관적으로 지정할 수 있습니다.

<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href='https://twitter.com/Follow할 계정' class="twitter-follow-button">Follow @</a>

<a /> Tag는 반드시 class 값으로 twitter-follow-button값을 가지고 있어야 합니다. Twitter Library는 해당 Class 명을 통해 작업 대상 <a /> Tag를 식별합니다.  href의 속성 값으로 지정된 URL도 'https://twitter.com/Follow할 계정'으로 설정이 되어야 합니다. Twitter Javascript Library가 정상적으로 읽혀지지 않았을지라도 이 URL은 사용자가 지정한 Twitter Account를 Follow할 수 있도록 지정한 Twitter Account의 Profile 페이지로 사용자를 이동시킵니다.

IFrame를 이용하는 방법

Twitter Javascript Library를 이용하지 않고 IFrame만으로도 Follow Button을 생성하실 수 있습니다. Follow Button의 속성은 IFrame에 지정되는 URL값의 Querystring에 지정하시면 됩니다. Follow할 계정은 Querystring에 screen_name 속성으로 지정하시면 됩니다.

<iframe allowtransparency="true" frameborder="0" scrolling="no"
    src="https://platform.twitter.com/widgets/follow_button.html?screen_name=UserToFollow"
    style="width:300px; height:20px;"></iframe>

※ 11년 9월 23일 현재 위의 iframe를 이용한 방식은 정상적으로 동작하지 않았습니다. 가급적 Script + <A />를 이용하는 방법이 더 안정적이니 방법이 아닌가 생각됩니다.

Follow Button 속성 지정

속성을 지정하여 Follow 버턴의 동작이나 형태를 설정하실 수 있습니다. Twitter Javascript Library를 이용하실 때 속성은 Querystring가 아닌 <a /> Tag의 속성으로 지정하셔야 합니다. Iframe를 이용하실 때는 URL의 Querystring를 통해 속성을 지정하시면 됩니다.

	Javascript (<a /> Tag의 속성으로 지정)	Iframe (Querystring에 지정)
Follow할 Acocunt 지정	(URL 내부에 지정)	screen_name
Follower의 숫자를 표시할지 여부	data-show-count	show_count
Button Color	data-button	button
Text Color	data-text-color	text_color
Link Color	data-linke-color	link_color
언어	data-lang	lang
너비	data-width	(IFrame의 Style로 지정)
정렬	data-align	(N/A)

Follower의 숫자를 표시하기

data-show-count, show_count 속성을 통해 Follower 숫자의 표시여부를 'true' 또는 'false'로 지정할 수 있습니다. 기본 값은 true입니다.

• show_count = true 또는 data-show-count = true (default)
  

  <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
  <a href="https://twitter.com/thankees" data-show-count="true" class="twitter-follow-button"></a>

  <iframe allowtransparency="true" frameborder="0" scrolling="no"
      src="//platform.twitter.com/widgets/follow_button.html?screen_name=thankees&show_count=true"
      style="width:300px; height:20px;"></iframe>

• show_count = false 또는 data-show-count = false
  

  <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
  <a href="https://twitter.com/thankees" data-show-count="false" class="twitter-follow-button"></a>

  <iframe allowtransparency="true" frameborder="0" scrolling="no"
      src="//platform.twitter.com/widgets/follow_button.html?screen_name=thankees&show_count=false"
      style="width:300px; height:20px;"></iframe>

Button Color

Button Color은 두 가지 중에서 선택하실 수 있습니다.(blue 또는 gray) 선택 값에 따라 Button Color, Text Color, Link Color이 자동으로 선택한 값에 어울리도록 변경됩니다.

• button = blue 또는 data-button = blue (default) 
  

  <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
  <a href="https://twitter.com/thankees" data-button="blue" class="twitter-follow-button"></a>

  <iframe allowtransparency="true" frameborder="0" scrolling="no"
      src="//platform.twitter.com/widgets/follow_button.html?screen_name=thankees&button=blue"
      style="width:300px; height:20px;"></iframe>

• button = grey 또는 data-button = grey
  

  <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
  <a href="https://twitter.com/thankees" data-button="grey" class="twitter-follow-button"></a>

  <iframe allowtransparency="true" frameborder="0" scrolling="no"
      src="//platform.twitter.com/widgets/follow_button.html?screen_name=thankees&button=grey"
      style="width:300px; height:20px;"></iframe>

Text Color

RGB HEX 값으로 지정하실 수 있으며 다음과 같이 Follower Count와 Following State Text의 색상이 변화하게 됩니다.

• text_color = FF0000 또는 data-text-color = FF0000 
  

  <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
  <a href="https://twitter.com/thankees" data-text-color="FF0000" data-button="grey" class="twitter-follow-button"></a>

  <iframe allowtransparency="true" frameborder="0" scrolling="no"
      src="//platform.twitter.com/widgets/follow_button.html?screen_name=thankees&text_color=FF0000&button=grey"
      style="width:300px; height:20px;"></iframe>

Link Color

RGB HEX 값으로 @사용자명 Link의 색상을 변경하실 수 있습니다.

• link_color = 0000FF 또는 data-link-color = 0000FF  
  

  <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
  <a href="https://twitter.com/thankees" data-link-color="0000FF" data-text-color="FF0000" data-button="grey" class="twitter-follow-button"></a>

  <iframe allowtransparency="true" frameborder="0" scrolling="no"
      src="//platform.twitter.com/widgets/follow_button.html?screen_name=thankees&link_color=0000FF&text_color=FF0000&button=grey"
      style="width:300px; height:20px;"></iframe>

언어

Follow Button의 lang 속성 값은 ISO-639-1 Lannguage code의 2자리 코드 값을 사용합니다. 영어(en), 프랑스어(fr), 독일어(de), 이탈리아어(it), 스페인어(es), 한국어(ko), 일본어(ja) 등을 사용하실 수 있습니다.

<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="https://twitter.com/thankees" data-lang="ko" class="twitter-follow-button"></a>

<iframe allowtransparency="true" frameborder="0" scrolling="no"
    src="//platform.twitter.com/widgets/follow_button.html?screen_name=thankees&lang=ko"
    style="width:300px; height:20px;"></iframe>

너비와 정렬

Follow Button의 너비는 data-width 또는 width 속성으로 지정 가능합니다. 또한 정렬방향은 align 또는 data-align으로 지정하실 수 있습니다. 속성의 값은 너비는 Pixel 또는 Percentage값으로 설정가능하며, 정렬은 left 또는 right 값 중에 선택하시면 됩니다. 너비와 정렬은 Twitter Javascript Library을 통해서만 지원하니 참고바랍니다. (Iframe를 사용하실 경우 style 속성을 이용하여 조정하실 수 있습니다.)

<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="https://twitter.com/thankees" data-width="250px" data-align="right" class="twitter-follow-button"></a>

또는

<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="https://twitter.com/thankees" data-width="30%" data-align="left" class="twitter-follow-button"></a>

(너비 250px, 오른쪽 정렬된 모습)

자주 묻는 질문

1. 지원하는 Browser와 Platform은 어떻게 되나요?

   대부분의 브라우저에서 지원됩니다. Javascript가 정상 동작하지 않는 브라우저에서도 기본적인 동작은 수행할 것입니다. 다음과 같은 브라우저에서 테스트 되었으며 공식적으로 지원합니다.
   • Firefox 3, 4
   • Chrome
   • Safari 4, 5
   • Opera 10
   • Internet Explorer 6, 7, 8, 9
   • Mobile Safari for iPhone/iPad
   • Android
   • Palm Pre
   • Opera Mini

2. Follow Button의 너비와 높이가 어떻게 되나요?

   Follow Button의 높이는 20 pixel입니다. 너비는 사용하는 언어와 screen_name의 길이에 따라서 달라집니다만... 다음과 같은 너비를 사용할 것을 권해드립니다.
   • 300 pixel 너비 : Followers count를 표시할 경우
   • 200 pixel 너비 : Followers count를 표시하지 않을 경우

3. Ajax를 사용하여 비동기 페이지를 구성했는데, Follow Button을 어떻게 넣어야 할까요?

   Ajax를 통해 비동기로 서버에서 정보를 받아 DOM을 구성하는 페이지에서 Follow Button을 구성하는 가장 쉬운 방법은 Iframe을 이용하여 Follow Button이 나타나도록 하는 것입니다.

4. Ajax를 이용하여 비동기 페이지를 구성할 때 Iframe이 아닌 Twitter Javascript Library를 이용하여 Follow Button을 표현하고 싶은데요!

   만약 그러하시다면 다음과 절차를 따라 주세요.
   • 먼저 다음과 같은 코드를 통해 Twitter Javascript Library를 실행하도록 합니다.

     <script type="text/javascript">
       (function(){
         var twitterWidgets = document.createElement('script');
         twitterWidgets.type = 'text/javascript';
         twitterWidgets.async = true;
         twitterWidgets.src = '//platform.twitter.com/widgets.js';
         document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
       })();
     </script>

   • 두 번째로 Follow Button이 위치할 것에 다음과 같은 코드를 위치시킵니다.

     <a href="https://twitter.com/twitterapi" class="twitter-follow-button">Follow @twitterapi</a>

5. 한 페이지 당 사용할 수 있는 Follow Button의 개수제한이 있나요?

   만약 한 페이지에 Follow Button이 많다면(그래서 속도가 저하된다면) Follow and Mini-Profile Intent의 사용을 권해드립니다.

6. Follow Button만 나타내고 나머지는 제 스스로 꾸미고 싶은데 어떻게 해야 하나요?

   Follow Count의 표현을 결정하는 show_count 속성과 show_screen_name속성의 값을 false로 지정함으로써 Follow할 사용자 명을 감출 수 있습니다. 하지만, Follow 할 사용자 명은 반드시 표현하는 것이 사용자 경험에 도움이 될 것입니다.

7. Twitter.com의 오류 또는 트래픽 초과에 대해서는 어떻게 대처해야 하나요?

   Follow Button과 Tweet Button은 Twitter.com의 서버와 분리되어 있으며, 고성능의 CDN(Content distribution newwork)을 통해 호스팅 되고 있습니다. 즉, Twitter.com이 정상 동작하지 않는 것과 무관하게 Follow Button과 Tweet Button은 정상적으로 화면에 나타나고 동작할 것입니다. Follow Button과 Tweet Button을 사용할 때 예상할 수 있는 가장 나쁜 경우는 Follow Button이나 Tweet Button을 사용하는 사용자가 급증 하여 해당 버튼이 동작하지 않는 정도일 것입니다.

8. Follow Button은 암호화된 HTTPS를 통해서 동작하는 것이 맞나요?

   네, 보안 상 더욱 신뢰할 수 있는 HTTPS Protocol을 사용합니다!