지금 이 본문이 시작되는 바로 위를 보시면 자잘한 버튼들이 주르륵 있는 것이 보일 겁니다.
SNS 공유 버튼들이죠. 이거 다 한번에 셋팅된 걸로 달았습니다.


현재 수정되었습니다. 위의 설명이 있던 때의 배치는 아래입니다. 상단 큰 광고 아래, 뷰애드 왼쪽입니다.    다시 정정 -> 계속 위치가 바뀌거나 삭제되거나 변경되고 있습니다. 몇 군데  배치 가능한 방법에 대해 태그 정보를 포스팅 하단에 모두 드리겠습니다.




# 따로 달 때 겪을 수 있는 어려움들

이것을 달기 전에 저는 facebook 보내기(SEND)가 달린 버튼과 트윗 버튼을 각각 따로 소스를 구해 달았습니다.

facebook 보내기(send) 기능이 달린 버튼을 달았다가 얼마전 포스팅했던 유입 경로가 나뉘는 일을 겪고(!) ( 티스토리, 유입경로에 fb_xd_fragment 가 덧붙여져 있다면? )다시 떼어내야만 했습니다. 페이스북 버튼을 달 때는 각 페이지에 따로 적용되는 소스를 덧붙여 줘야 합니다. 여러 번 타자를 치다 보니 익숙해졌지만 처음엔 그것도 쉬운 일이 아니었습니다. 주소 뒤에 슬래쉬 /를 달아야 되나 마나, &는 놔둬야 되나 마나 눈알이 빠지도록 열심히 쳐다보며 소스를 수정했지요. 한 글자만 틀려도 에러가 나니까요.

겨우 달았는데 페이스북 버튼과 트윗버튼의 높이가 달라서 나란히 놓고 보니 뭔가 모양이 마음에 들지가 않습니다. 페이스북 버튼의 아래쪽이 살짝 잘리도록 높이 조절을 해 줘야 되고 가로 폭도 450 씩이나 놔 두면 중앙쪽으로 이동시킬 수가 없습니다. 결국 가로 세로 모두 다 일일이 조금씩 봐가며 수정을 해 줘야 하죠.

해 놓고 돌아다니다 보니 구글 플러스 버튼을 단 데가 또 보입니다. 뭔진 몰라도 이왕 다는 것 저것도 같이 달아 볼까나? 소스를 찾아 다녀보았습니다. 그러다가 발견한 것이 바로 이 통합버튼 AddThis 입니다.

각 페이지 따로 적용되는 소스를 쓸 필요가 없습니다. 높이가 달라서 예쁘게 맞추느라 div 니 table 짜는 방법들을 찾아 헤매지 않아도 됩니다. 한번에 다 되니까요. 긁어서 복사한 뒤 붙여 넣으면 됩니다. 그리고 가입만 하면 자신의 사이트에서 페이스북전송은 몇 번이 되었는지 트윗은 전체 몇 번인지 분석도 무료로 해 줍니다.

좋은 것 같긴 한데 정확히 어떤 쓸모가 있는지 모르겠다구요?





# SNS 버튼은 어떤 식으로 쓸 수 있나?

주황색 +Share 버튼에 마우스를 살짝 갖다 대면 이런 팜업이 뜹니다.

페이스북 공유하기

 

티스토리 같은 경우엔 스크랩이 안 됩니다. 이 SNS 버튼들은 사용자로서는 스크랩의 의미를 가지게 됩니다. 블로거들로서는 많은 곳에 자신의 글이 전파될 수 있는 이점이 있습니다.

저 팜업창의 인쇄를 클릭하면 페이지가 인쇄가 됩니다. 즐겨찾기를 클릭하면 사용하는 브라우저에 즐겨찾기로 그 페이지가 등록됩니다. 저 중에서 Facebook을 한번 클릭해 볼까요? 아래같은 팜업창이 하나 뜹니다.


페이스북 공유하기

 

