티스토리 카카오톡·트위터 버튼 수정

기존에 내장되어 있던 티스토리 포트폴리오 스킨의 공유 버튼은 주석 처리되어 비활성화되어있었다. 그래서 다시 활성화를 시켜서 본문에 바로 공유 버튼을 유도할 수 있도록 설정을 했으나 트위터의 경우에는 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> -->

사이에 삽입 -->

<!-- <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 폰트로 적용되었다.

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