본문 바로가기

Tech Story

블로그 (티스토리)에 트위터 ReTweet 버튼 넣기

지금 티스토리에서 제공하는 Tistory2Tweet 플러그인을 사용하면 티스토리에서 글을 발행하면 자동으로 해당글의 제목과 단축 URL을 본인의 트위터로 트윗해주고 있다. 이는 글을 발행할 당시 1회성으로 끝나고 만다. 그렇지만, 일반 네티즌들이 글을 보고 마음에 들어서 ReTweet하기 위해서는 아직 티스토리나 다음뷰 등에서 지원해주고있지 않다. 그래서, 외부의 업체에서 개발한 ReTweet 버튼을 사용하면 간단히 (?) 해결할 수가 있다.

 ReTweet 버튼에 대한 정보는 http://help.tweetmeme.com/2009/04/06/tweetmeme-button 에서 찾아볼 수가 있다. 그러나 이를 티스토리에 맞게 커스터마이징을 할 필요가 있기에, 본 포스팅을 작성합니다. 저도 오늘 우연히 발견해서 지금 적용해봤습니다.

적용방법 및 순서
1. 티스토리의 관리자 센터에 접속해서 "스킨 > HTML/CSS 편집' 화면에 들어간다.
'HTML/CSS 편집' 화면에 들어가면 두개의 TextArea가 나옵니다. 그 중에서 상단에 있는 skin.html을 편집할 것입니다.
브라우저의 찾기를 이용해서 
지금 티스토리에서 제공하는 Tistory2Tweet 플러그인을 사용하면 티스토리에서 글을 발행하면 자동으로 해당글의 제목과 단축 URL을 본인의 트위터로 트윗해주고 있다. 이는 글을 발행할 당시 1회성으로 끝나고 만다. 그렇지만, 일반 네티즌들이 글을 보고 마음에 들어서 ReTweet하기 위해서는 아직 티스토리나 다음뷰 등에서 지원해주고있지 않다. 그래서, 외부의 업체에서 개발한 ReTweet 버튼을 사용하면 간단히 (?) 해결할 수가 있다.

 ReTweet 버튼에 대한 정보는 http://help.tweetmeme.com/2009/04/06/tweetmeme-button 에서 찾아볼 수가 있다. 그러나 이를 티스토리에 맞게 커스터마이징을 할 필요가 있기에, 본 포스팅을 작성합니다. 저도 오늘 우연히 발견해서 지금 적용해봤습니다.

