반응형

    이번에는 티스토리에 페이스북의 좋아요버튼, 구글 플러스의 +1버튼을 달아보겠습니다.


    티스토리에서 플러그인을 통해 기본으로 페이스북 좋아요 버튼을 제공하고 있지만, 구글 +1을 같이 배치하기는 어려움이 있었습니다.


    그래서 지금 보고계신 것 처럼 두 버튼을 나란히 놓기 위해 수동으로 추가하는 방법을 알아볼 것입니다.



    페이스북 좋아요버튼 코드 얻기

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

    으로 접속하셔서 로그인하면 간단히 코드를 생성할 수 있습니다.

    본인의 입맛에 맞게 옵션을 선택하시고, Get code를 눌러 코드를 생성합니다.(HTML5형식의 코드를 사용할 것 입니다.)


    생성된 코드는 2부분으로 나눠지는데, 그냥 두 코드를 다음처럼 순서대로 복사해옵시다.

    <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="[$$_article_rep_link_$$]" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>

    빨간색으로 표시된 부분을 필수적으로 수정해줍니다.(물론 코드 생성과정에서 입력해놓으시면 편합니다.)

    ($$는 ##으로 바꿔서 넣어주세요.)


    이제 구글 플러스 코드를 얻으러 갑시다.


    구글플러스 +1버튼 코드 얻기


    https://developers.google.com/+/web/+1button/

    으로 접속하여 역시 간단히 코드를 생성할 수 있습니다.

    구글플러스 플러그인은 페이스북보다 설정도 쉽고 수정할 것도 없습니다. 코드를 전부 복사합니다. (따로 생성이 귀찮으신 분들은 아래 코드를 그대로 쓰셔도 됩니다.


    <!-- +1 버튼을(를) 표시하고 싶은 위치에 이 태그를 배치하세요. -->

    <div class="g-plusone" data-size="medium"></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/platform.js';

        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

      })();

    </script>



    .


    스킨에 삽입하기

    티스토리 관리자에서 HTML수정메뉴로 들어가 skin.html을 수정합니다.

    본문이 들어가는 위치가 [$$_article_rep_desc_$$]($$는 ##으로 바꿔주세요)이므로 적절한 위치에 위에서 생성한 두 코드를 연속으로 삽입하면 됩니다.

    (예. 본문위에 삽입하려면 위에서 생성한 코드 두개를 [$$_article_rep_desc_$$]위쪽에 붙여넣기 하세요.


    그리고 삽입한 코드를 다음과 같이 div 태그로 묶습니다.

    <div id="likebox">

    삽입한 코드

    </div>



    CSS 수정하기

    페이스북 좋아요버튼이 최근에 버그가 있어서 다시 만든 것 같은데.. 저 코드를 그대로 넣으면

    이 그림처럼 좋아요 눌렀을 때 코멘트창이 잘리게됩니다.

    그래서 수동으로 

    skin.html 편집창 바로 아래 style.css를 수정해야합니다.

    style.css 제일 아래에 다음 줄을 추가해줍니다.

    #likeit > div.fb-like.fb_iframe_widget > span { width: 500px!important;overflow: visible;}




    이제 블로그에서 제대로 나오는지 확인만 해보시면 됩니다.


    반응형
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함