구글 블로그스팟에 카카오톡 공유 버튼 추가하기

... minutes read

블로그스팟 포스트를 카카오톡으로 공유하고 싶으신가요? "친구들에게 쉽게 알리고 싶다"는 생각, 저도 해봤어요. 초보자도 따라 할 수 있는 방법을 알려드릴게요. 함께 블로그를 더 재밌게 만들어보세요!


구글 블로그스팟에 카카오톡 공유 버튼 추가하기


왜 카카오톡 공유 버튼이 좋을까요?

블로그를 운영하다 보면 "내 글이 더 많은 사람에게 닿았으면 좋겠다"는 바람이 생기죠. 카카오톡 공유 버튼을 추가하면 방문자들이 쉽게 친구들과 콘텐츠를 나눌 수 있어요. 설정이 살짝 복잡해 보일 수 있지만, 제가 해보니 생각보다 간단하더라고요. 블로그가 더 활기차질 거예요!

1. 카카오 개발자 설정하기

먼저 카카오 개발자 사이트에서 준비를 시작해 볼게요. 키를 발급받는 과정이에요.

단계 설명
1 카카오 developers 사이트에 접속해 카카오 계정으로 로그인합니다.
2 "내 애플리케이션"에서 "애플리케이션 추가하기" 또는 "새로 추가"를 클릭하세요.
3 앱 이름(예: "내 블로그")과 사업자 정보를 입력하고, 운영정책에 동의한 뒤 "저장"을 누릅니다.
4 생성된 앱의 "앱 설정" → "앱 키" 탭에서 JavaScript 키를 복사해 둡니다.
5 "플랫폼"을 선택하고 "Web" 플랫폼을 추가합니다.
6 블로그스팟 도메인(예: https://내블로그.blogspot.com)을 입력하고 저장합니다.

JavaScript 키를 잘 복사해 뒀다면 이제 반은 끝난 거예요. 다음 단계로 넘어가 볼게요!

2. 카카오톡 아이콘 이미지 준비하기

공유 버튼에 들어갈 카카오톡 아이콘을 준비해야 해요. 예쁜 이미지가 블로그를 더 돋보이게 해줄 거예요.

단계 설명
1 카카오톡 아이콘 이미지를 준비합니다(공식 로고나 직접 만든 이미지도 좋아요).
2 블로그 새 포스트에 이미지를 업로드하고, 업로드 후 이미지 URL을 복사해 둡니다.

URL은 나중에 쓸 거니까 잘 보관해 두세요. 이제 본격적으로 코드를 추가할 차례예요!

3. 블로그 테마 HTML 편집하기

카카오톡 공유 기능을 넣으려면 HTML에 스크립트를 추가해야 해요. 살짝 긴장될 수 있지만, 따라 하면 쉬워요.

단계 설명
1 블로그 대시보드에서 "테마" → "HTML 편집"을 클릭합니다.
2 혹시 모를 실수를 대비해 "테마 백업"을 꼭 해두세요.
3 Ctrl+F로 </body>를 찾아 바로 위에 다음 코드를 추가합니다: 
<script src='//developers.kakao.com/sdk/js/kakao.min.js'></script>
<script>
Kakao.init('여기에 카카오 JavaScript 키를 붙여넣으세요');
function shareKatalk() {
  Kakao.Link.sendScrap({
    requestUrl: location.href
  });
}
</script>
4 "카카오 JavaScript 키를 붙여넣으세요" 부분에 1단계에서 복사한 키를 넣고 저장합니다.

이 스크립트가 카카오톡 공유 기능을 활성화해 줘요. 이제 버튼만 추가하면 끝이에요!

4. 공유 버튼 추가하기

마지막으로 버튼을 블로그에 넣는 과정이에요. 원하는 위치에 예쁜 아이콘을 배치해 볼게요.

단계 설명
1 HTML에서 버튼을 넣을 위치를 찾습니다(예: Contempo Light 테마는 footerBylines 검색).
2 원하는 위치에 다음 코드를 추가합니다: 
<a href='#' onclick='shareKatalk()' rel='nofollow' title='kakaotalk'>
  <img height='35px' src='여기에 카카오톡 아이콘 URL을 붙여넣으세요' style='border-radius:8px' width='35px'/>
</a>
3 "카카오톡 아이콘 URL" 부분에 2단계에서 복사한 이미지 주소를 넣고 저장합니다.

짜잔! 이제 포스트 하단에 카카오톡 공유 버튼이 생겼어요. 클릭하면 바로 공유할 수 있답니다!

꿀팁: 백업은 필수!

HTML 편집 전 꼭 테마를 백업해 두세요. 실수로 잘못되면 복구할 수 있으니 안심하고 진행할 수 있어요!

복사할 수 있는 예시 코드

아래 코드를 복사해서 바로 써보세요. 키와 URL만 내 블로그에 맞게 바꾸면 됩니다!

<script src='//developers.kakao.com/sdk/js/kakao.min.js'></script>
<script>
Kakao.init('여기에 카카오 JavaScript 키를 붙여넣으세요');
function shareKatalk() {
  Kakao.Link.sendScrap({
    requestUrl: location.href
  });
}
</script>

<a href='#' onclick='shareKatalk()' rel='nofollow' title='kakaotalk'>
  <img height='35px' src='여기에 카카오톡 아이콘 URL을 붙여넣으세요' style='border-radius:8px' width='35px'/>
</a>

자주 묻는 질문 (FAQ)

  • Q: 버튼이 안 보여요. 왜일까요?

    A: 이미지 URL이나 JavaScript 키가 잘못됐을 수 있어요. 정확히 입력했는지 확인하고, 저장 후 새로고침해 보세요! 

  • Q: 공유가 안 돼요. 어떻게 하나요?

    A: Web 플랫폼에 블로그 도메인을 제대로 등록했는지 확인하세요. 키도 다시 체크하면 곧 해결될 거예요. 힘내세요! 

  • Q: 다른 위치에 넣고 싶어요?

    A: HTML에서 원하는 위치(예: 포스트 상단)를 찾아 코드를 넣으면 돼요. footerBylines 대신 다른 부분을 찾아보세요! 

카카오톡으로 블로그 더 널리 알리기

블로그스팟에 카카오톡 공유 버튼을 추가하면 방문자들이 쉽게 콘텐츠를 공유할 수 있어요. 이 글을 따라 설정해 보세요. 친구들에게 내 글이 퍼지는 기쁨을 느껴보세요! 

Tags:

Related Posts

로드 중…