다음뷰 추천과 트위터와 페이스북 공유하기 작은 버튼 사용 방법


요즘 블로그를 돌아 다니다 보면 트위터나 페이스북과 같은 소셜 네트워크 공유 버튼을 흔히 볼수 있습니다. 저 역시 본문 하단에 다음뷰 및 SNS 공유 버튼이 존재 합니다.

그런데 상단에도 이와 유사한 배치를 시키고 싶었는데 하단 부분에 있는 큼지막한 버튼은 왠지 인터페이스상 이쁘지 않을거 같아 작은 버튼으로 배치를 시켜 보았습니다.


일단 바로 코드 부터 보도록 하겠습니다.

HTML 코드
<div>
   <hr color="silver" style="height: 0px; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;  display: block; ">
</div> 

<table width="100%" height="31px" border="0" cellpadding="0" >
<tr>
<td align="center" valign="center" width="20%" height="31px">
<embed src="http://v.daum.net/static/recombox4.swf?nurl=http://블로그 주소[샵샵_article_rep_link_샵샵]" quality="high" bgcolor="#ffffff" width="82" height="21" type="application/x-shockwave-flash"></embed>
</td>

<td align="center" valign="center" width="20%" height="31px">
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">공유하기</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</td>

<td align="center" valign="bottom" width="20%" height="31px" >
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
</td>

<td align="center" valign="center" width="20%" height="31px">
<a class="addthis_button_tweet"></a>
</td>

<td align="center" valign="center" width="20%" height="31px">
<a class="addthis_counter addthis_pill_style"></a>
</td>
</tr>
</table>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=AddThis Code"></script>

<div style="margin-bottom: 3px;" >
   <hr color="silver" style="height: 0px; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;  display: block; ">
</div> 

위 소스에서 빨간 글씨로 되어 있는 부분만 수정을 해주시면 되는데 블로그 주소는 자신의 블로그 주소를 적으면 되고 샵샵은 ##으로 바꿔 주시면 됩니다. 

그리고 아래쪽 script 빨간 글씨는 이곳을 클릭하여 코드를 얻어야 합니다.


AddThis 메인 사이트에서 위 이미지와 같이 선택을 하신 다음 Get Your Button 을 클릭 하셔서 코드를 생성 하시기 바랍니다.


코드 부분에서 스크롤바를 제일 아래로 내리신 다음 마지막줄 바로 윗줄의 script 코드를 복사 하셔서 제가 소개한 코드 마지막 빨간 script 대신에 넣어주시면 됩니다. 

이렇게 하면 다음뷰와 SNS 공유버튼을 사용할 준비는 모두 끝이 납니다. 티스토리를 기준으로 본문 코드 중에 원하는 곳에 붙여 넣으시면 됩니다. 저 같은 경우 애드센스 아래에 넣었기 때문에 article_rep_desc 코드 바로 윗 부분에다 넣어서 사용하고 있습니다. 

위 코드를 사용하시면 거의 대부분의 브라우저에서도 정상적으로 보일 것입니다. 지랄 맞지만 아직까지는 절대 포기 할수 없는 IE6에서도 레이어 깨짐 없이 정상적으로 보일 것입니다. 언제나 느끼는 거지만 IE6까지 맞추기는 참 어렵네요. ㅜ.ㅜ 



신고
  1. 깔끔하네요.^^ 저도 적용해봐야겠습니다.~
    좋은 정보 고맙습니다. _(__)_
  2. 오늘도 깔금한 정보네요^^
  3. 와우! 감사합니다 ^^ 저도 적용했는데 넘 깔끔해져서 좋아요!!!
  4. 정말 잘사용하면 좋은정보일텐데 제가 너무 무식한가봐요 ㅠㅠ
    html만 나오면 눈앞이 캄캄해지기부터하니;;;
  5. 아...이것은 포스트 상단에 있는 그 아이콘을 만드는 방법이었던 것입니까?
    한번 해볼까요? 아..근데..블로그 스킨 변경한지 얼마 안되서 귀찮네요.. ㅋ
    저 옆에 떠 다니는 Follow Me 도 붙여야하는데 미적대고 있습니다.. ^_^
  6. 조그만한 다음뷰 추천수 가 보이지 않아요 ㅠㅠㅠ....
  7. 완전 깔끔하게 정리했어요 ^^
  8. 비밀댓글입니다
  9. 믹시업 버튼은 어떻게 추가 안될까요?
  10. 깔끔한 버튼을 찾고 있었는데, 이 글이 상당히 도움이 되었습니다. 이글을 베이스로 워드프레스에 적용하는 방법을 발행하였습니다. http://urang.in/archives/254 고맙습니다.
  11. 제 블로그 버튼 정렬이 보기 흉해서 한참 찾았는데..
    여기서 원하던 정보를 찾았네요.
    정말 감사해요~

    설명도 너무 쉽게 잘 하셔서, 금새 따라해서 성공했어요~ ^^;
  12. 좋은 정보 도움 받고 가요^^

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기