ai자동화 복붙코딩 입니다. 블로그를 운영하다 보면 다양한 소셜 미디어 플랫폼으로 포스트를 공유하고 싶어질 때가 있습니다. 이번 글에서는 구글 블로그(Blogger) 테마에 "스레드", "네이버 카페", "카카오톡" SNS 공유 버튼을 추가하는 방법을 상세히 알려드리겠습니다.

스레드, 네이버 카페, 카카오톡 SNS 공유 버튼 추가 방법

특히 이 방법은 구글 SEO에도 최적화되어 있어, 블로그 방문자들의 체류 시간을 늘리고, 자연 검색 유입에도 도움이 됩니다.

✅ 카카오 개발자 사이트 설정

카카오톡 공유 기능을 사용하려면 카카오 개발자 사이트에서 애플리케이션을 등록하고 JavaScript 키를 받아야 합니다.

카카오 개발자 사이트 접속 및 로그인

애플리케이션 추가

  • 로그인 후, 상단 메뉴에서 "내 애플리케이션" 클릭 → "애플리케이션 추가" 버튼 클릭.
  • 애플리케이션 이름 입력 후 플랫폼을 "웹"으로 선택합니다.

JavaScript 키 복사

  • 애플리케이션 설정 화면에서 "JavaScript 키"를 복사합니다.
  • 이 키는 블로그에 삽입할 스크립트 코드에서 사용됩니다.

플랫폼 등록

  • 플랫폼 추가에서 "웹" 선택 → 사이트 도메인 입력 (예: https://yourblog.blogspot.com)

이 과정을 통해 정상적으로 카카오톡 공유 기능을 사용할 수 있습니다.


✅ 블로그 아이콘 이미지 업로드 방법

  1. 블로그 관리자 페이지 접속 후 "게시물 작성" 메뉴를 클릭합니다.

  2. 새 게시물을 작성해서 이미지 파일을 업로드합니다.

  3. 업로드된 이미지에서 "이미지 주소 복사"를 통해 URL을 가져옵니다.

  4. 이 URL을 공유 버튼의 background 이미지로 사용하면 됩니다.


✅ 구글 블로그스팟 테마 백업 방법

  • 블로그 관리자 페이지 접속 → "테마" 메뉴 클릭
  • 오른쪽 상단 "백업/복원" 버튼 클릭
  • 현재 테마를 파일로 다운로드하여 안전하게 저장합니다.
  • 테마를 백업해두면, HTML 코드 수정 중 문제가 발생하더라도 손쉽게 복구할 수 있습니다.
  • 이제 HTML 편집으로 접속하여 공유 버튼 코드를 입력 합니다.

✅ 카카오톡 공유 버튼 추가 방법

<head> 태그 바로 아래 코드 삽입

<!-- 카카오톡 SNS 공유 링크 추가 -->
<script src='https://developers.kakao.com/sdk/js/kakao.min.js'></script>
<script>
  Kakao.init('YOUR_JAVASCRIPT_KEY');

  function shareKakao() {
    Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: document.title,
        description: '블로그 포스트를 카카오톡으로 공유합니다.',
        imageUrl: 'https://yourblog.blogspot.com/path-to-image.jpg',
        link: {
          mobileWebUrl: window.location.href,
          webUrl: window.location.href
        }
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: window.location.href,
            webUrl: window.location.href
          }
        }
      ]
    });
  }
</script>

2. 카카오톡 버튼 클릭 이벤트 추가

  • 버튼 클릭 시 shareKakao() 함수가 실행되며, 카카오톡으로 포스트를 공유할 수 있습니다.

✅ CSS 스타일 코드 추가 방법

</style> 태그 바로 위에 코드 삽입

/* 스레드 SNS 공유 링크 추가 */
.social .threads a {
  background: url('https://개인이 찾아서 수정 필요_threads.png') no-repeat center center;
  background-size: contain;
  background-color: #ffffff;
  display: block;
  width: 33px;
  height: 33px;
  border: 1px solid #ddd;
}
.social .threads a span { display: none; }

/* 네이버 SNS 공유 링크 추가 */
.social .naver a {
  background: url('https://개인이 찾아서 수정 필요_naver.png') no-repeat center center;
  background-size: contain;
  background-color: #2DB400;
  display: block;
  width: 33px;
  height: 33px;
  border: 1px solid #2DB400;
}
.social .naver a span { display: none; }

/* 카카오톡 SNS 공유 링크 추가 */
.social .kakao a {
  background: url('https://개인이 찾아서 수정 필요_kaka.png') no-repeat center center;
  background-size: contain;
  background-color: #FEE500;
  display: block;
  width: 33px;
  height: 33px;
  border: 1px solid #FEE500;
}
.social .kakao a span { display: none; }

✅ 공유 버튼 HTML 코드 추가 방법

<div class='post-share'> 코드 아래에 삽입

<!-- 스레드 SNS 공유 링크 추가 -->
<li class='threads'>
  <a class='threads' expr:href='"https://www.threads.net/intent/post?text=" + data:post.title + "&amp;url=" + data:post.url' onclick='window.open(this.href, "windowName", "width=400, height=500, left=24, top=24, scrollbars, resizable"); return false;' rel='nofollow'>
  </a>
</li>

<!-- 네이버 SNS 공유 링크 추가 -->
<li class='naver'>
  <a class='naver' expr:href='"https://share.naver.com/web/shareView?url=" + data:post.url + "&amp;title=" + data:post.title' onclick='window.open(this.href, "naverShare", "width=600,height=600,left=100,top=100,scrollbars=yes,resizable=yes"); return false;' rel='nofollow'>
  </a>
</li>

<!-- 카카오톡 SNS 공유 링크 추가 -->
<li class='kakao'>
  <a class='kakao' href='javascript:shareKakao();' rel='nofollow' title='카카오톡으로 공유'>
  </a>
</li>

✅ 마무리: SEO와 SNS 공유 최적화 효과

SNS 공유 버튼을 추가하면 블로그 포스트의 노출 가능성이 대폭 증가합니다. 방문자가 쉽게 콘텐츠를 공유할 수 있도록 유도하면 자연 검색 유입량, 체류 시간, 블로그 신뢰도까지 모두 상승합니다.

특히 Threads, 네이버, 카카오톡과 같이 국내외 다양한 플랫폼을 아우르는 전략은 SEO에도 직접적으로 긍정적인 영향을 줍니다.

스레드
네이버 카페
카카오톡