고정 헤더 영역
상세 컨텐츠
본문
최근에 블로그에 어떻게 하면 SNS 공유 버튼을 효과적으로 달 수 있을까 고민하고 있다.
제일 편한 방법은 인터넷에서 제공되는 방법을 이용하는 거다. AddThis, Sharethis 같은 서비스를 이용하는 것이라고 할 수 있겠다. 그러나 이 방법의 문제점은 블로그 방문자 수가 일정량을 넘어가면 공유 버튼이 안 나오는 것이다. 실제로 이 블로그 같은 경우만 해도 옆에 AddThis 의 버튼 모음이 따라다니고 있지만 블로그 방문자 수가 일정수를 넘어가면 이 버튼 모음은 나오지 않는다. 버튼 모음 말고 다른 것도 마찬가지다. 블로그 방문자 수가 일정 수를 넘어가면 안 나온다.
그러나 구글 애널리틱스를 사용해서 가만 살펴보면, 정작 유입을 유발하는 SNS 는 많지 않다. AddThis 는 수많은 SNS 서비스의 버튼을 제공하지만, 우리나라에서는 거진 쓸모없다.ㅋㅋㅋ 영문 블로그를 운영하면 또 모를까. 그래서 고민해 보았다. 그냥 버튼 내가 만들어서 달면 안되나? 일단 내 나름대로 사람들이 많이 한다고 생각되는 페이스북, 트위터, 구글 플러스의 공유 버튼을 달기로 해 본다. 이 방법의 장단점은 아래와 같다.
1. 장점
1) 블로그 방문자 수에 관계 없이 버튼이 나온다.
2) 스킨에 넣을 수 있다.
3) 생긴걸 내 마음대로 조정할 수 있다(완전히 마음대로는 아니지만)
2. 단점
1) 페이지 로딩 속도가 느려진다(모바일에서 문제가 된다. 특히 글 상단에 달아놨을 때)
2) 글을 수정하면 클릭 수가 싹 다 없어진다. 구글플러스 버튼 같은 경우는 글 편집을 열었다가 닫기만 해도 클 릭수가 전부 사라진다.
목표는 이렇게 만드는 것이다(사진이다. 눌러도 작동 안함).
위쪽에 멘트는 알아서들 넣으시고. 그러면 이제 버튼별로 만드는 방법만 알아보도록 한다. 이 중 페이스북 버튼 만드는 방법이 가장 까다롭다.
1. 페이스북
2. 트위터
3. 구글플러스
1. 페이스북
자세한 사항은 페이스북 개발자 페이지(https://developers.facebook.com)에 가서 가입하고 사용하면 된다. 하지만 여기서는 그게 중요한게 아니므로 일단 코드만 붙여넣기 해서 쓰도록 한다. 페이스북 좋아요 버튼의 코드는 두 종류로 이루어져 있다.
1) SDK
2) 실제 버튼 코드
나는 깊은 지식은 없으므로 어떻게 작동하는지는 잘 모른다. 그러나 SDK 는 버튼이 나오게 하기 위해 페이지에 삽입되어야 하는 버튼이고 실제 버튼 코드는 버튼을 띄우고 싶은 위치에 넣는 코드이다.
1) SDK 부분
<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/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2) 실제 코드 부분
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
이거 말고도 다른 디자인도 있으니 궁금한 분들은 실제 페이지를 참고합시다. 여기까지 하고나서 문제가 하나 생긴다. 이 좋아요 버튼은 data-href="~~~" 의 따옴표 안에 있는 링크를 좋아요 하게 만든다. 물론 이렇게 해 줘도 상관 없기는 한데 이후에 문제가 크게 골치아프다. 글 하나하나 쓸 때마다 버튼을 따로 넣어줘야 하고 이렇게 되면 나중에 관리하기가 심히 힘이 든다. 방법은 data-href 에 현재 페이지의 url 을 넘겨주도록 하면 되는 것이다.
그 부분은 이렇게 처리하면 된다.
<script type="text/javascript">
var sUrl = window.location;
document.getElementById('fb').setAttribute('href', sUrl);
</script>
그러니까, 위에 있는 script 를 실제 버튼에 해당하는 코드가 나오기 전에 이 부분을 포함시켜 주면 된다.
2. 트위터
트위터 버튼은 상대적으로 쉽다. 아래 코드를 쓰면 된다. 이것도 트위터 버튼 페이지(https://about.twitter.com/ko/resources/buttons#tweet)에 가면 있다.
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</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>
페이지에 있는 코드하고는 약간 다르다. 이전에는 버튼이 눌러진 횟수를 보는 풍선이 달리는 뱡향을 조절할 수 있었는데 지금은 그 기능이 없어졌다. data-count="vertical" 부분이 그것이다. 이 부분이 없으면 숫자 세는 풍선이 오른쪽으로 나온다. 모양이 약간 이상해진다.
3. 구글플러스
이것도 어렵지 않다. 아래 코드를 쓰면 된다. 구글 개발자 페이지(https://developers.google.com /+/web/+1button/?hl=ko) 에 가면 찾을 수 있다. 이 코드는 페이스북처럼 SDK 와 실제 코드 부분으로 나누어져 있다.
1) SDK
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'ko'}
</script>
2) 실제 버튼 코드
<div class="g-plusone" data-size="tall"></div>
기타 옵션은 페이지를 참조하자. 다만 구글플러스는 SDK 코드를 </body> 의 바로 앞이나 <head> 의 안에 쓸 것을 권장하고 있다.
버튼을 달면 어떻게 되는지의 샘플은 이 글 하단부에 있으니 그를 참조하기 바란다.
추가
1) 버튼 작동 안 되면 내 페이지에 있는 버튼도 작동 안 된다는 뜻입니다. 알려주시면 고맙겠습니다. 다시 수정해야 해요ㅋㅋㅋ
2) 이 글 보고 들어왔으면 블로그 운영 중 or 운영 준비중 일 것 같은데.... 좋아요 버튼 한번 눌러 주고 갑시다ㅋㅋㅋ
'컴퓨터 관련 > 블로그 관리하기' 카테고리의 다른 글
| 포스타입 하세요, 롸잇나우 (0) | 2016.02.09 |
|---|---|
| 포스타입, 새로운 블로그 플랫폼!! (0) | 2016.01.31 |
| Daum adfit 새 광고 단위, 데스크탑 탑재 실험! (0) | 2015.05.09 |
| 다음 AdFit 점검용 포스팅 (0) | 2014.12.29 |
| 초대장 배포합니다 (5 장) (17) | 2014.11.19 |
댓글 영역