오늘날 소셜 네트워크 서비스SNS의 가짓수는 쉽게 헤아리기 힘들 정도다. http://bit.ly/92ZX4X
나는 일찍이 SNS에 깊은 관심을 갖고 이것저것 직접 써보며 레고 같은 장난감을 가지고 노는 아이처럼 만지작만지작 하는 것이 취미였다. 미투데이나 트위터 등 짧은 글을 포스팅하는 마이크로블로그Microblog를 먼저 시작한 이후 올 여름부터 블로그를 쓰게 되었다. 글쓰기 실력이 형편 없었던지라 '적어도 싸이월드에 있는 내 일촌들은 내 글을 읽어주겠지' 하는 마음에서 싸이월드블로그를 먼저 열었다. 운 좋게 블로그 운영 초기에 네이트메인에 글이 노출되는 영광을 얻기도 했지만 확장기능을 설치하는 데에 블로그보다는 미니홈피에 가까운 싸이월드는 여러가지 제약이 많았고, 결국 그동안 썼던 대부분의 글을 티스토리로 옮겨오게 되었다.
블로그/웹사이트용 SNS 공유 & 북마크 버튼들
메타블로그에 글을 게시하는 것 이외에 여러가지 방법으로 내 블로그의 글을 공유 할 방법을 찾던 중 애드디스AddThis라는 서비스를 발견하게 되었다. 여러가지 SNS로 공유와 북마크를 가능하게 해주는 툴로 HTML과 CSS코드를 조금만 알면 쉽게 설치할 수 있는 장점이 있다.
어떠한 서비스를 많이 이용하는지 통계자료를 통해 확인할 수 있다. http://bit.ly/2ThH2k
애드디스 홈페이지에서 제공하는 몇가지의 간단한 단계만 거치면 블로그에 쓸 수 있는 SNS 공유와 북마크 버튼 코드를 만들 수 있다. 블로그 게시물 상단이나 하단에 버튼을 설치 할 경우, 게시물을 해당 SNS서비스나 북마크 툴로 친구과 함께 공유할 수 있다. 한국 서비스는 잘 보이지 않지만 현존하는 대부분의 SNS를 지원한다. 또한 애드 디스의 베타 기능 중의 하나인 팔로우 메뉴를 이용하면 자신의 트위터나 페이스북, RSS 등으로 쉽게 구독버튼을 만들 수 있다. 각각의 게시물을 공유하는 것이 아닌 소셜네트워크의 프로필 페이지로 직접 이동하는 기능을 제공한다는 점에서 공유 버튼 코드와 다르다.
1. 포스트 상단
<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> 라고 코드를 써주면 됩니다.
#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. 사이드 바
<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를 잘 하는 수준은 아니지만 만일 이해가 안된다면 위의 직접 블로그에 적용한 예를 참고한 후 비교해가면서 보면 쉽게 이해할 수 있다.
'리뷰' 카테고리의 다른 글
새로운 킨들(Wi-Fi)을 한 달간 사용해보고 (0) | 2010.10.31 |
---|---|
포스퀘어로 이곳저곳, 시카고 자전거 여행 (0) | 2010.08.30 |
내조의 여왕에 나온 닥터박 갤러리를 다녀오다 (4) | 2010.08.12 |
북젬 (BookGem) 독서대 & 전자책 홀더 리뷰 (0) | 2010.08.11 |
글을 읽기 편하게 개인화하는 Readability, Feedly, 그리고 싸이월드 블로그 호환문제 (0) | 2010.08.01 |
양평/용문 레일바이크 투어! (2) | 2010.08.01 |
아크 마우스 리뷰 Microsoft Arc Mouse (0) | 2010.08.01 |
내가 즐겨쓰는 유용한 웹 서비스 5선 (0) | 2010.08.01 |
파이어폭스용 Fx4 테마 & 확장기능 (0) | 2010.08.01 |