CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

홈페이지 제작팁

카카오스토리 스크립트

2014년 08월 03일

카카오링크 (카카오톡, 카카오스토리 공유) 스크립트 업데이트



이 포스트는 아래 두 글에서 이어집니다.


[iTIPs/Web] - 블로그에 카카오톡, 카카오스토리로 공유버튼 만들기


[iTIPs/Web] - AddThis share buttons 공유버튼 플러그인에 카카오 공유 추가하기



변경점

  • 카카오톡 공유에서 메시지에 본문 내용이 일부 포함되게 됩니다. (<p>태그 기준으로 4문장)
  • 카카오스토리 공유 스크립트가 간소화됐습니다. 그냥 카카오 스토리 자채 스크랩기능으로 공유됩니다.
  • 버튼 클릭 이벤트를 jQuery에서 img태그 자체에 onclick 이벤트로 변경했습니다.



스크립트

버튼부분
<div class="visible-xs" style="float:left">
  <span id="ktalk"><img src="./images/kakaotalk.png" width="32" onclick="executeURLLink()"></span>
  <span id="kstory"><img src="./images/kakaostory.png" width="32" onclick="executeKakaoStoryLink()"></span>
</div>

스크립트 부분

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

<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: "nubiz.tistory.com",

        appver: "1.0",

        appname: curTitle,

        type: "link"

    })

}


function executeKakaoStoryLink() {

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

        post: curURL,

        appid: "nubiz.tistory.com",

        appver: "1.0",

        appname: "nubiz.tistory.com"

    })

};

</script>

파란색으로 표시된 부분을 본인의 블로그에 맞게 수정하시면 됩니다.

(이전 포스트 참고)



.


카카오톡 링크 2.0 API 종료..

카카오톡 링크 2.0버전 API는 6월 30일부로 종료된다고 합니다.

기존에 설치된 플러그인도 작동을 하지 않는지는 모르겠습니다.

앞으로는 업그레이드된 형태의 API를 사용해야하는데.. 이것은 블로그에는 적합하지 않은것 같아 고민이네요.


출처 : http://nubiz.tistory.com/465