카카오톡 공유 버튼 만들기

카카오톡 공유 버튼 만들기

카카오톡으로 공유하기 버튼을 만들기 위해 구글링 하면서 티스토리에 적용하기 위한 방법을 찾았고 결국 이렇게 제목 하단에 공유링크를 완성할 수 있게 되어 기쁩니다.

카카오톡 공유를 하면 선택한 친구나 채팅방으로 메시지를 전송할 수 있습니다. 컴퓨터에서는 로그인 창이 뜨고 모바일 장치에서는 앱으로 연결됩니다.

Kakaotalk

구현 방법

1. 원하는 위치에 다음 코드를 붙여 넣기만 하면 됩니다.

   <a href="javascript:shareLink()">
     <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style="display:inline-block;width:20px;height:20px;"><path d='m12 0c-6.667 0-10.686 4.11-11.709 8.183-1.062 4.224.793 8.271 4.855 10.689-.903 3.276-1.45 4.376-.587 4.965.968.662 2.362-.707 4.691-2.494l.957-.733c3.749.486 7.568-.593 10.272-2.913 2.27-1.948 3.52-4.553 3.52-7.334.001-5.715-5.382-10.363-11.999-10.363zm7.504 16.558c-2.454 2.106-5.965 3.049-9.388 2.524-.479-.077-2.592 1.773-4.312 2.971.194-.735.574-1.972.943-3.353.09-.336-.063-.69-.37-.854-4.527-2.431-5.362-6.396-4.633-9.297.884-3.508 4.397-7.049 10.256-7.049 5.79 0 10.5 3.976 10.5 8.862 0 2.338-1.064 4.538-2.996 6.196z'/><path d='m6.5 7.75h-3c-.992 0-.993 1.5 0 1.5h.75v4.25c0 .992 1.5.993 1.5 0v-4.25h.75c.992 0 .993-1.5 0-1.5z'/><path d='m10.196 8.222c-.001-.003-.004-.004-.005-.007-.246-.595-1.126-.623-1.383 0-.001.002-.003.004-.004.007l-2 5c-.154.384.033.821.418.975.958.386 1.129-.971 1.386-1.446h1.785l.411 1.028c.367.92 1.764.367 1.393-.557zm-.988 3.028.292-.731.292.731z'/><path d='m15.5 12.75h-1.25v-4.25c0-.992-1.5-.993-1.5 0v5c0 .414.336.75.75.75h2c.992 0 .993-1.5 0-1.5z'/><path d='m18.25 9.689v-1.189c0-.992-1.5-.993-1.5 0v5c0 .992 1.5.993 1.5 0v-1.469c1.605 1.746 1.657 2.219 2.25 2.219.63 0 .991-.747.569-1.239l-1.857-2.163 1.823-1.823c.002-.003.005-.005.007-.008.001-.001.002-.002.003-.003.681-.706-.373-1.747-1.07-1.05z'/></svg>
   </a>
   <script>
     function shareLink() {
       Kakao.Link.sendScrap( {
         requestUrl: location.href
       } );
     };
   </script>

2. 적용하면 버튼이 생기고 클릭하면 카카오톡 공유를 위한 창이 뜹니다.
3. 선택한 친구나 채팅방으로 링크를 보낼 수 있습니다.

※ 텍스트든 아이콘 형태이든 a 요소 안의 내용만 수정해서 사용하시면 됩니다.

즐거운 하루 보내세요. 감사합니다.