[Twitter] Twitter for Websites - Tweet Button

2011. 9. 22. 20:04ㆍOthers/SNS

Tweet Button

Tweet Button을 통해 Twitter에 당신의 Contents에 대한 정보가 게재되도록 할 수 있습니다. Twitter에 의하면 하나의 Tweet 당 평균적으로 30회 가량의 방문자 유입을 증가시킨다고 합니다.

사용자가 Tweet 버튼을 클릭할 경우 작업순서

  1. 사용자가 Tweet 버튼을 클릭합니다.
  2. 로그인 되지 않았을 경우, 로그인 화면이 나타납니다. 만약, 사용자가 Twitter 계정이 없을 경우 손쉽게 회원가입 버튼을 통해 회원가입을 진행하여 로그인 처리가 되도록 합니다.
  3. Tweet 입력 화면이 나타납니다. text 속성에 지정된 값이 기본적으로 포함되어 있으며, 사용자는 이 내용을 직접 수정할 수 있습니다.
  4. Tweet 작성이 완료되면, via 또는 related 속성에 지정되어 있는 계정을 Follow 할 것인지 묻는 화면으로 전환됩니다.
  5. 작업이 끝나면 ‘닫기’ 버튼을 클릭할 수 있는 화면으로 전환됩니다.

Tweet 버튼 생성 방법

Tweet 버튼은 다음 페이지를 통해 손쉽게 생성하실 수 있습니다. [Tweet Button 생성페이지]

하지만 아래와 같이 직접 Tweet 버튼을 생성하는 코드를 직접 작성하실 수 있습니다. Tweet Button Code를 직접 생성하는 방법은 크게 3가지로 나뉩니다.

  1. Twitter에서 제공하는 Javascript Library를 포함하고, <a /> Tag에 'tiwtter-share-button' Class를 지정하면 해당 <a /> Tag는 Twitter 버튼으로 변환됩니다. Twitter 버튼은 Iframe으로 이루어져 있으며 따라서 사용자가 Twitter 버튼의 외형이나 동작을 수정할 수 없습니다. QueryString에 Twitter Button의 속성들을 지정할 수 있습니다. 
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
  2. <iframe /> Tag를 사용하여 Twitter 버튼을 생성 할 수 있습니다. iframe의 src 속성 값으로 'https://platform.twitter.com/widgets/tweet_button.html'를 지정하시면 됩니다. Tweet 버튼의 속성은 QueryString에 지정하면 됩니다. 마찬가지로 iframe 내부에 Twitter 버튼이 구현되기 때문에 사용자가 직접 Twitter 버튼의 외형이나 동작을 수정 할 수 없습니다. 
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://platform.twitter.com/widgets/tweet_button.html" style="width:130px; height:20px;"></iframe>
  3. 만일 Tweet 버튼의 Style를 직접 수정하고 싶으시다면, 아래와 같이 <a /> Tag에 지정된 기본 Src만 지정하시면 됩니다. Twitter 버튼의 속성은 QueryString로 지정하시면 됩니다. 
    <a href="https://twitter.com/share">Tweet</a>
QueryString에 속성을 지정할 떄 주의하실 점은 지정한 모든 속성 값은 URL Encode가 이루어져야 하나는 것 입니다. 
<a href="http://twitter.com/share?url=http%3A%2F%test.com&amp;via=testId" class="twitter-share-button">Tweet</a>

Twitter Button 속성

Twitter Button은 외형이나 동작을 변경할 수 있는 몇 가지 속성을 지원합니다. 속성을 지정하지 않으면 기본 속성 값으로 자동 지정되게 됩니다.

모든 Tweet Button에 적용할 수 있는 기본 속성은 다음과 같습니다.

  1. url: 공유할 Page URL. 여기서 지정한 URL은 자동 축약되어 Tweet Text의 맨 끝에 포함됩니다.
  2. via: 지정한 계정은 Tweet Button을 클릭했을 때 기본적으로 Tweet Text에 ‘@계정명’ 형태로 포함되게 됩니다. 또한 Tweet 작성 후 자동으로 Follow할 것을 사용자에게 제안하게 됩니다.
  3. text: 기본적으로 표시할 Text
  4. related: 관련 계정. 사용자가 via에 지정한 계정을 이미 Follow하고 있을 경우, Tweet 작성 시 여기에서 지정한 계정을 Follow할 것을 제안하게 됩니다.
  5. count: 얼마나 많은 사용자가 Tweet하였는지 표현하는 숫자의 위치정보 지정
  6. counturl: Count를 계산할 때 기준으로 삼을 URL.
  7. lang: Tweet 버튼의 언어