자신의 페이스북에 저렇게 꽂을 수 있습니다. 위에 메모 적을 수 있구요, 올려진 사진들 중 마음에 드는 걸로 고를 수도 있습니다. 자신만 볼 지 같이 볼 지도 결정하고 링크 공유 클릭하면 페이스북에 가서 스크랩이 되는 거죠. 글 제목과 아래 요약문은 원래의 것과 다르게 수정도 가능합니다. (위에서 쉐어팜업의 페이스북을 클릭해서 시험해 보세요)

마음에 드는 글을 발견하면 꽂아 두고 친한 친구들과 같이 나눌 수 있습니다. 전체 글 다 퍼가면 한 두 개도 아니고 무겁잖아요. 저렇게 예쁘게 가져간 뒤에 클릭하면  본문이 뜨니까 좋죠. 

이번엔 Tweet 버튼 옆의 숫자를 클릭해 볼까요?


트윗 공유

트윗 공유

 

숫자에 마우스를 대니까 '이 페이지가 10번 퍼뜨려졌다. 이 트윗들을 봐보시라' 라는 메세지가 팜업뜨죠. 눌러 볼께요.


트윗 공유

트윗 공유


 
다 뜨지는 않고 일부가 떴네요.  이거랑 뷰 박스 안의 메세지 숫자랑 다르더군요. 어떨 땐 뷰박스가 많고 어떨 땐 이 버튼이 더 많아요.


뷰 메세지

뷰 메세지

 

저기는 메세지가 8인데 위의 트윗 버튼은 10 개예요. 이 트윗 버튼이 유용할 때는 뷰에 송고하지 않을 때죠. - 예전 여성 생활 정보 하나를 뷰에 송고하지 않고 포스팅했는데 그걸 옥주현양이 리트윗을 한 적이 있었습니다. 다음 날 저 트윗 박스에 숫자가 129라서 놀라 저 버튼으로 따라가 보고는 옥주현양이 리트윗했다는 것을 알았습니다. -  

트윗버튼을 눌러 봅니다.


트윗 공유

트윗 공유

 

 글 주소 뒤에 꼬랑지가 붙어 있습니다. 나중에 애드디스에서 분석할 때 쓰려고 추적소스로 넣어 놓은 것입니다. 나중에 트윗된 페이지로 가서 저걸 클릭해보면 제대로 그 포스팅을 잘 찾아 옵니다. 링크 기능은 문제가 없다는 것이죠. 만약 이게 싫은 분은 하단의 공유 버튼을 쓰셔도 됩니다.

SNS 버튼

<- 여기 있는 이 SNS 버튼도 비슷한 기능입니다. 여기서 트윗하거나 페이스북 보내기를 하거나 할 경우에 위의 버튼에도 똑같이 합산되어 표시됩니다.

저 버튼은 어제 설치한 것인데 예전에 제가 직접 따로 설치했던 버튼으로 공유되었던 것들도 문제없이 표시되어져 있었습니다.

버튼을 따로 설치하는 이유는 몇 번이나 공유되어 갔는가 숫자로 표시된다는 것 때문에 더 선호되어 집니다.  








# AddThis 닷컴으로 갑니다

 
공유버튼을 나눠 주는 데는 여기 말고도 Sharethis 버튼도 있고 몇 군데가 더 있긴 한데 이 애드디스가 세계적으로 가장 많이 보급되어져 있다고 합니다.

페이지 들어가서 상단의 Get AddThis 를 클릭

 

애드디스,AddThis

애드디스,AddThis



Website 선택 - 3 가지 중에 마음에 드는 스타일 선택 - 오른쪽의 소스를 긁어서 - 원하는 곳에 붙여 넣으면 - 끝
입니다.



# 몇 가지 설정

 주황색 +Share 옆에 숫자가 생겨날 것입니다. 그것은 프린트나 갖가지 공유 방법을 통합해서 몇 번 공유되었는가  통합 표시입니다.

그 팜업 창 아래 보면 '설정' 이라는 것이 보입니다. - 한국 사용자에게는 언어 설정하지 않았는데도 자동 한글이 나옵니다. ^ ^ -

 
공유 방법 더보기를 보면 316개의 방법이 더 있다고 나옵니다. 자주 쓰는 것으로 이 팜업창에 먼저 나오도록 한다면 편리하겠죠? 어느 것을 사람들이 더 선호하는가 고민할까 했는데 이것도 애드디스 홈페이지에 나오는군요.


