티스토리 블로그 제목 옆에 리트윗 버튼 달기

2010.05.31 00:05

트위터 사용자가 크게 늘어 나면서 트위터를 이용한 정보 공유도 많이 늘어나고 있습니다. 예를 들면 리트윗 버튼 같은것입니다. 글을 읽다가 다른 사람들과 공유하고 싶다면 리트윗 버튼들 눌러 간단하게 트위터에 올리게 되는거죠. 요즘엔 포털들도 뉴스에 리트윗 버튼을 달아 글을 보다 쉽게 다른 사람들과 공유 할 수 있도록 서비스 하고 있습니다.

리트윗 버튼은 블로거에게 정말 유용합니다. 보통 리트윗을 하게 되면 간단하게 자신의 생각을 곁들여 리트윗하게 되는데 이걸 추적하면 자신의 글에 대한 반응을 실시간으로 얻을 수 있죠. 또 어떤 사람들이 내 글을 읽었고, 어떤 사람들이 내 글에 관심을 가졌는지 쉽게 파악할 수 있습니다. 댓글과는 다른 새로운 커뮤니케이션입니다.

리트윗 종류는 여러가지가 있습니다. 가장 자유로운 방법으로는 직접 리트윗 아이콘을 만들어 붙이는 방법이 있고, 일반적인 방법으로는 리트윗 카운터를 다는 방법이 있습니다. 리트윗 카운터는 Tweetcount를 가장 많이 활용합니다.

리트윗 버튼 위치는 블로그 디자인에 따라 다양하게 선택할 수 있습니다. 보통 글 상단 오른쪽이나 왼쪽 본문에 넣게 됩니다. 아니면 글 아래 다음 뷰 추천버튼과 함께 놓거나 그 아래 놓기도 합니다. 저는 좀 더 깔끔하게 리트윗 버튼을 달기위해 글 제목 옆에 달아 봤습니다.

제목옆 리트윗 버튼


제목 옆에 리트윗 버튼을 설치한 이유는 제목 옆에 있어 쉽게 눈에 띄기 때문에 글을 읽는 방문자들이 알아보기 편리하기 때문입니다. 그리고 본문 글 영역의 구조를 바꾸지 않고도 설치 할 수 있어서 좋습니다. 블로그 글이 사진으로 시작하면 본문 속 리트윗 버튼은 뭔가 이상하게 됩니다. 구글 애드센스도 있다면 더 이상하게 되겠죠.

아무튼 제목 옆에 리트윗 버튼을 설치하는 방법을 알려 드리겠습니다. 별건 없고 'HTML/CSS 편집'에서 소스 넣는 위치만 잘 잡으면 됩니다.

<div style="float:right;">
<script type="text/javascript">
tweetcount_url = 'http://본인 블로그 주소[##_article_rep_link_##]';
tweetcount_src = 'RT @본인 트위터 아이디';
tweetcount_via = false;
tweetcount_links = true;
tweetcount_size = 'small';
tweetcount_text = '000000';
tweetcount_background = 'eeeeee';
tweetcount_border = 'CCCCCC';
tweetcount_short_url = false;
tweetcount_short_url = window.location.href;
</script>
<script type="text/javascript" src="http://widgets.backtype.com/tweetcount.js">
</script>
</div>

위 소스를 복사해서 본인의 블로그 주소와 트위터 아이디를 넣고 사용하면됩니다. 좀 더 다르게 꾸미고 싶다면 여기를 참고해 보세요. 이제 스킨 - HTML/CSS 편집 - skin.html을 열어 위 소스를 붙여 넣습니다. 넣는 위치는 아래 참고 하세요.

<div class="entry">
<div class="titleWrap">
<h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>

여기에 넣으세요

<span class="category"><a href="[##_article_rep_category_link_##]">
[##_article_rep_category_##]</a> </span>

블로그 스킨마다 소스가 다를 수 있는데 <a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a> 뒷줄에 붙여 넣으면 일반적으로 맞을 겁니다. 제 스킨은 '기본 스킨(사용자 수정/업로드) ver.1.1' 입니다.

써놓고 보니 좀 어렵게 보이네요. 해보면 별거 아닙니다. 주의 할 점음 스킨을 수정하기 전에는 꼭 스킨 저장을 해 놓으세요. 혹시 실수로 소스를 지워버리면 복구가 힘들어 지니깐 꼭 저장해 놓으시기 바랍니다.
신고

뽕다르 인터넷 , , , , , ,

  1. 감사합니다.
    제 블로그에 적용하였습니다. ^^

  2. 처음 시도하다보면 좀 어려울 수 있어요. 이곳저곳 여러군데로 한번 시도해 보세요 ^^

  3. 감사합니다.
    저도 함 달아봐야겠네요..^^

  4. 제목옆에 리트윗 버튼 달면 딱 좋을것 같네요 ^^

  5. 하기 쉽게 설명해주셔가지고 컴맹인 저도 달았네요. 감사해요.

  6. 와~ 이거 좀 어려운데 잘하셨어요~ ㅋㅋ 근데 요즘 다른 '좋아요' 버튼이 많아서 이건 잘 안쓰는것 같더라구요.