모바일 티스토리 블로그에 카톡 카카오톡 카카오스토리 라인 공유 버튼 적용하여 달기

오랜만에 기술적인 부분을 블로그에 남겨본다. 요즘 PC보다는 모바일이 대세이다. 블로그 유입도 모바일 검색을 통해 들어오는 것이 PC보다 많다.

그래서~ 티스토리 블로그에 카카오톡, 카카오스토리, 라인 공유 버튼을 적용하는 방법을 적어본다.

1. 카카오톡, 카카오스토리 공유 버튼 적용법 

카카오톡 버튼 이미지 다운로드, 카카오스토리 버튼 이미지 다운로드

* skin.html 영역에 넣고 싶은 위치에 소스 삽입
<span id="ktalk"><img src="./images/kakaotalk.png" width="30" onclick="executeURLLink()"></span>

<span id="kstory"><img src="./images/kakao_story.png" width="30" onclick="executeKakaoStoryLink()"></span>

 

kakao share.txt

*</body> 위에 아래 소스 삽입 (파란글씨만 수정)

<!-- 카카오 공유 -->

<script type="text/javascript" src="./images/kakao.link.js"></script>

<script>var curURL = location.href;

var curTitle = document.getElementsByTagName("TITLE")[0].text;

function executeURLLink() {

    kakao.link("talk").send({

        msg: $('.article p:first-child,.article p:nth-child(2),.article p:nth-child(3),.article p:nth-child(4)').text()+"\n...더보기",

        url: curURL,

        appid: "mintmeter.com",

        appver: "1.0",

        appname: curTitle,

        type: "link"

    })

}

function executeKakaoStoryLink() {

    kakao.link("story").send({

        post: curURL,

        appid: "mintmeter.com",

        appver: "1.0",

        appname: "mtmt"

    })

};

</script>

kakao_script.txt

 

 
2. 라인 공유 버튼 적용하기 (http://media.line.me/howto/en/)
위 링크에서 소스를 복사해서 사용하면 된다. "Select Button type"을 정하고, "Select text to be shared"에서는 "Select text to be shared"를 체크하면된다. 그러면 아래와 같은 소스가 생성되며 복사하여 버튼을 노출하려는 위치에 소스를 넣으면 끝이다.

<span>
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"en","type":"c"}); </script>
</span>