Addthis 의 즐겨찾기 버튼 블로그에 사용하기
- 블로그/블로그팁
- 2010. 6. 6. 06:00
북마크사이트는 잘 알려진곳이 마가린이나 딜리셔스등의 사이트가 있지요. 이런 사이트까지 포함하는 북마크 사이트가 바로 Addthis 입니다.
위의 코드중에서 2번줄의 img 와 3번줄의 javascript 를 활용해서 나만의 버튼을 만들어보는겁니다.
이런식으로 수정해서 사용하면 나만의 버튼으로 Addthis 의 기능을 이용할수 있습니다. 따로 추가적으로 즐겨찾기 버튼을 사용하지 않아도 되겠죠.
홈페이지 => http://www.addthis.com/
제 사이트에 달은것을 예제로 보여드립니다.
더보기를 클릭하는순간 더 많은 사이트가 보여집니다. 일단 유명한 사이트는 거의 다 있다고해도 됩니다.
많이 있다고해도 우리나라 사이트의 버튼이나 링크는 없지요^^
그럴때는 제가 만든 버튼을 이용하세요.은근 한번 홍보하고....
믹시 , 다음 추천버튼 1탄 => http://demun.tistory.com/1629
믹시 , 다음 추천버튼 2탄 => http://demun.tistory.com/1638
Addthis 에서는 자체 이미지버튼을 제공합니다.
1.2.3 순서대로 정하고 Get Your Button 을 클릭하면 코드가 나옵니다.
대략 아래와 같은 코드가 나옵니다.
!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&username=xa-4c0602cc778f5136"> <img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"> </a> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c0602cc778f5136"></script>
제가 이전에 배포한 추천버튼중에서 여기에 쓸려고 급작스럽게 하나더 추가해서 만들었습니다.
이미지 이름을 올린대로 사용한다고 가정합니다. 이미지명 : addthis.png
스킨편집에 파일업로드를 통해 업로드했다고 가정하고 아래의 코드로 수정해서 사용합니다.
저의경우 크기를 전부 60으로 수정해서 사용하니 참고하세요.
!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&username=xa-4c0602cc778f5136"> <img src="./images/addthis.png" width="60" height="60" alt="즐겨찾기추가" style="border:0"> </a> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c0602cc778f5136"></script>
또 이보다 더 좋은 버튼을 만들어서 사용해도 됩니다.
예제로 아래에 있는 Addthis 버튼에 마우스를 갖다대어 보세요. 어떤 기능인지?
Addthis 의 기능을 이용하여 즐겨찾기 버튼을 사용하는 방법이였습니다.