Look and Find what i've done.
Tistory Tip

티스토리 카카오톡/트위터 버튼 수정(undefined) [Onclick]

기존에 내장되어 있던 티스토리 포트폴리오 스킨의 공유버튼은 주석처리되어 비활성화 되어있었다. 그래서 다시 활성화를 시켜서 본문에 바로 공유버튼을 유도할 수 있도록 설정을 했으나 트위터의 경우에는 undefined가 되어 공유시에 글의 타이틀 데이터를 불러올 수가 없었다.


카카오톡 공유의 경우에도 마찬가지로 공유가 되지 않고 카카오 디벨로퍼스에서 자바스크립트 API를 통하여 앱을 만들어 값을 입력해주고 정상적으로 공유버튼이 실행되도록 수정하였다.


<li class="item_share"><a href="javascript:shareKatalk()" class="link_share link_kakao" data-service="kakaotalk"><span class="icon-Kakao"></span><span class="blind">카카오톡</span></a></li>

<!-- <head></head>사이에 삽입 -->


<script> Kakao.init('JavaScript 키'); function shareKatalk() { Kakao.Link.sendScrap({ requestUrl: location.href }); }; </script>



카카오톡의 경우에는 위와 같이 자바스크립트로 구현하였고, 자바스크립트 키를 입력하여 정상적으로 작동하는 것을 확인하였다

트위터의 경우에도 기존의 있었던 부분에 치환하여 적용하였다.

<a href="#" onclick="window.open('https://twitter.com/intent/tweet?text=

'+encodeURIComponent(document.title)+'%0d%0a'+encodeURIComponent(document.URL),

'twittersharedialog',

'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');

return false;" target="_blank" alt="Share on Twitter" class="link_share link_twitter">

<span class="icon-Twitter"></span><span class="blind">트위터</span></a>





카카오 디벨로퍼스


애플리케이션에서 개요 부분을 클릭하여 플랫폼 설정도 해주고 사용자관리를 통해서 활성화를 시켜준다. API를 통한 요청값 내용을 작성 하면 애플리케이션 설정은 끝이 난다.

카카오톡 트위터 공유버튼 소셜공유버튼

운영하고 있는 티스토리 블로그 중 네이버와 구글플러스를 추가한 공유버튼은 위와 같다.


페이스북 트위터 공유버튼


티스토리 내 포트폴리오 스킨에서 비활성화 되어 있었던 공유버튼은 위와 같다. 트위터의 경우에는 URL 인코딩된 텍스트로 데이터를 불러올 수 있으며, 카카오톡의 경우에는 자바스크립트 키를 발급받아 적용시켜주면 사용할 수 있다. 아이콘의 경우에는 ICOMOON 폰트로 적용되었다.


공유 할 때, 입력되는 내용을 추가하거나 변경은 문자열 변환 사이트에서 쉽게 입력하여 추가해줄 수 있다.


URL 인코딩