카카오·네이버·X 공유 버튼 직접 예쁘게 만드는 법 6단계
블로그 글 하단에 공유 버튼이 있는 것과 없는 것은 생각보다 차이가 크다. 아무리 좋은 글이어도 공유하려면 독자가 직접 URL을 복사해서 붙여 넣어야 한다면 그 한 단계가 장벽이 된다. 처음에 공유 버튼을 만들겠다고 마음먹었을 때 플러그인부터 찾았다. 그런데 외부 서비스 의존이 싫었고, 내 블로그 분위기에 맞게 직접 만들고 싶었다. 패션 잡지에서 오려낸 옷을 억지로 맞춰 입히는 것보다 내 체형에 맞게 직접 짜는 게 낫다는 생각이었다. 직접 만들면 복잡할 것 같지만 공유 URL 구조만 알면 생각보다 단순하다.
카카오 공유 버튼 - SDK 방식과 URL 방식의 차이
카카오 공유는 두 가지 방식이 있다. 카카오 SDK를 불러와서 쓰는 방식과, 카카오 sendLink URL 스킴을 직접 쓰는 방식이다. SDK 방식은 메시지 커스터마이징이 자유롭지만 앱 키 발급이 필요하고 설정이 번거롭다. URL 방식은 모바일에서 카카오톡이 설치된 환경에서만 동작하지만 코드가 훨씬 단순하다. 처음 도전하는 사람이라면 카카오 SDK를 쓰는 게 결과물이 더 예쁘게 나온다. 카카오 developers에서 JavaScript 키를 발급받고 아래처럼 쓰면 된다.
<!-- head 안에 SDK 불러오기 --> <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script> <!-- 공유 버튼 HTML --> <button id="kakao-share-btn" type="button">카카오 공유</button> <script> // 발급받은 JavaScript 키로 초기화 Kakao.init('여기에_자신의_JavaScript_키'); document.getElementById('kakao-share-btn').addEventListener('click', function() { Kakao.Share.sendDefault({ objectType: 'feed', content: { title: document.title, description: '블로그 글 설명을 여기에 입력하세요', imageUrl: '썸네일_이미지_URL', link: { mobileWebUrl: window.location.href, webUrl: window.location.href } } }); }); </script>
네이버 공유 버튼 - 가장 단순한 구조
네이버 공유는 URL 파라미터 방식이라 SDK가 필요 없다. 마치 편의점처럼 준비 없이 바로 쓸 수 있다. 네이버 공유 URL에 title과 url만 넣어주면 끝이다. 가장 심플하게 만들 수 있어서 처음 공유 버튼을 붙이는 사람에게 부담이 없다. JavaScript로 현재 페이지 URL과 타이틀을 자동으로 가져오도록 하면 매 포스팅마다 수정하지 않아도 된다.
<button id="naver-share-btn" type="button">네이버 공유</button> <script> document.getElementById('naver-share-btn').addEventListener('click', function() { var shareUrl = 'https://share.naver.com/web/shareView?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title); window.open(shareUrl, '_blank', 'width=600,height=500'); }); </script>
X(구 트위터) 공유 버튼 - 텍스트 미리 넣기
X 공유도 네이버처럼 URL 파라미터 방식이다. 다른 점은 text 파라미터에 트윗할 내용을 미리 넣어줄 수 있다는 것이다. 포스팅 제목과 URL을 함께 넣어주면 독자가 공유 버튼을 눌렀을 때 트윗 창에 내용이 이미 들어가 있어서 공유까지의 마찰이 줄어든다. 해시태그도 미리 설정해줄 수 있어서 블로그 주제와 관련된 태그를 기본으로 붙여두면 노출에 도움이 된다.
<button id="x-share-btn" type="button">X(트위터) 공유</button> <script> document.getElementById('x-share-btn').addEventListener('click', function() { var shareUrl = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + '&url=' + encodeURIComponent(window.location.href) + '&hashtags=블로그,추천'; window.open(shareUrl, '_blank', 'width=600,height=400'); }); </script>
세 버튼을 한 줄에 나란히 배치하기
세 버튼을 따로 만들었으면 이제 한 영역에 묶어야 한다. 수납장에 들어온 물건들을 바구니에 넣어서 한 칸에 정리하는 것처럼, 공유 버튼들도 한 묶음으로 보여야 독자가 인식하기 쉽다. 아래는 세 버튼을 감싸는 컨테이너와 기본 인라인 스타일을 함께 적용한 전체 예시다.
<!-- 공유 버튼 영역 전체 --> <div style="margin: 30px 0; text-align: center;"> <p style="margin-bottom: 12px; font-weight: bold;">이 글이 도움이 됐다면 공유해주세요</p> <button id="kakao-btn" style="background-color:#FEE500; color:#000000; border:none; padding:10px 20px; margin:4px; cursor:pointer; border-radius:4px; font-size:14px; font-weight:bold;" type="button"> 카카오 공유 </button> <button id="naver-btn" style="background-color:#03C75A; color:#ffffff; border:none; padding:10px 20px; margin:4px; cursor:pointer; border-radius:4px; font-size:14px; font-weight:bold;" type="button"> 네이버 공유 </button> <button id="x-btn" style="background-color:#000000; color:#ffffff; border:none; padding:10px 20px; margin:4px; cursor:pointer; border-radius:4px; font-size:14px; font-weight:bold;" type="button"> X 공유 </button> </div> <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script> <script> Kakao.init('여기에_자신의_JavaScript_키'); document.getElementById('kakao-btn').addEventListener('click', function() { Kakao.Share.sendDefault({ objectType: 'feed', content: { title: document.title, description: '블로그 글 설명 텍스트', imageUrl: '썸네일_이미지_URL', link: { mobileWebUrl: window.location.href, webUrl: window.location.href } } }); }); document.getElementById('naver-btn').addEventListener('click', function() { var url = 'https://share.naver.com/web/shareView?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title); window.open(url, '_blank', 'width=600,height=500'); }); document.getElementById('x-btn').addEventListener('click', function() { var url = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + '&url=' + encodeURIComponent(window.location.href); window.open(url, '_blank', 'width=600,height=400'); }); </script>
버튼 색상을 브랜드 컬러에 맞추는 이유
카카오는 노란색, 네이버는 초록색, X는 검정색이다. 이 색상은 각 서비스의 브랜드 색상이기 때문에 독자가 버튼을 보자마자 어떤 채널로 공유되는지 바로 인식한다. 마치 신호등의 빨강 노랑 초록처럼, 이미 학습된 색상 코드를 활용하는 것이다. 블로그 디자인에 맞추겠다고 이 색상을 임의로 바꾸면 독자가 버튼을 읽는 데 한 박자 더 걸린다. 이름 텍스트를 명확히 쓰면 색상을 바꿔도 되지만, 가능하면 브랜드 색상을 유지하는 게 사용성 면에서 좋다.
느낀점
공유 버튼을 직접 만들어보기 전까지는 그냥 "있으면 좋은 것" 정도로만 생각했다. 직접 만들고 나서 달라진 게 있다. 내 글을 읽은 사람이 그 내용을 누군가에게 전달하고 싶을 때 그 의지를 행동으로 옮기는 마지막 관문이 공유 버튼이라는 걸 알게 됐다. 패션 잡지에서 따로 구한 옷을 억지로 입히는 게 아니라 내 블로그에 딱 맞게 재단한 버튼이라는 느낌이 들었다. 플러그인으로 갖다 쓰면 빠르지만, 직접 만든 버튼은 내가 어떻게 작동하는지 완전히 알기 때문에 나중에 수정하거나 디버깅할 때 막히지 않는다. 그 차이가 결국 블로그를 오래 관리할수록 크게 벌어진다는 것도 이번에 느꼈다.
참고 출처
- 카카오 JavaScript SDK 공식 문서
- Kakao Share API
- Twitter Web Intent 공식 문서
- 네이버 공유 URL
- MDN Web Docs – CSS Flexbox