워드프레스에서 소셜 서비스로 공유버튼을 넣을때 대부분 플러그인을 사용합니다. 트위터,페이스북,구글플러스 정도를 한국에서는 많이 사용하고 있습니다.

워드프레스 플러그인으로  소셜 공유버튼을 넣는 것은 (1)설치가 쉽습니다. (2)설정이 쉽습니다. 클릭 몇번이면 끝이니까요.

하지만, 여러 종류의 플러그인을 사용하면 소스가 중복되거나 불필요한 자원을 로딩하게 되므로 (1)페이지 로딩이 느려집니다. (2)플러그인끼리 충돌이 나기도 합니다. 대부분 플러그인은 그 내부에서 js 파일을 1~2개 이상 로딩시킵니다. 특히 기능이 다양할 수록 더 그렇죠.

간단 소스를 공유합니다. theme 소스를 직접 수정하여야 합니다.

 

header.php파일에…

<!-- 소셜공유 스크립 시작 -->
<div id="fb-root"></div>
<script>
(function(w, d, s) {
function go(){
var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.src = url; js.id = id;
fjs.parentNode.insertBefore(js, fjs);
};
load('//connect.facebook.net/ko_KR/all.js#xfbml=1&appId=페이스북_app_ID', 'fbjssdk'); //페이스북
load('//apis.google.com/js/plusone.js', 'gplus1js'); //구글플러스
load('//platform.twitter.com/widgets.js', 'tweetjs'); //트위터
}
if (w.addEventListener) { w.addEventListener("load", go, false); }
else if (w.attachEvent) { w.attachEvent("onload",go); }
}(window, document, 'script'));
</script>
<!-- 소셜공유 스크립 끝 -->

 

single.php 파일에…(필요시 page.php에도)

<!--공유버튼 -->
<div>
<!-- 트위터 -->
<a class="twitter-share-button" data-via="eastsocial" data-url="<?php the_permalink() ?>"></a>
<!-- 구글플러스 -->
<g:plusone data-href="<?php the_permalink() ?>"></g:plusone>
<!-- 페이스북 좋아요 -->
<div class="fb-like" data-send="false" data-layout="standard" data-width="350" data-show-faces="false" data-href="<?php the_permalink() ?>"></div>
</div>
<!--공유버튼-->

 

위의 소스는 실제로 이 사이트에서 사용 중입니다.(본문 아래쪽) appId=페이스북_app_IDdata-via=”eastsocial” 는 자기 것으로 수정하세요.

위치는 style.css 를 수정하여야 겠죠? 저는 설정없이 그냥 사용합니다.

버튼 모양과 관련된 자주 사용하는 옵션 몇가지 살펴보면….

 

(1) facebook : https://developers.facebook.com/docs/reference/plugins/like/

data-send=”true” (send 버튼도 보여줄래? 싫으면 “false”)

data-layout=”button_count” (standard, box_count,button_count 3가지)

data-show-faces=”true”(얼굴사진 보여줄래? 싫으면 “false”)

 

(2)twitter : https://dev.twitter.com/docs/tweet-button

data-via=”eastsocial” (공유할때 @eastsocial 에게도 트윗이 갑니다. 자기 id 넣으세요)

data-size=”large” (좀 더 큰 트윗 버튼)

data-count=”vertical” (카운터 위쪽에)

 

(3) google + : https://developers.google.com/+/plugins/+1button/?hl=ko

data-annotation=”inline” (얼굴사진 나오게)

 

보다 자세한 버튼의 옵션값은 해당 링크를 참고하세요.

 

(추가) 핀터레스트와 링크드인을 추가합니다.

 

header.php 파일에… 아래 소스만 추가

load('//assets.pinterest.com/js/pinit.js', 'pinitjs');
load('//platform.linkedin.com/in.js', 'lnkdjs');

 

single.php 파일에도…

<!-- 핀터레스트 -->
<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink() ?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&description=<?php echo urlencode(get_the_title()); ?>" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://pinterest.com']);" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
<!-- 링크드인 -->
<script type="IN/Share" data-counter="top" data-url="<?php the_permalink() ?>"></script>

 

(4) pinterest : http://pinterest.com/about/goodies/

count-layout=”horizontal” (horizontal, vertical, none 중 선택)

 

(5) linkedin : https://developer.linkedin.com/plugins/share-plugin-generator

data-counter=”right”(right, top 노카운트는 입력안함)