적용방법 및 순서
1. 티스토리의 관리자 센터에 접속해서 "스킨 > HTML/CSS 편집' 화면에 들어간다.
'HTML/CSS 편집' 화면에 들어가면 두개의 TextArea가 나옵니다. 그 중에서 상단에 있는 skin.html을 편집할 것입니다.
브라우저의 찾기를 이용해서  문자열을 찾습니다. 위의 문자열은 티스토리에서 본문내용과 치환되는 부분입니다.
위의 tweetmeme에서 제시된 소스 코드를 [##_article_rep_desc_##] 전후에 삽입하면 리트윗 버튼이 생성됩니다.
본문 시작부분에 버튼을 넣고 싶으면 당연히 [##_article_rep_desc_##] 바로 앞에 tmeme 소스 코드를 넣고, 반대로 본문 뒤쪽에 버튼을 넣고 싶으면 [##_article_rep_desc_##]의 바로 뒤에 소스 코드를 삽입하면 됩니다.

2. tmeme 소스 코드 수정하기
위의 URL에서 설명된 대로 몇 가지 옵션을 설정해주면, 버튼의 모양이나 트위터에서 표시되는 내용을 수정할 수가 있습니다.
그런데 문제는 기본 소스코드를 그대로 삽입하게 되면 티스토리의 포스팅 단위로 리트윗이 일어나는 것이 아니라,
티스토리 블로그 단위 또는 tweetmeme_url 에 제시된 페이지/블로그 단위로 리트윗이 일어납니다.
그래서, tweetmeme_url에서 티스토리 내부 정보를 이용해서 수정을 가할 필요가 있습니다.
해당 포스팅의 url정보는 [ ##_article_rep_link_## ] 문자열이 치환됩니다. 
환경설정에서 숫자형으로 되어있다면 '/100' 등과 같이 해당 포스팅의 디렉토리명이 나옵니다. (문자형이면 제목으로 나오겠죠.)
[##_article_rep_link_##] 정보와 자신의 티스토리명 (URL)을 이용해서 tweetmeme_url을 완성하면 됩니다.
예를 들어, 저의 경우 tweetmeme_url = 'http://bahnsville.tistory.com[ ##_article_rep_link_## ]'; 로 설정했습니다.

skin.shtml 편집을 종료하면 리트윗 버튼 적용이 끝납니다.

제 티스토리에 적용된 코드는 아래와 같습니다. 아래 코드에서 tweetmeme_ 옵션들은 tweetmeme 홈페이지 내용을 참조하세요.
참고1. 아래 코드에서 잘보시면 [ ##_article_rep_link_## ] & [ ##_article_rep_desc_## ] 중에 공백이 있는데 (대괄호 '[' ']' 부근), 이는 제거하셔야 합니다.

<!--- 코드 시작 --->
<script type="text/javascript"> tweetmeme_style = 'compact'; tweetmeme_url = 'http://bahnsville.tistory.com[ ##_article_rep_link_## ]'; tweetmeme_source = 'falnlov'; tweetmeme_service = 'is.gd'; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> [ ##_article_rep_desc_## ]
<!--- 코드 끝 --->

주의할점... 블로그 포스팅의 글제목에 '&'가 포함된 경우, 정상적으로 리트윗이 일어나지 않습니다.
아시겠지만, '&'는 URL에서 파라메터 구분자로 사용되기 때문입니다.
다른 몇몇 특수기호들이 포함된 포스팅제목도 비정상적으로 작동될 수가 있습니다.


반응형
문자열을 찾습니다. 위의 문자열은 티스토리에서 본문내용과 치환되는 부분입니다.
위의 tweetmeme에서 제시된 소스 코드를 [##_article_rep_desc_##] 전후에 삽입하면 리트윗 버튼이 생성됩니다.
본문 시작부분에 버튼을 넣고 싶으면 당연히 [##_article_rep_desc_##] 바로 앞에 tmeme 소스 코드를 넣고, 반대로 본문 뒤쪽에 버튼을 넣고 싶으면 [##_article_rep_desc_##]의 바로 뒤에 소스 코드를 삽입하면 됩니다.

2. tmeme 소스 코드 수정하기
위의 URL에서 설명된 대로 몇 가지 옵션을 설정해주면, 버튼의 모양이나 트위터에서 표시되는 내용을 수정할 수가 있습니다.
그런데 문제는 기본 소스코드를 그대로 삽입하게 되면 티스토리의 포스팅 단위로 리트윗이 일어나는 것이 아니라,
티스토리 블로그 단위 또는 tweetmeme_url 에 제시된 페이지/블로그 단위로 리트윗이 일어납니다.
그래서, tweetmeme_url에서 티스토리 내부 정보를 이용해서 수정을 가할 필요가 있습니다.
해당 포스팅의 url정보는 [ ##_article_rep_link_## ] 문자열이 치환됩니다. 
환경설정에서 숫자형으로 되어있다면 '/100' 등과 같이 해당 포스팅의 디렉토리명이 나옵니다. (문자형이면 제목으로 나오겠죠.)
[##_article_rep_link_##] 정보와 자신의 티스토리명 (URL)을 이용해서 tweetmeme_url을 완성하면 됩니다.
예를 들어, 저의 경우 tweetmeme_url = 'http://bahnsville.tistory.com[ ##_article_rep_link_## ]'; 로 설정했습니다.

skin.shtml 편집을 종료하면 리트윗 버튼 적용이 끝납니다.

제 티스토리에 적용된 코드는 아래와 같습니다. 아래 코드에서 tweetmeme_ 옵션들은 tweetmeme 홈페이지 내용을 참조하세요.
참고1. 아래 코드에서 잘보시면 [ ##_article_rep_link_## ] & [ ##_article_rep_desc_## ] 중에 공백이 있는데 (대괄호 '[' ']' 부근), 이는 제거하셔야 합니다.

<!--- 코드 시작 --->
<script type="text/javascript"> tweetmeme_style = 'compact'; tweetmeme_url = 'http://bahnsville.tistory.com[ ##_article_rep_link_## ]'; tweetmeme_source = 'falnlov'; tweetmeme_service = 'is.gd'; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> [ ##_article_rep_desc_## ]
<!--- 코드 끝 --->

주의할점... 블로그 포스팅의 글제목에 '&'가 포함된 경우, 정상적으로 리트윗이 일어나지 않습니다.
아시겠지만, '&'는 URL에서 파라메터 구분자로 사용되기 때문입니다.
다른 몇몇 특수기호들이 포함된 포스팅제목도 비정상적으로 작동될 수가 있습니다.


반응형