공유버튼(페이스북,트위터,구글플러스)간단 소스

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

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

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

 

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

[notification_info]

header.php파일에…

[/notification_info]

<!-- 소셜공유 스크립 시작 -->
<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>
<!-- 소셜공유 스크립 끝 -->

 

[notification_info]

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

[/notification_info]

<!--공유버튼 -->
<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 노카운트는 입력안함)

 

 

 

3 Comments

  1. 페이스북에서 우연히 글을 봤는데(sharing, publicize관련)…. 해결이 될지는 미지수 입니다.

    저는 얼마전에 테스트 했을 때 아무 문제가 없었습니다.

    영문버젼 쓰시는 것 같은데, config 수정 없이 설치하셨다면 define(‘WPLANG’, ”);처럼 비어 있을 것 입니다. define(‘WPLANG’, ‘ko_KR’); 로 한 번 해본 후 테스트.

    (영문버젼이라도 ko_KR 해도 상관 없으며, 한글 언어파일이 들어 있는 플러그인만 한글로 나오므로 문제는 없을 것 입니다.)

    ——————————

    안되면 Open Graph 한 번 적용해 보세요.

    jetpack 에서 sharing 활성화 하면 OG 태그가 생성 되는데, 사이트를 보니 소스로 소셜아이콘을 삽입한 것으로 생각됩니다.

    Reply
    • jetpack 오류에 대한 조언인데, 이쪽에 남겨주셨네요. 좋은 정보 감사합니다. 시도해 보겠습니다.

      Reply
  2. 그렇다면 페이스북 플러그인 simple facebook connect 한 번 검토해 보면 좋을 것 같습니다. 플러그인 사용은 보시면 충분히 이해 하실 것 입니다.

    페이스북 공식플러그인이라는 Facebook 플러그인은 테마나 설치 된 플러그인에 따라 노출이 안되는 부분이 있는 것으로 보여서 개인적으로는 바로 위의 플러그인을 사용합니다.

    photon 은 cdn 관련인데, 캐시된 이미지가 질저하 없이 잘 나오는지요?

    # 페이스북 좋아요, 댓글, 신청 등등 모든 기능이 안되는 관계로 여기에 한 번 남겨 봅니다. 포스트 내용과 맞지 않으면 보시고 지우셔도 전혀 상관 없습니다.

    # 글 수 제한이 있군요. 나눠서 올려 봅니다. pending으로 해놓으셔니 보시고 지우시면 될 듯 합니다.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" extra="">

Share This