구글 블로거(블로그스팟)에 카카오톡 공유 버튼 만드는 법

구글 블로거는 네이버 블로그나 티스토리에 비해 정말 불편하다고 말씀드렸었죠?

하다 못해 위 블로그에는 기본으로 장착되어있는 "공유"버튼 조차 없습니다.

아니, 있긴 하죠. 아래처럼 국내에선 거의 안쓰는 왓츠앱이나 쓰긴 하지만 공유할 땐 많이 안쓰는 트위터, 링크드인 같은 것들만 있어서 문제일 뿐이죠ㅠ.

국내에선 잘 안쓰는 공유 버튼만 주렁주렁 있음.. 뭥미..

사실 네이버 공유버튼도 원래는 없었는데, 제가 ChatGPT한테 물어서 추가해 넣은 것입니다.

그래서 이번에는 카카오톡 공유 버튼을 넣어 보려고 하고 있고, 그 과정을 설명드리려고 합니다.

사실 ChatpGPT한테 질문하는 것도 상당한 스킬이 필요하다고 하더라고요. 요청을 구체적으로 하지 않으면 쳇도 실수할 수 있기 때문인가 봅니다.

그래서, 그 과정 하나하나를 보여드릴 건데, 그럼 카톡뿐만 아니라 티스토리 같은 것들도 동일한 과정으로 충분히 따라 하실 수 있으실거라 생각되네요.

아... 참, 저 공유 버튼도 원래 오리지널 버전 블로거에는 없습니다ㅋ. 저건 블로소득님이 추천해 주신 Derelogy 무료 테마를 썼을 때 나오는 공유 버튼이에요.

제 블로거 테마도 Derelogy 인데, 필요하신 분들은 아래 링크를 걸어 뒀으니 블로소득님 포스트를 보시고 천천히 따라 하시면 됩니당ㅎ.

https://blogsodk.blogspot.com/2025/02/free-theme-derelogy.html

자, 그럼 시작해 보겠습니당.

먼저 본인의 블로거로 가셔서 "테마"에서 "HTML 편집"으로 들어갑니다. 그럼, 아래와 같은 복잡한 HTML 코드가 주르륵 뜰텐데요, 겁먹지 마시고 Ctrl+F 누르신 후 "LinkedIn"을 타이핑하여 엔터를 눌러 LinkedIn 항목을 찾습니다.

그런 다음, Linkedin 항목 앞뒤로 4~5줄 포함하여 카피하고는 ChatGPT한테 아래와 같이 질문하면 됩니다.

"구글 블로거에 포스팅 중인데, LinkedIn 공유 버튼 대신에 카카오톡 공유 버튼을 넣고 싶어. 참고로, 내 블로거 테마의 코드는 아래와 같아. 여기서 어느 부분을 지우고, 어떤 내용을 넣어야할지 알려줄래? (이 다음 부분은 위에서 LinkedIn 앞뒤로 4~5줄 포함해서 카피한 코드를 삽입. 좀 길게 충분히 삽입하는 것이 좋음)

그러면 챗이 아래와 같이 답변해 줍니다.

테마 코드에서 아래 부분이 LinkedIn 공유 코드이니, 이부분을 통째로 삭제하세요.

<li><a aria-label='Linkedin' class='linkedin al-center tx-50 f' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:post.url.canonical + "&title=" + data:post.title' onclick='window.open(this.href, "sharer", "toolbar=0,status=0,width=626,height=500"); return false;' rel='nofollow' title='Share to Linkedin'><svg viewBox='0 0 448 512'><path d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/></svg><span>LinkedIn</span></a></li>

그런다음 그 자리에 아래 카카오톡 코드를 붙여넣기 해 주세요.

<span>KakaoTalk</span></a></li>

그리고, Ctrl-F를 눌러 </body>를 찾고, 그 바로 앞에 아래 코드를 삽입하세요.

function shareKakao() {

Kakao.Link.sendDefault({

objectType: 'feed',

content: {

title: document.title,

description: '',

imageUrl: 'https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png',

link: {

mobileWebUrl: window.location.href,

webUrl: window.location.href,

});

}

</script>

앗... 그런데 카카오톡은 블로거 본인의 JavaScript 키를 Kakao Developers를 통해 발급받아야 하는 귀찮음이 있네요...? 네이버는 이런 것 필요 없었는데, 카카오는 왜 이리 귀찮게 하는지...ㅠ

암튼, 아래 사이트에 방문해서 가입하고 JavaScript 키를 발급받아야 합니다. (이것도 ChatGPT한테 물으시면 됩니다ㅎ)

https://developers.kakao.com/

자, 이러면 아래 캡처와 같이 깔끔하게 LinkedIn 대신 카카오톡 공유하기 버튼이 만들어졌네요ㅎ.

카카오톡 공유 버튼이 만들어진 모습

근데, 네이버 때는 아이콘이 없어서 제가 걍 알파벳 N 자로 대신 했는데, 카카오톡은 귀찮았던 대신에 아이콘도 멋지게 만들어 줬네요ㅎ.

물론 챗이 네이버 아이콘도 만들어줄까요? 라고 물었지만, 제가 귀찮아서 걍 알파벳으로 해 달라고 했었거든요ㅋ.

네이버 공유 버튼도 카카오랑 동일하게 챗한테 물어보시면 만들어 줍니다. 저는 Pinterest 공유 버튼 대신 네이버 버튼을 만들어 줬고요.

그럼, 이런 식으로 적당한 것을 지우고 (혹은 추가도 될 것 같네요) 티스토리 공유 버튼도 만들셔서 성공적인 블로거와 애드센스 부수입을 이어 나가시길 기원 드립니당~.^^

ps.

네이버 공유 버튼도 김에 알려 드리겠습니당ㅎ.

저는 Pinterest 버튼을 지우고 그 자리에 만들었는데, 위와 동일한 방식으로 아래 부분 코드를,

<span>Pinterest</span>

</a></li><li><a aria-label='Pinterest' class='pinterest al-center tx-50 f' data-pin-do='buttonPin' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url.canonical + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href, "sharer", "toolbar=0,status=0,width=626,height=500"); return false;' rel='nofollow' title='Share to Pinterest'>

<span>Pinterest</span>

</a></li>

아래 코드로 바꿔 줍니다.

<li>

<span>Naver Blog</span>

</a> </li>

그리고, </body> 바로 앞에 아래 코드를 추가해 주시면 됩니다.

function shareToNaver() {

var url = location.href;

var title = document.title;

var shareUrl = "https://share.naver.com/web/shareView.nhn?url=" + encodeURIComponent(url) + "&title=" + encodeURIComponent(title);

window.open(shareUrl, "navershare", "width=600,height=500");

}

</script>

그럼, 모두들 화이팅입니닷~~~^^

구글 블로거(블로그스팟)에 카카오톡 공유 버튼 만드는 법

Related Posts

댓글 쓰기