텀블러 사용법: 인덱스 페이지에서 트위트 공유버튼 설정 - 현재 보이는 글의 주소 단축주소 태그 인식

텀블러 블로그의 홈페이지, 검색결과페이지, 태그페이지 등과 같은 인덱스페이지에서는 트위트 공유버튼이 현재 보고 있는 글의 주소를 인식하지 못한다. 현재 브라우저 주소창에 있는 주소를 인식하기 때문이다. 예컨데,

홈페이지에서는     http://sarangchaetalk.tumblr.com/
태그페이지에서는  http://sarangchaetalk.tumblr.com/tagged/건강
과 같이 인식한다.

다시말하자면, 방문자가 인덱스페이지에서 현재 보고 있는 글을 트위트로 공유하고자 트위트 공유버튼을 누르면, 해당 글의 주소가 아닌 홈페이지 주소나 태그페이지 주소 또는 검색결과페이지 주소를 인식하여 트위트로 보내게 된다. 따라서, 트위트 사용자가 해당 주소를 클릭하였을 때, 공유하고자 한 글로 연결이 되지 않는다.

트위트가 현재 보이는 글의 주소를 인식하도록 하는 방법을 설명하기에 앞서, 한 가지 생각해야 할 것이 있다. 블로그의 인덱스 페이지에 표시되는(보여지는) 글 수를 1개로 설정했을 경우에 적용이 가능하다는 점이다.

1. 아래는 트위트 사이트에서 내려받은 공유버튼 스크립트 모양이다.
<a>태그와 <script> 두 부분으로 이루어져 있다.

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

2. 위의 <a>태그에 아래의 항목을 추가한다.

<a href="https://twitter.com/share" class="twitter-share-button" 여기에 추가하고자 하는 항목을 아래에서 복사하여 붙임>Tweet</a>

1) 현재 보이는 글의 제목

data-text="{block:Posts}{Title}{/block:Posts}"

2) 현재 보이는 글의 고유주소
(http://sarangchaetalk.tumblr.com/post/67029271997/south-australia-will-extend ..... 와 같은 모양)

data-url="{block:Posts}{Permalink}{/block:Posts}"

3) 현재 보이는 글의 줄인 주소(단축주소)
(http://tmblr.co/ZaYtJq_Lxl0M  와 같은 모양)

data-url="{block:Posts}{ShortURL}{/block:Posts}"

4) 현재 보이는 글에 붙여진 태그를 트위트 해시태그로 포함
(#신경제질서 #마르크 .... 같은 모양)

data-hashtags="{block:Posts}{block:HasTags}{block:Tags}{Tag},{/block:Tags}{/block:HasTags}{/block:Posts}"

단, 위 2)번과 3)번은 모양만 다를뿐 같은 글 주소이므로, 둘 가운데 하나만 추가해야 한다.


위에서 1)글제목 3)단축 글주소 4)해시태그 항목을 추가하면 아래와 같은 모양이 된다.
아래 부분의 <script>는 트위트에서 내려받은 그대로이다.

<a href="https://twitter.com/share" class="twitter-share-button" data-url="{block:Posts}{ShortURL}{/block:Posts}" data-text="{block:Posts}{Title}{/block:Posts}" data-hashtags="{block:Posts}{block:HasTags}{block:Tags}{Tag},{/block:Tags}{/block:HasTags}{/block:Posts}">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

3.아래 그림은 위와 같이<a>태그를 수정하여 텀블러 블로그에 트위트 공유버튼을 넣고, 인덱스페이지에서 트위트로 글을 보냈을 때, 트위트에서 보여지는 모습이다.

도움이 되었기를 바랍니다.