ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 블로그 공유 버튼을 만들자 - Sharethis
    2011. 9. 1. comments


    블로그를 돌아다니다 보면, 발행된 글들에 공유 버튼들이 있는걸 볼 수 있다. 이러한 공유 버튼들과 RSS 등록 버튼들은 블로그의 글을 널리 알릴 수 있어 블로그를 유지하는데 중요한 포인트라고 할 수 있다. 약간의 디버깅(?)을 통하여 잘 꾸며져 있는 분들의 공유 버튼의 세부 구현 내용을 카피 하려고 했는데 잘 찾아보니 웹서비스로 제공되는 부분들이 있었다.




    sharethis(http://sharethis.com)에서 이러한 공유 버튼을 제공해주고 있다. Get The Button 부분을 클릭하면 세부 디자인을 설정할 수 있다.




    style을 선택하고 공유 가능한 서비스들을 골라서 제일 하단에 Get the button 을 누르면  그 디자인에 해당하는 HTML 코드와 javascript 코드를 결과로 보여준다.



    개인적으로 아이콘만 나오는걸 좋아하여전 첫번째 스타일로 선택하여 꾸며보았다.
    javascript는 <head> ~ </head> 사이에 넣어두면 되고, 실제 아이콘이 나타날 위치에 넣을 HTML 코드는 본문 시작 위치에 나오게 하기 위해서 



    블로그를 돌아다니다 보면, 발행된 글들에 공유 버튼들이 있는걸 볼 수 있다. 이러한 공유 버튼들과 RSS 등록 버튼들은 블로그의 글을 널리 알릴 수 있어 블로그를 유지하는데 중요한 포인트라고 할 수 있다. 약간의 디버깅(?)을 통하여 잘 꾸며져 있는 분들의 공유 버튼의 세부 구현 내용을 카피 하려고 했는데 잘 찾아보니 웹서비스로 제공되는 부분들이 있었다.




    sharethis(http://sharethis.com)에서 이러한 공유 버튼을 제공해주고 있다. Get The Button 부분을 클릭하면 세부 디자인을 설정할 수 있다.




    style을 선택하고 공유 가능한 서비스들을 골라서 제일 하단에 Get the button 을 누르면  그 디자인에 해당하는 HTML 코드와 javascript 코드를 결과로 보여준다.



    개인적으로 아이콘만 나오는걸 좋아하여전 첫번째 스타일로 선택하여 꾸며보았다.
    javascript는 <head> ~ </head> 사이에 넣어두면 되고, 실제 아이콘이 나타날 위치에 넣을 HTML 코드는 본문 시작 위치에 나오게 하기 위해서  바로 위에다 넣어 두었다.



    sharethis(http://sharethis.com)에서 제공해주는 아이콘들은 깔끔해서 보기 좋다. 3가지 스타일이 있으니 둘러 보시고 맘에 드시면 적용해보시길.


    반응형
    바로 위에다 넣어 두었다.



    sharethis(http://sharethis.com)에서 제공해주는 아이콘들은 깔끔해서 보기 좋다. 3가지 스타일이 있으니 둘러 보시고 맘에 드시면 적용해보시길.


    반응형

    댓글

Designed by Tistory.