SNS 공유버튼 추가하기

2013-10-06 by 편리

운영 중인 워드프레스 블로그에 SNS 공유 버튼을 추가하기로 했다. JetPack 플러그인을 이용해서 공유 버튼을 추가할 수도 있는데 각 SNS 서비스에서 제공하는 버튼을 블로그 포스트 하단에 추가하기로 했다. 이 삽질을 시작한 것은 애드센스 스코어카드에 +1 버튼을 추가하라고 해서 일단 시작을 한 것이다. 코드는 SNS 서비스에서 제공을 해주기 때문에 어려운 것은 없는데 css 속성을 구성하는 것이었다. 간만에 css 사용하려니 여간 어려운 것이 아니었다. 그래도 비교적 쉽게 적용이 돼서 다행이라 생각하고 있다.

우선 Facebook, Twitter, GooglePlus 버튼을 워드프레스 테마의 single.php 파일의 적당한 위치에 아래와 같은 버튼 코드를 추가한다.

<div id="sns-button" class="clearfix">
    <div id="facebooklike" class="sns-button">
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button_count" data-show-faces="true" data-send="true"></div>
    </div>
    <div id="tweetbutton" class="sns-button">
        <a href="<?php the_permalink(); ?>" class="twitter-share-button" data-lang="ko" data-count="none">트윗하기</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </div>
    <div id="googleplus" class="sns-button">
        <!-- +1 버튼을(를) 표시하고 싶은 위치에 이 태그를 배치하세요. -->
        <div class="g-plusone" data-size="medium" data-annotation="none"></div>

        <!-- 마지막 +1 버튼 태그의 뒤에 이 태그를 배치하세요. -->
        <script type="text/javascript">
          window.___gcfg = {lang: 'ko'};

          (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
          })();
        </script>
    </div>
</div>

그리고 버튼 출력을 위한 css 코드를 테마의 style.css 파일에 추가한다.

/* SNS Button */
#sns-button {
    margin-bottom: 20px;
    text-align: center;
}

#sns-button .sns-button {
    display: inline-block;
    margin-right: 10px;
}

#sns-button #googleplus {
    margin-right: 0;
}

이렇게 버튼을 추가해뒀으니 애드센스 스코어카드에 어떤 변화가 생기는지 살펴봐야겠다.

SNS 서비스 버튼 자료
https://developers.facebook.com/docs/reference/plugins/like/
https://twitter.com/about/resources/buttons#tweet
https://developers.google.com/+/web/+1button/?hl=ko

Leave a Reply Cancel reply