SNS 사용 순위

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로 수정하시면 졸리프린트가 구현됩니다 )



제 소스 캡쳐로 자세히 보시고 싶으시면 더보기 들어오세요.



 이 버튼들의 단점이라면 - 광고 쪽의 시선을 분산시킨다는 점 ! ^ ^ 그리고 두번째는 버튼이 뜨는 것이 좀 무겁다는 점입니다. 로딩시간이 꽤 걸려요. 적지 않은 문제점이죠?  그래도 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">

끝부분을 저렇게 바꾸면 됩니다.

미투버튼과 애드디스 버튼을 나란히 두는 방법에 관한 포스팅은  

2012/03/14 - [블로깅] - 미투 버튼과 애드디스 버튼을 나란히 정렬하기


읽어 주셔서 고맙습니다. 아래의 손가락 모양 추천 버튼은 로그인하지 않아도 클릭 가능합니다.
다음 로그인 중이시라면 지금  구독 +  하시고 새 글이 올라 올 때 편하게 보실 수 있습니다.

   
포스팅에 호감이 가신다면 구독하실 수도 있습니다!
        메일로 구독하기 메일구독방법안내 한RSS로 구독하기 피드버너로 구독하기 iGoogle or 구글리더로 구독하기 myYahoo에 추가하기 트위터 네이버 이웃추가
Posted by 아딸라

댓글을 달아 주세요

  1. Shain 2012.03.03 10:38 신고  댓글주소  수정/삭제  댓글쓰기

    으헝헝.. 이번에 스킨 바꿀 때 이것도 한번 고려해봐야겠네요
    디자인은 귀찮고 첨가할 소스는 점점 늘어나고 ^^;;;
    은근히 골치가 아파져요...
    이번엔 좀 넉넉한 디자인으로 해봐야겠어요

    • 아딸라 2012.03.03 11:06 신고  댓글주소  수정/삭제

      꾸미기에 너무 신경을 쓰니까 수명이 줄어드는 것 같아요 ; ㅎㅎㅎ 적당히 해야 될 듯 -
      일단 저 버튼을 끝으로 잠시 꾸미는 건 내려 놓으려구요 -
      (이러면서 내일 아침 되면 저 버튼이 아래로 내려가 있을 수도 있어요.>.< ㅋ)

      쉐인님 블로그는 상단에 광고가 없고 오른쪽에 넣어 놓으니 깔끔해 보이더군요.

  2. 쿤다다다 2012.03.03 20:15 신고  댓글주소  수정/삭제  댓글쓰기

    어허~~~통합버튼이 있다는 것을 처음 알았네요...
    그리고 중간에 글을 읽으면서 내려오다가 270의 해품달의 추천버튼을 눌렀는데,,,,그게 추천버튼이 아니네요...^^

  3. CANTATA 2012.03.03 20:56 신고  댓글주소  수정/삭제  댓글쓰기

    저도 반영해보겠습니다.
    지금당장해보려합니다...ㅎㅎ 좋은 버튼이네요 !^^
    한곳에 모여있는

  4. 익명 2012.03.03 20:57  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 아딸라 2012.03.03 21:47 신고  댓글주소  수정/삭제

      아항~ 그렇군요 ^ ^
      제 개인적 친분이 있는 분들은 블로그를 몰라요 -ㅎ
      그리고 트윗도 잘 안하시고요 -
      블로그와 트윗과 저 개인과 3개가 연결이 안되는 거죠.
      저는 페이스북이 좀 개인적이라서 페이지를 따로 만들었는데
      현재 제 개인프로필로 연결이 되어 있어서 그걸 바꿀까 싶기도 하구요 - ㅎ

  5. 미니~ 2012.03.19 21:53 신고  댓글주소  수정/삭제  댓글쓰기

    잘 정리해 주셨네요..
    SNS 연동이 대세이기는 한 것 같습니다.
    감사합니다.

  6. L'artiste curieuse 2013.02.25 18:13 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니당. 가운데 정렬을 하고 싶었는데 덕분에 잘 설정하게 되었어요! :)