聰明不如鈍筆
총명불여둔필
assignment Blogging

티스토리에 retweet 버튼 달기

해외 언론 사이트를 돌아다니다 보면 기사 앞에 리트위트 버튼이 달린 걸 볼 수 있습니다. 해당 기사가 리트위트된 숫자도 보여주고, 곧바로 리트위트할 수도 있도록 하는 버튼이죠.

이 버튼을 티스토리에 달 수는 없을까요? 없다면 이 글을 시작하지도 않았겠죠.

우선 버튼이 나오도록 하는 소스를 찾아야 합니다. 우리는 backtype에서 제공하는 플러그인을 쓰도록 하겠습니다.

<div style="float:left; margin-right: 10px; ">
<script type="text/javascript">
tweetcount_url = 'http://블로그주소';
tweetcount_src = 'RT @트위터주소';
tweetcount_via = false; tweetcount_links = true;
tweetcount_size = 'large';
tweetcount_text = '글자 색깔';
tweetcount_background = '배경 색깔';
tweetcount_border = '테두리 색깔';
</script>
<script type="text/javascript" src="http://widgets.backtype.com/tweetcount.js">
</script>
</div>

일단 이 소스를 자기 블로그에 맞게 바꿔야 하는데, 저는 이렇게 바꿨습니다.

<div style="float:left; margin-right: 10px; ">
<script type="text/javascript">
tweetcount_url = 'http://kuduz.tistory.com[##_article_rep_link_##]';
tweetcount_src = 'RT @bigkini;
tweetcount_via = false; tweetcount_links = true;
tweetcount_size = 'large';
tweetcount_text = '669999';
tweetcount_background = 'e7e7e7';
tweetcount_border = '666666';
</script>
<script type="text/javascript" src="http://widgets.backtype.com/tweetcount.js">
</script>
</div>

여기서 주의하실 점은 블로그 주소를 "ID.tistory.com" 형태로만 적으면 블로그 전체에서 리트위트된 숫자가 나온다는 것. 각 포스트별로 따로 나오게 하시려면 블로그 주소 뒤에 해당 글을 나타내는 치환자인 [##_article_rep_link_##]를 덧붙여야 합니다.

(HTML에서 쓰이는 색상표를 알고 싶으면 여기를 참조하세요.)

자, 이 소스를 <ctrl+C> 해서 들고 관리자 화면으로 가봅시다. 스킨에 덧붙일 내용이기 때문에 먼저 스킨>HTML/CSS 편집을 선택합니다.



먼저 본문 내용을 뿌려주는 치환자 [##_article_rep_desc_##]를 찾습니다.



그리고 이 바로 앞에 <Ctrl+V>로 소스를 집어 넣습니다.



소스를 저장하고 화면을 보면 아래처럼 글 앞에 리트위트 버튼이 달린 걸 볼 수 있습니다.



그런데 글로 시작할 때는 모르겠지만 그림으로 글을 시작하다 보니 어쩐지 어색합니다. 그래서 이번에는 리트위터 버튼을 제목 옆으로 옮겨보겠습니다.

방법은 위와 똑같습니다. 글 제목을 나타내는 치환자 [##_article_rep_title_##]를 찾은 뒤 마찬가지로 소스를 붙여넣으면 됩니다.

 

이 때 조심해야 하는 건 이 치환자는 공개글, 비공개글, 보호글을 구분하지 않는다는 겁니다. 비공개나 보호된 글에 리트위터 버튼을 달 필요는 없겠죠? 이를 잘 구분해서 다셔야 합니다.


또 소스를 자세히 보시면 첫번째 줄이
<div style="float:right; margin-left:10px; ">
이렇게 바뀌어 있는데 제목 오른쪽에 달겠다는 뜻으로 바꾼 겁니다.

여기까지 성공적으로 따라오셨다면 이렇게 제목 옆에 리트위트 버튼이 잘 달려있을 겁니다.



버튼 위쪽을 누르면 이 포스트를 누가 리트위트했는지 알 수 있고, 아래쪽을 클릭하면 곧바로 리트위트할 수 있습니다.

이렇게 설명은 해두고 왜 정작 이 블로그에는 안 달았냐고요? 리트위트 0인 글을 계속 보기 싫어서요 -_-;

댓글, 10

account_circle
vpn_key
web

security

mode_edit
Blogging | 카테고리 다른 글 더 보기