본문 바로가기

블로그 관련 정보/블로그 꾸미기

블로그에 SNS 공유버튼 달기 - Shareaholic

블로그에 SNS 공유버튼 달기 - Shareaholic
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^
새로운 소스로 변경되 새로운 글 작성을 했습니다.

http://anikorea.tistory.com/310 이 글을 참고 하세요.

 

하루차이로 SNS 공유버튼 글을 두개나 작성하네요. 처음작성했던 "Share This"공유버튼도 다양한 레이아웃에 좋긴한데 뭔가 제 블로그와는 어긋나는거 같아 다른 공유버튼을 달아볼까 합니다.

 

 

이 글에서 소개하는 SNS 공유버튼은 마우스를 올리면 아이콘이 위로 올라오는 방식입니다. 그리고 가운데 정렬을 지원해서 좀더 깔끔하게 보여줄수 있습니다.

 

http://adf.ly/CVycF  <- 링크를 눌러 이동해 주세요.

 

링크 주소를 눌러 접속하면 위 화면이 나옵니다. 하단 "Next"를 눌러주세요.

 

위 화면이 나오면 1번 "Wedsite"를 눌러주세요. 1번을 누르기전까진 2,3,4번 화면이 보이지 않습니다.

 

2번은 사용가능한 SNS버튼입니다. 사용하고자 하는 SNS버튼이 있다면 마우스로 끌어서 3번에 두시면 됩니다.

 

3번은 블로그에 보여지는 SNS버튼입니다. 3번에 원하지않는 SNS버튼이 있다면 마우스로 끌어서 2번에 두시면 됩니다.

 

4번은 블로그에 실제로 보여주는 미리보기 입니다. 원하시는 항목들을 선택하셨다면 4번 "Get Buttons"을 클릭하세요.

 

위 화면이 나오면 1번 "Get Media Rwsources"를 클릭하시면 "shareaholic_sexybookmarks.zip"파일을 다운합니다. 다운한 파일을 압축을 풀면 "sprite.css,sprite.png"파일이 있습니다.

 

"sprite.css,sprite.png"파일을 블로그 관리 -> 꾸미기 -> HTML/CSS 편집 -> 파일 업로드에 올려주세요. 2번은 약간의 소스 수정을 해야하니 일단 파일 업로드부터 합니다.

 

파일 업로드가 끝나면 2번 소스를 약간 수정해야 합니다.

 

 <!-- Start Shareaholic Sexy Bookmark HTML-->
<div class="shr_class shareaholic-show-on-load">

</div>
<!-- End Shareaholic Sexy Bookmark HTML -->
<!-- Start Shareaholic Sexy Bookmark settings -->
<script type="text/javascript">
  var SHRSB_Settings = {"shr_class":{"src":"{Place_Path_Here}","link":"","service":"5,7,313,88","apikey":"0747414f47c2b684cf5480c36b

2478689","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color

":"black","tip_text_color":"white","twitter_template":"${title} - ${short_link} via @Shareaholic"}};
  var SHRSB_Globals = {"perfoption":"1"};
  </script>
 <!-- End Shareaholic Sexy Bookmark settings -->
<!-- Start Shareaholic Sexy Bookmark script -->
<script type="text/javascript">
       (function() {
            var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
            sb.src = ("https:" == document.location.protocol ? "
https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-sb.min.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
        })();
        </script>

<!-- End Shareaholic Sexy Bookmark script -->

 

위 소스를 블로그에 보여줄 부분에 넣어주시면되는데 약간의 수정이 필요합니다. 위에서 "sprite.css,sprite.png"파일을 올렸죠. 그 경로를 지정해 주시면됩니다.  {Place_Path_Here} 부분을 ./images로 변경하시면 됩니다.

 

그리고 SNS공유버튼을 보여줄 부분 (본문 글 하단에 보여주실려면 관리 -> 꾸미기 -> HTML/CSS 편집 -> skin.html 에서 "Ctrl + F"를 눌러 "article_rep_desc"을 검색합니다. "article_rep_desc"아래에 소스를 넣어주시면 본문 글 하단에 가운데 정렬로 보여줍니다.

 

만약 SNS 공유버튼 자체 상,하,좌,우 조절을 원하시면 아래를 참조 하세요.

 

소스 맨 윗 줄에 <div class="shr_class shareaholic-show-on-load">테그가 있습니다. style="margin: 0px 0px 20px 100px;"를 추가해서 상,하,좌,우 조절을 할수 있습니다.


<div class="shr_class shareaholic-show-on-load" style="margin: 10px 10px 20px 10px;"> 이렇게 추가해 주시면 됩니다.  ( margin:상 우 하 좌 입니다. )

  • 이야!!

    이건 설명이 제대로 이해가 가네요 ♡ ㅎㅎ

    감사합니당