[티스토리 반응형 스킨 편집] 페이스북 좋아요 버튼, 구글+1버튼 넣기

* 한동안 글을 쓰지 않으면서 항상 생각해오던 것이, 기존의 블로그 디자인을 싹 바꾸고 싶다는 생각이었다. 색이 갈색 바탕이었던 것부터 해서 평범하지는 않았기 때문에 블로그만의 특징이 있기는 했지만, 사실 내가 좋아하는 것은 흰색/검은색 구성이라서 이에 맞게 수정을 하고 싶었다. 그래서 지금부터 간단하게 블로그의 스킨을 조금씩 수정하면서 그에 대한 내용을 정리해보려고 한다. 그 중에서 가장 먼저 페이스북과 구글+1 버튼을 넣는 것을 먼저 해결하려고 한다.

* 블로그 설정 화면

: 다른 블로그들에서는 "HTML/CSS 편집"이나 "파일 업로드" 등을 이용해서 사용하는 경우가 많은데 이러한거 다 필요없다. 물론 위젯이 들어가는 위치가 아닌 조금 다른 위치에 넣고자 한다면 "HTML/CSS 편집"이 필요하지만, 위젯(사이드바)가 들어가는 곳에 넣기 위해서는 이러한 거 다 필요없이 "꾸미기" > "사이드바" > "모듈보관함"에서 전부 처리할 수 있다. 아래가 적용한 모습의 예이다.

* 페이스북 좋아요 버튼

: 먼저 페이스북 좋아요 버튼은 최근에 SDK가 새로 업데이트 되면서 앱을 먼저 등록하도록 되어있다. 이렇게 앱을 등록하지 않고 직접 URL 등을 넣게 되는 경우에는 Deprecated 공지가 떴기 때문에 기존의 SDK 사용이 불가하거나 소스 자체에 문제가 발생할 수 있으므로 참고하자. 먼저 앱을 등록하려면 아래의 페이지에서 새 앱을 추가한 다음, 웹페이지 URL을 넣고 APP ID를 받으면 된다.

https://developers.facebook.com/apps/

: 위의 사이트에서 "+ 새 앱 추가" 버튼을 누른 다음, 블로그는 웹이므로 WWW를 선택하고 앱 이름을 입력하면 SDK를 사용할 수 있는 소스 코드가 나타난다. 이 소스코드는 바로 쓸 필요는 없으므로 무시해도 된다. 그 다음은 좋아요 버튼을 소개하는 부분의 소스를 확인하면 한꺼번에 소스를 확인할 수 있다.

https://developers.facebook.com/docs/plugins/like-button

: 위의 주소로 가서 "코드 받기" 버튼을 누르면, 상단에 앞서 등록했던 앱을 선택하고 Step2의 SDK 소스와 Step3의 소스를 하나로 합쳐서 복사해두거나 잠시 창을 열어두면 된다. Step2와 Step3의 소스가 아래와 같이 나타났다. (주의: 아래의 소스를 그대로 사용하면 안되고, App ID를 별도로 받아서 수정해야 한다.)

<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.6&appId=290914277765503";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

: 그리고 Step3는 아래와 같이 나왔다.

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>

: 위의 두 소스를 하나로 합쳐서 티스토리 사용자 모듈로 추가하면 페이스북 좋아요 버튼이 추가된다. 사용자 모듈로 추가하려면 티스토리 관리자 화면으로 가서 "HTML배너출력"의 "+" 버튼을 눌러서 사이드바에 임시 위젯을 하나 추가한다.

: 추가된 "HTML배터출력" 위젯의 "편집" 버튼을 누르면 HTML을 입력할 수 있게 팝업이 뜬다.

: 여기에 사용자 위젯으로 저장할 이름과 위의 HTML 소스 코드를 넣으면 된다. 예에서는 "페이스북 좋아"이라는 이름을 설정한 다음, 아래의 사용자 모듈에 저장 체크박스를 체크하여 재사용이 가능하도록 하였다. 

* 구글 +1 버튼 추가하기

: 먼저 구글+1 버튼은 아래의 사이트를 레퍼런스로 설정에 대한 변경이 하고 싶으면 참고하면 된다.

https://developers.google.com/+/web/+1button/?hl=ko

: 아래의 사진에 나와있는대로 소스 코드를 복사해두면 된다.

: 아래와 같은 소스가 나왔다.

<div class="g-plusone"></div>


<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/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

: 페이스북의 사용자 모듈을 추가해준 것과 동일하게 처리해주면 된다. 티스토리 관리자 화면으로 가서 "HTML배너출력"의 "+" 버튼을 눌러서 사이드바에 임시 위젯을 하나 추가한다.

: 사이드바에 추가된 위젯에 "편집" 버튼을 누르면 HTML을 입력할 수 있게 팝업이 뜬다.

: 여기에 사용자 위젯으로 저장할 이름과 위의 HTML 소스 코드를 넣으면 된다. 예에서는 "구글+1"이라는 이름을 설정한 다음, 아래의 사용자 모듈에 저장 체크박스를 체크하여 재사용이 가능하도록 하였다.

: 위와 같이 사용자 모듈을 만든 다음 원하는 위치의 사이드바에 넣고 저장을 하면 구글+1 버튼이 정상적으로 나오는 것을 확인할 수 있다.

* 적용 결과

: 아래와 같이 사이드바에 페이스북 좋아요 버튼과 구글+1 버튼이 함께 뜬 것을 확인할 수 있다. 이렇게 기존의 다른 블로그들에서 소개하는 것과 같이 HTML/CSS 편집을 번거롭게할 필요없이 아주 간단하게 추가가 가능하므로 참고하면 될 것이다. 물론 사이드바가 아닌 다른 특정한 위치에 넣고 싶으면 HTML/CSS 편집을 통해서 넣으면 된다.

: 지금 블로그를 반응형 스킨으로 바꾸고 나서 이것저것 많이 손보고 있는 중인데, 반응형으로 적용하고 싶은 부분들과 아닌 부분들이 있어서 반응형에 대해서 커스터마이징하는 부분에 대해서 조금씩 써보려고 한다. 지금도 이미 급하게 수정한 부분들이 있는데 그 부분들에 대한 수정을 정리하면서 블로그 스킨을 조금씩 개선 시켜나갈 예정이다.

* 진행 예정

2016/05/13 - [티스토리 반응형 스킨 편집] 반응형 커스터마이징(상단 메뉴, 크기 변경 수정)

2016/06/03 - [티스토리 스킨 편집] 사이드바 이미지 배너 넣기

- 테터데스크와 반응형 스킨 충돌 해결

- 사이드바, 하단바의 위젯 변경/수정

- 글 템플릿 수정(소셜 피드 플러그인)

- 성능 최적화

끝.