공식적으로, 비공식적으로 웹 2.0의 시대가 되면서 사람들은 정보를 공유하고 서로 소통하는 새로운 방법들을 발견하게 되었다. 요즘 한창 각광을 받고 있는 트위터나 페이스북 같은 소셜 네트워크 서비스SNS들과 이전부터 미디어의 와 소통의 장 역할을 하며 꾸준히 발전해 온 블로그는 상호 공존하며 무궁무진한 웹의 영역을 넓혀가는 존재들이다.
Social Network Service

오늘날 소셜 네트워크 서비스SNS의 가짓수는 쉽게 헤아리기 힘들 정도다. http://bit.ly/92ZX4X


나는 일찍이 SNS에 깊은 관심을 갖고 이것저것 직접 써보며 레고 같은 장난감을 가지고 노는 아이처럼 만지작만지작 하는 것이 취미였다. 미투데이나 트위터 등 짧은 글을 포스팅하는 마이크로블로그Microblog를 먼저 시작한 이후 올 여름부터 블로그를 쓰게 되었다. 글쓰기 실력이 형편 없었던지라 '적어도 싸이월드에 있는 내 일촌들은 내 글을 읽어주겠지' 하는 마음에서 싸이월드블로그를 먼저 열었다. 운 좋게 블로그 운영 초기에 네이트메인에 글이 노출되는 영광을 얻기도 했지만 확장기능을 설치하는 데에 블로그보다는 미니홈피에 가까운 싸이월드는 여러가지 제약이 많았고, 결국 그동안 썼던 대부분의 글을 티스토리로 옮겨오게 되었다.

AddThisExamples

블로그/웹사이트용 SNS 공유 & 북마크 버튼들

한 달 정도 다시 티스토리 블로그에 글을 쓰면서 깨달은 사실은 아직 내 블로그에 그럴 듯한 구독버튼 하나 없다는 것이었다. 물론 좋은 내용의 글을 잘 쓰는 것이 중요하다는 것이 나의 철학이고 이를 위해서 보잘것 없는 나의 필력을 향상시키기 위해 매일 노력하고 있다. 그러나 나의 상황은 마치 갓 시작한 트위터 사용자가 0명의 팔로워를 가지고 열심히 혼잣말을 하는 것과 비슷했다. 아무리 정성스럽게 쓴 글일지라도 사람들에게 읽혀지지 않고 오가는 소통이 없다면 블로그를 통해 내가 얻고자 했던 깨달음의 절반밖에 얻을 수 없는 반쪽짜리 소통을 하고 있다는 생각이 들었다.

메타블로그에 글을 게시하는 것 이외에 여러가지 방법으로 내 블로그의 글을 공유 할 방법을 찾던 중 애드디스AddThis라는 서비스를 발견하게 되었다. 여러가지 SNS로 공유와 북마크를 가능하게 해주는 툴로 HTML과 CSS코드를 조금만 알면 쉽게 설치할 수 있는 장점이 있다.

어떠한 서비스를 많이 이용하는지 통계자료를 통해 확인할 수 있다. http://bit.ly/2ThH2k


애드디스 홈페이지에서 제공하는 몇가지의 간단한 단계만 거치면 블로그에 쓸 수 있는 SNS 공유와 북마크 버튼 코드를 만들 수 있다. 블로그 게시물 상단이나 하단에 버튼을 설치 할 경우, 게시물을 해당 SNS서비스나 북마크 툴로 친구과 함께 공유할 수 있다. 한국 서비스는 잘 보이지 않지만 현존하는 대부분의 SNS를 지원한다. 또한 애드 디스의 베타 기능 중의 하나인 팔로우 메뉴를 이용하면 자신의 트위터나 페이스북, RSS 등으로 쉽게 구독버튼을 만들 수 있다. 각각의 게시물을 공유하는 것이 아닌 소셜네트워크의 프로필 페이지로 직접 이동하는 기능을 제공한다는 점에서 공유 버튼 코드와 다르다.

Yunho Jang's blog에 사용된 AddThis 툴 활용 예

1. 포스트 상단


HTML

<div class="addthis_toolbox addthis_default_style" id="addthis">
    <a class="addthis_button_tweet" tw:count="horizontal"></a>
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_email"> 이메일</a>
    <a class="addthis_separator"> | </a>
    <a class="addthis_button_print"> 인쇄</a>
</div>

버튼이나 툴의 형식은 애드디스가 정의해 놨기 때문에 각각의 버튼은 <a class="addthis_button_(툴제목)" (서식)">(설명)</a> 형식으로 지정해주면 됩니다. 예를들어 게시물을 트위터로 공유할 수 있는 버튼을 만들 때 리트윗의 횟수가 버튼 위에vertical 나오게 하고 싶으면 <a class="addthis_button_tweet" tw:count="vertical"></a> 라고 코드를 써주면 됩니다.

CSS

#addthis {float:right;margin-top:15px;margin-bottom:-20px;}
#addthis a.addthis_button_tweet {margin-top:-2px;margin-right:-17px;}
#addthis a.addthis_button_facebook_like {margin-right:-5px;}

각각의 버튼을 보기 조금 더 좋게 바꾸기 위해 위치를 조금 수정해 봤습니다. 그러나 개인화를 하지 않는 대부분의 경우에는 애드디스가 제공하는 코드를 변경없이 사용해도 예쁘게 나옵니다.

2. 사이드 바


HTML

<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
    <a class="addthis_button_twitter_follow" addthis:userid="여기 아이디를 적으세요"></a>
    <a class="addthis_button_facebook_follow" addthis:userid="여기 아이디를 적으세요"></a>
    <a class="addthis_button_linkedin_follow" addthis:userid="여기 아이디를 적으세요"></a>
    <a class="addthis_button_googlebuzz_follow" addthis:userid="여기 아이디를 적으세요"></a>
    <a class="addthis_button_delicious"></a>
    <a class="addthis_button_favorites"></a>
    <a class="addthis_button_google"></a>
    <a class="addthis_button_rss_follow" addthis:url="여기 RSS주소를 적으세요"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=여기 애드디스 아이디를 적으세요"></script>

포스트 상단의 예와 다르게 32x32의 버튼이 쓰였기 때문에 div class의 이름이 다릅니다. 버튼의 이미지를 따로 업로드하고 각각의 포스팅 링크를 입력할 필요 없이 제공하는 class의 이름만 제대로 써주면 알아서 다 해주므로 편합니다. 공유버튼이 아니라 프로필 페이지로 직접 들어가는 경우에는 뒤에 _follow 가 붙네요. User ID나 Username을 적는 곳에는 여러분의 SNS 아이디를 적어주시면 됩니다.

페이지가 영문으로 되어있기 때문에 기본적으로 제공하는 포맷 이외에 개인화 된 버튼들을 이용하기 다소 까다로울 수도 있다. HTML이나 CSS를 잘 하는 수준은 아니지만 만일 이해가 안된다면 위의 직접 블로그에 적용한 예를 참고한 후 비교해가면서 보면 쉽게 이해할 수 있다.
Created by Yunho Jang
blog comments powered by Disqus