본문 바로가기
카테고리 없음

블로그스팟(Blogger)에 카카오톡 공유하기 버튼 추가하는 방법

by 라미너스머니 2024. 8. 30.
728x90
반응형

안녕하세요, 블로거 여러분! 오늘은 블로그스팟(Blogger) 블로그에 카카오톡 공유하기 버튼을 추가하는 방법을 소개해드리려고 합니다. 카카오톡은 한국에서 가장 많이 사용되는 메신저 앱 중 하나로, 블로그 글을 카카오톡으로 쉽게 공유할 수 있게 되면 방문자와의 소통이 더욱 원활해질 수 있습니다. 그럼, 바로 시작해볼까요?

1. HTML/Javascript 위젯 추가하기

  1. 블로그스팟 관리 페이지로 이동합니다.
  2. 사이드바의 레이아웃 메뉴를 클릭합니다.
  3. 원하는 위치(예: 포스트 하단 또는 사이드바)에 가젯 추가 버튼을 클릭합니다.
  4. HTML/JavaScript 가젯을 선택합니다.

2. 카카오톡 공유 버튼 코드 삽입하기

이제 HTML/JavaScript 가젯에 카카오톡 공유 버튼을 삽입해보겠습니다.

  1. 제목은 원하시는 대로 입력하세요 (예: "카카오톡 공유하기").
  2. 내용에는 아래의 코드를 그대로 복사하여 붙여넣습니다.

<!-- 카카오톡 공유하기 버튼 -->
<a href="javascript:;" id="kakao-link-btn">
  <img src="https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_small.png" />
</a>

<!-- 카카오톡 SDK 로드 -->
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
  // SDK 초기화
  Kakao.init('YOUR_APP_KEY'); // 여기에 본인의 카카오 개발자 앱 키를 입력하세요.

  // 카카오톡 공유하기 버튼 클릭 시 이벤트
  document.getElementById('kakao-link-btn').onclick = function() {
    Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: '블로그 제목', // 여기에 블로그 제목을 입력하세요
        description: '블로그 설명', // 여기에 블로그 설명을 입력하세요
        imageUrl: '이미지 URL', // 공유할 이미지의 URL을 입력하세요
        link: {
          mobileWebUrl: window.location.href,
          webUrl: window.location.href
        }
      }
    });
  };
</script>


참고: 위 코드에서 YOUR_APP_KEY 부분에 자신의 카카오 개발자 계정에서 생성한 앱 키를 입력해야 합니다. 이 앱 키는 카카오 링크 기능을 사용하기 위해 필수적입니다.

3. 가젯 저장 및 확인

  1. 코드를 입력한 후, 저장 버튼을 클릭합니다.
  2. 이제 블로그 포스트 하단이나 사이드바에 카카오톡 공유하기 버튼이 표시될 것입니다.
  3. 블로그에 접속하여 공유하기 버튼이 정상적으로 작동하는지 확인합니다.

마치며

이제 블로그스팟 블로그에 방문자들이 카카오톡으로 포스팅을 쉽게 공유할 수 있게 되었습니다! 방문자 수를 늘리고, 더 많은 사람들에게 블로그를 알리고 싶다면 이 방법을 활용해보세요. 만약 추가적인 문제가 발생하거나 궁금한 점이 있다면 댓글로 남겨주세요. 감사합니다!

728x90
반응형

댓글