지금 이 본문이 시작되는 바로 위를 보시면 자잘한 버튼들이 주르륵 있는 것이 보일 겁니다.
SNS 공유 버튼들이죠. 이거 다 한번에 셋팅된 걸로 달았습니다.
현재 수정되었습니다. 위의 설명이 있던 때의 배치는 아래입니다. 상단 큰 광고 아래, 뷰애드 왼쪽입니다. 다시 정정 -> 계속 위치가 바뀌거나 삭제되거나 변경되고 있습니다. 몇 군데 배치 가능한 방법에 대해 태그 정보를 포스팅 하단에 모두 드리겠습니다.
# 따로 달 때 겪을 수 있는 어려움들
이것을 달기 전에 저는 facebook 보내기(SEND)가 달린 버튼과 트윗 버튼을 각각 따로 소스를 구해 달았습니다.
facebook 보내기(send) 기능이 달린 버튼을 달았다가 얼마전 포스팅했던 유입 경로가 나뉘는 일을 겪고(!) ( 티스토리, 유입경로에 fb_xd_fragment 가 덧붙여져 있다면? )다시 떼어내야만 했습니다. 페이스북 버튼을 달 때는 각 페이지에 따로 적용되는 소스를 덧붙여 줘야 합니다. 여러 번 타자를 치다 보니 익숙해졌지만 처음엔 그것도 쉬운 일이 아니었습니다. 주소 뒤에 슬래쉬 /를 달아야 되나 마나, &는 놔둬야 되나 마나 눈알이 빠지도록 열심히 쳐다보며 소스를 수정했지요. 한 글자만 틀려도 에러가 나니까요.
겨우 달았는데 페이스북 버튼과 트윗버튼의 높이가 달라서 나란히 놓고 보니 뭔가 모양이 마음에 들지가 않습니다. 페이스북 버튼의 아래쪽이 살짝 잘리도록 높이 조절을 해 줘야 되고 가로 폭도 450 씩이나 놔 두면 중앙쪽으로 이동시킬 수가 없습니다. 결국 가로 세로 모두 다 일일이 조금씩 봐가며 수정을 해 줘야 하죠.
해 놓고 돌아다니다 보니 구글 플러스 버튼을 단 데가 또 보입니다. 뭔진 몰라도 이왕 다는 것 저것도 같이 달아 볼까나? 소스를 찾아 다녀보았습니다. 그러다가 발견한 것이 바로 이 통합버튼 AddThis 입니다.
각 페이지 따로 적용되는 소스를 쓸 필요가 없습니다. 높이가 달라서 예쁘게 맞추느라 div 니 table 짜는 방법들을 찾아 헤매지 않아도 됩니다. 한번에 다 되니까요. 긁어서 복사한 뒤 붙여 넣으면 됩니다. 그리고 가입만 하면 자신의 사이트에서 페이스북전송은 몇 번이 되었는지 트윗은 전체 몇 번인지 분석도 무료로 해 줍니다.
좋은 것 같긴 한데 정확히 어떤 쓸모가 있는지 모르겠다구요?
# SNS 버튼은 어떤 식으로 쓸 수 있나?
주황색 +Share 버튼에 마우스를 살짝 갖다 대면 이런 팜업이 뜹니다.
티스토리 같은 경우엔 스크랩이 안 됩니다. 이 SNS 버튼들은 사용자로서는 스크랩의 의미를 가지게 됩니다. 블로거들로서는 많은 곳에 자신의 글이 전파될 수 있는 이점이 있습니다.
저 팜업창의 인쇄를 클릭하면 페이지가 인쇄가 됩니다. 즐겨찾기를 클릭하면 사용하는 브라우저에 즐겨찾기로 그 페이지가 등록됩니다. 저 중에서 Facebook을 한번 클릭해 볼까요? 아래같은 팜업창이 하나 뜹니다.
자신의 페이스북에 저렇게 꽂을 수 있습니다. 위에 메모 적을 수 있구요, 올려진 사진들 중 마음에 드는 걸로 고를 수도 있습니다. 자신만 볼 지 같이 볼 지도 결정하고 링크 공유 클릭하면 페이스북에 가서 스크랩이 되는 거죠. 글 제목과 아래 요약문은 원래의 것과 다르게 수정도 가능합니다. (위에서 쉐어팜업의 페이스북을 클릭해서 시험해 보세요)
마음에 드는 글을 발견하면 꽂아 두고 친한 친구들과 같이 나눌 수 있습니다. 전체 글 다 퍼가면 한 두 개도 아니고 무겁잖아요. 저렇게 예쁘게 가져간 뒤에 클릭하면 본문이 뜨니까 좋죠.
이번엔 Tweet 버튼 옆의 숫자를 클릭해 볼까요?
트윗 공유
숫자에 마우스를 대니까 '이 페이지가 10번 퍼뜨려졌다. 이 트윗들을 봐보시라' 라는 메세지가 팜업뜨죠. 눌러 볼께요.
트윗 공유
다 뜨지는 않고 일부가 떴네요. 이거랑 뷰 박스 안의 메세지 숫자랑 다르더군요. 어떨 땐 뷰박스가 많고 어떨 땐 이 버튼이 더 많아요.
뷰 메세지
저기는 메세지가 8인데 위의 트윗 버튼은 10 개예요. 이 트윗 버튼이 유용할 때는 뷰에 송고하지 않을 때죠. - 예전 여성 생활 정보 하나를 뷰에 송고하지 않고 포스팅했는데 그걸 옥주현양이 리트윗을 한 적이 있었습니다. 다음 날 저 트윗 박스에 숫자가 129라서 놀라 저 버튼으로 따라가 보고는 옥주현양이 리트윗했다는 것을 알았습니다. -
트윗버튼을 눌러 봅니다.
트윗 공유
글 주소 뒤에 꼬랑지가 붙어 있습니다. 나중에 애드디스에서 분석할 때 쓰려고 추적소스로 넣어 놓은 것입니다. 나중에 트윗된 페이지로 가서 저걸 클릭해보면 제대로 그 포스팅을 잘 찾아 옵니다. 링크 기능은 문제가 없다는 것이죠. 만약 이게 싫은 분은 하단의 공유 버튼을 쓰셔도 됩니다.
저 버튼은 어제 설치한 것인데 예전에 제가 직접 따로 설치했던 버튼으로 공유되었던 것들도 문제없이 표시되어져 있었습니다.
버튼을 따로 설치하는 이유는 몇 번이나 공유되어 갔는가 숫자로 표시된다는 것 때문에 더 선호되어 집니다.
# AddThis 닷컴으로 갑니다
공유버튼을 나눠 주는 데는 여기 말고도 Sharethis 버튼도 있고 몇 군데가 더 있긴 한데 이 애드디스가 세계적으로 가장 많이 보급되어져 있다고 합니다.
페이지 들어가서 상단의 Get AddThis 를 클릭
애드디스,AddThis
Website 선택 - 3 가지 중에 마음에 드는 스타일 선택 - 오른쪽의 소스를 긁어서 - 원하는 곳에 붙여 넣으면 - 끝 입니다.
# 몇 가지 설정
그 팜업 창 아래 보면 '설정' 이라는 것이 보입니다. - 한국 사용자에게는 언어 설정하지 않았는데도 자동 한글이 나옵니다. ^ ^ -
공유 방법 더보기를 보면 316개의 방법이 더 있다고 나옵니다. 자주 쓰는 것으로 이 팜업창에 먼저 나오도록 한다면 편리하겠죠? 어느 것을 사람들이 더 선호하는가 고민할까 했는데 이것도 애드디스 홈페이지에 나오는군요.
SNS 사용 순위
미국과 한국에서 자주 쓰이는 것대로 정리되어져 있습니다. 저는 저기 있는 것을 참고로 순서를 정했습니다.
# 소스에서 추가, 수정 할 수 있는 것들 -
이 버튼들을 아래에 둘까 했는데 각종 추천 버튼들과 뒤엉켜 복잡해 보일 것 같았습니다.
만약 보기좋게 중앙 정렬을 할 경우에도 문제가 있습니다. 쉐어 버튼의 팜업창이 그 아래 광고창 쪽으로 펼쳐 내려 가게 될 것이고 그러면 헛클릭이 생길 가능성이 높아서요.
그래서 본문 상단에 놓기로 했습니다.
skin.html 로 들어가신 뒤 본문 태그를 찾습니다. [# #_article_rep_desc_# #] 이거죠. 샵 두개 붙여서요. Alt+F 누른 뒤 검색창에 적어 넣고 찾습니다. 본문 위에 넣고 싶으니 저 태그 위에 넣을 겁니다.
그런데, 제 블로그의 상단엔 긴 대형 광고가 하나 있어요. 그 아래 오른쪽에 뷰 애드가 있죠. 뷰애드 왼쪽에 잘 들어가게 버튼을 놓고 싶었습니다.
그런데 이게 예쁘게 잘 안 되더라구요. 오른쪽 뷰 애드가 아래로 자꾸 처져서요. 전체 틀이 깨져요.
가만 생각하니 뷰 애드 왼쪽에 애드 센스를 나란히 넣는 태그를 응용하면 되겠더군요. 그래서 다음과 같이 -
<div style="width:528px;height:60px;margin: 0 0 0 +3px;float:left">
버튼들
</div>
-> 오른쪽에 뷰애드를 두고 본문 상단 왼쪽에 둘 때의 소스입니다.
맨 왼쪽의 528은 블로그 가로폭에 맞춰 조절해야 하는 부분입니다. 저것이 좁아지면 저 버튼 옆과 뷰 애드 사이로 본문 글자들이 끼어 들어갑니다.넓어지면 버튼들의 간격이 넓어지면서 두 줄이 됩니다. 대략 블로그 가로폭 - 273 하면 되지 않을까 싶습니다. 숫자를 하나씩 바꿔 가면서 미리보기로 확인해보세요. (528로 하니 뷰 애드쪽으로 금 하나만큼 침범해서 왼쪽 테두리선이 살짝 안 보였어요 -)
그 옆 height 숫자는 버튼 줄과 본문 사이의 간격을 조절할 수 있는 것입니다. 뷰 센스 옆에 끼울 때만 이 소스를 쓰는 것이 아니라 응용할 수 있습니다. 이 div 안에 버튼들을 넣으면 글 쓸 때마다 신경쓰지 않더라도 보기 좋게 본문을 띄울 수 있습니다.
+3 숫자는 왼쪽 버튼이 시작되는 부분입니다. 저것이 만약 -5 정도가 되면 왼쪽 버튼 끝이 보이지 않는 저 쪽으로 들어가 잘립니다. 살짝 띄우고 안정감있게 나오라고 3 정도로 저는 조절했습니다.
# 저 프린트 버튼, 즐겨찾기 버튼, 메일 버튼이 따로 나온 것은 뭐죠?
소스에다가 몇 개 덧붙였습니다.
<!-- AddThis Button BEGIN -->
<div style="width:527px;height:60px;margin: 0 0 0 +3px;float:left">
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_email"> </a>
<a class="addthis_button_favorites"> </a>
<a class="addthis_button_joliprint"> </a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f4af8b0******57"></script></div>
<!-- AddThis Button END -->
위에서 파란색 부분을 덧붙였습니다. 2proo님 것을 참조했습니다. 주황색 부분은 제 아이디이니 수정하셔야 합니다. 가입한 뒤 본인 아이디를 넣어야 분석자료를 볼 수 있습니다. 첨부파일도 아래 하나 넣겠습니다. (아래 첨부파일의 print를 joliprint로 수정하시면 졸리프린트가 구현됩니다 )
addthis간격조절소스.txt제 소스 캡쳐로 자세히 보시고 싶으시면 더보기 들어오세요.
이 버튼들의 단점이라면 - 광고 쪽의 시선을 분산시킨다는 점 ! ^ ^ 그리고 두번째는 버튼이 뜨는 것이 좀 무겁다는 점입니다. 로딩시간이 꽤 걸려요. 적지 않은 문제점이죠? 그래도 IT 쪽 인기 블로그들의 경우 이런 버튼들이 위에도 가득, 아래도 가득 있는데도 문제없는 걸 보면 이건 저 버튼들의 문제가 아닌 것 같기도 합니다.
페이스북을 안 쓰는 분은 모르시겠지만 제가 페이스북을 하기 시작하고 보니 다른 블로그의 좋은 글을 보면 저 공유버튼을 두리번거리며 찾게 됩니다. 일단 꽂아 두고 천천히 뒤에 읽으려고요. 버튼 설치해두신 블로그 보면 감사하죠.
그리고 예전 제가 여행 포스팅을 연재물로 썼을 때 프린트하게 해 달라고 여러 번 요청 메일을 받았습니다. 제가 오른쪽 클릭을 막아 놨었거든요. 여행가기 전에 가족들에게 프린트해서 보여주고 싶으시다고 하더군요. 컴퓨터에 익숙하지 않은 식구들에게는 프린트가 필요하다면서. 그리고 이동 중 비행기 안에서 읽으려고 해도 종이가 좋다고 하셨습니다.
필요로 하는 사람에게는 하나 하나가 소중할겁니다. 즐찾이건 프린트건 페이스북 스크랩이건.
유용하겠다 싶으신 분 한번 설치해 보세요.
다음 블로그의 경우에는 저 소스를 매번 글 쓸 때 HTML모드로 둔 후 붙여 넣기 하면 됩니다. 메모장등에 저장해 둔 뒤 매번 꺼내서 쓰면 되겠죠. 페이지마다 똑같으니 큰 어려움은 없을 것입니다. 예시 - 다음 블로그 게시물 링크
아래 +Share 버튼을 눌러서 나타나는 것 중 JoliPrint 의 파워풀한 기능에 관해서는 다음 포스팅에 있습니다.
2012/03/06 - [블로깅] - 깔끔하게 편집된 페이지를 프린트해서 읽는다 - JoliPrint(졸리프린트)
추가된 사항입니다. 애드 디스 버튼은 익스플로러 브라우저 버전 6 이하일 때는 보이지 않습니다. 윈도우 XP가 깔려져 있을 경우 익스플로러 8이 한계인데 그 때도 애드디스는 보이지 않습니다. 크롬, 파이어폭스등에서는 모두 다 보입니다. 비스타 운영체제이거나 윈도우 7이 깔려져 있을 경우 잘 보이지만 상단에 뷰 바나 믹시 바나 여타 바가 깔려 다른 곳을 통해 링크되어 페이지를 볼 경우에도 보이지 않습니다. 크롬, 파폭은 그 때도 여전히 상관없이 잘 보입니다. 애드디스 홈페이지에 구버전의 익스에는 적용되지 않는다고 적혀 있군요.
추가 태그 소스 둘
애드디스 버튼을 중앙이 아니라 왼쪽에서 일정폭만큼 띄우고 싶을 때는 (카테고리박스 위의 애드디스를 둘 때 이 소스를 떴습니다)
<div class="addthis_toolbox addthis_default_style" style="width:500px; margin-left:260px">
260 숫자가 커질수록 왼쪽 편에서 멀어집니다. width 500도 본문 폭에 맞춰서 조절하시구요.
중앙에 두고 싶으시면 (뷰추천박스와 믹시박스 사이에 둔다든지 해서 중앙에 두고 싶을 때가 있습니다.)
<div class="addthis_toolbox addthis_32x32_style addthis_default_style" style="width:200px; margin:0 auto">
끝부분을 저렇게 바꾸면 됩니다.
미투버튼과 애드디스 버튼을 나란히 두는 방법에 관한 포스팅은
다음 로그인 중이시라면 지금 구독 + 하시고 새 글이 올라 올 때 편하게 보실 수 있습니다.
'블로깅' 카테고리의 다른 글
| 티스토리 글설정- 엔터키 br 과 p 의 차이점 (15) | 2012.03.13 |
|---|---|
| 깔끔하게 편집된 페이지를 프린트해서 읽는다 - JoliPrint(졸리프린트) (14) | 2012.03.06 |
| 티스토리, 유입경로에 fb_xd_fragment 가 덧붙여져 있다면? (4) | 2012.02.27 |
| 포토스케이프로 사진에 서명넣기의 모든 것 (38) | 2011.05.12 |
| 메일로 구독하는 방법 설명해드립니다 & 구독해지 방법도 (0) | 2011.04.03 |