Querystring에 속성을 지정하면 URL 뒤에 한 줄로 모든 속성이 지정되므로 나중에 어떤 정보를 지정했는지 직관적으로 확인하기 어렵고 또한 그만큼 개발 생산성을 떨어뜨리게 됩니다. 만약 Twitter Javascript Libaray를 이용하여 버튼을 생성한다면, 이 부분을 해소할 수 있는 보다 직관적인 속성 지정방법을 사용하실 수 있습니다.

기본속성으로 Twitter 버튼 생성
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="https://twitter.com/share?url=https%3A%2F%2Fdev.twitter.com&amp;via=UserAccount" class="twitter-share-button">Tweet</a>
Twitter Libary를 사용할 때 사용 가능한 대체 속성으로 Twitter 버튼 생성
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<a  href="https://twitter.com/share" 
    class="twitter-share-button"
    data-url="https://dev.twitter.com/pages/tweet_button"
    data-via="UserAccount">Tweet</a>

아래는 기본속성이 아닌 Twitter Library를 사용했을 때 사용할 수 있는 대체 속성에 대해서 설명합니다.

Data Source Share query string data- attribute of anchor tag rel= attribute of a link tag Default
우선순위 1 2 3 4
URL to Tweet url data-url rel="canonical" HTTP Referrer
via user via data-via rel="me"  
Tweet text text data-text   Content of the <title> tag
Recommended accounts related data-related    
Count box position count data-count   horizontal
Language lang data-lang   en
URL to which your shared URL resolves to counturl data-counturl   the url being shared

만일 위에서 말한 기본속성과 Twitter Library를 이용한 방법으로 지정한 속성의 중복이 발생할 경우 기본속성의 값이 우선적으로 사용되게 됩니다. Twitter Library가 속성을 적용하기 위해 값을 찾는 순서를 자세하게 설명 드리자면 다음과 같습니다. 아래는 Twitter Library가 어떻게 url 속성 값을 찾아 적용하는지 순서에 대해서 설명합니다.

  1. Querystring에서 url 속성을 찾는다.
  2. 없으면, anchor tag의 data-url 속성을 찾아 사용한다.
  3. 없으면, <head> 영역에서 <link rel=”canoical” href=”” />을 찾아 url값으로 사용한다.
  4. 없으면, 해당 웹페이지의 URL을 찾아 url값으로 사용한다.

Count Box

counturl로 지정된 url값으로 얼마나 많은 Tweet가 발생했는지 숫자로 표현하는 영역을 Twitter Button을 기준으로 어디에 표현할지 지정할 수 있으며, count 또는 data-count 속성에 값을 지정하시면 됩니다.

  1. none
  2. horizontal
  3. vertical

Realted Account

via 또는 data-via와 realted 또는 data-related 속성에 지정한 사용자계정은 Tweet 작성 후 사용자에게 Following을 제안할 때 사용되는 값입니다. 이를 Follow Suggestion이라고 합니다. 하지만 via, data-via, related, data-related 속성에 지정한 모든 계정을 한꺼번에 Follow Suggenstion에 사용되지 않습니다. 다음과 같은 우선순위를 통해 하나의 계정만 선택되어 Follow Suggenstion에 사용됩니다.

  1. via 또는 data-via 값을 찾아 해당 계정을 Follow Suggestion 값으로 사용합니다.
  2. via 또는 data-via에 값이 없거나 사용자가 이미 해당 계정을 Follow하고 있다면 related 또는data-related 값을 찾아 Follow Suggestion 값으로 사용합니다.
  3. via, data-via, related, data-related 모두 값이 지정되어 있지 않거나 사용자가 해당 계정들을 이미 Follow하고 있다면, Follow Suggestion 화면은 나타나지 않습니다.

related 또는 data-related는 콤마를 통해 N개의 계정을 동시에 지정할 수 있습니다. related 또는 data-related에는 계정설명도 덧붙일 수 있는데 아래와 같이 계정명:설명 형태로 작성합니다.

<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="https://twitter.com/share"
    class="twitter-share-button"
    data-url="https://dev.twitter.com/pages/tweet_button"
    data-related="accountName1:description1,accountName2:description2">Tweet</a>


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

[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
[Twitter] Twitter for Websites - Follow Button  (0) 2011.09.23
[Twitter] Twitter API Getting Started  (0) 2011.09.22

관련글

댓글 0

티스토리툴바