워드프레스 소셜 공유

워드프레스에서 플러그인 없이 링크 복사, 문자 메시지, 이메일, 카카오톡, 페이스북, X(트위터), 쓰레드로 콘텐츠를 공유할 수 있는 소셜 공유 버튼을 직접 구현하고 싶다면 어떻게 해야 할까?

HTML, CSS, JavaScript를 활용하여 원하는 소셜 공유 기능을 추가하는 방법을 단계별로 알아보자.

소셜 공유

소셜 공유 버튼은 방문자가 웹사이트 콘텐츠를 쉽게 공유할 수 있도록 도와준다.
이를 통해 트래픽을 늘리고, 방문자 참여를 높일 수 있다.

플러그인 없이 직접 구현하면 사이트 성능을 최적화할 수 있다.

링크 복사, 문자 메시지, 이메일, 카카오톡, 페이스북, X(구 트위터), 쓰레드 공유 버튼을 추가하는 방법을 알아보자.

소셜 공유 만드는 방법

먼저 카카오 개발자 플랫폼에서 앱을 등록하고 앱 키를 발급받고 공유 기능 설정을 해야한다.

HTML 만들기

HTML을 사용하여 소셜 공유 버튼의 기본 구조를 만들자.

이 코드는 single.php / footer.php 파일에 넣고 싶은 위치에 추가하면 된다.

<div class="social-share-buttons"><a href="#" class="copy-link" onclick="copyLink()">링크 복사</a><a href="#" class="sms" onclick="shareViaSMS()">문자 메시지</a><a href="#" class="email" onclick="shareViaEmail()">이메일</a><a href="#" class="kakao" onclick="shareViaKakao()">카카오톡</a><a href="#" class="facebook" onclick="shareOnFacebook()">페이스북</a><a href="#" class="twitter" onclick="shareOnTwitter()">X</a><a href="#" class="threads" onclick="shareOnThreads()">쓰레드</a></div>

CSS 스타일링

CSS를 사용하여 버튼을 스타일링한다.

single.css

.social-share-buttons{display:flex;gap:10px;flex-wrap:wrap;}.social-share-buttons a{padding:10px 20px;color:white;text-decoration:none;border-radius:5px;font-size:14px;}.social-share-buttons .copy-link{background-color:#9c27b0;}.social-share-buttons .sms{background-color:#4caf50;}.social-share-buttons .email{background-color:#ff5722;}.social-share-buttons .kakao{background-color:#ffcd00;color:#000;}.social-share-buttons .facebook{background-color:#3b5998;}.social-share-buttons .twitter{background-color:#000000;}.social-share-buttons .threads{background-color:#000000;}

JavaScript 기능 구현

JavaScript를 사용하여 각 플랫폼에 콘텐츠를 공유하는 기능을 구현한다.

single.js

function copyLink(){var url=window.location.href;navigator.clipboard.writeText(url).then(function(){alert('링크가 복사되었습니다: '+url)}).catch(function(){alert('링크 복사에 실패했습니다.')})}function shareViaSMS(){var url=encodeURIComponent(window.location.href);var text=encodeURIComponent(document.title);window.open('sms:?body='+text+'%20'+url)}function shareViaEmail(){var url=encodeURIComponent(window.location.href);var text=encodeURIComponent(document.title);window.open('mailto:?subject='+text+'&body='+url)}function shareViaKakao(){var url=window.location.href;var text=document.title;if(typeof Kakao!=='undefined'){Kakao.Share.sendDefault({objectType:'feed',content:{title:text,description:'',imageUrl:'',link:{mobileWebUrl:url,webUrl:url}},buttons:[{title:'웹으로 보기',link:{mobileWebUrl:url,webUrl:url}}]})}else{alert('카카오톡 SDK가 로드되지 않았습니다.')}}function shareOnFacebook(){var url=encodeURIComponent(window.location.href);window.open('https://www.facebook.com/sharer/sharer.php?u='+url,'_blank')}function shareOnTwitter(){var url=encodeURIComponent(window.location.href);var text=encodeURIComponent(document.title);window.open('https://twitter.com/intent/tweet?url='+url+'&text='+text,'_blank')}function shareOnThreads(){var url=encodeURIComponent(window.location.href);var text=encodeURIComponent(document.title);window.open('https://www.threads.net/intent/post?text='+text+'%20'+url,'_blank')}

코드 적용

카카오톡 공유 기능을 사용하려면 카카오톡 SDK를 추가해야 한다.
앱 키가 저장된 Javascript 파일을 생성하고 single.css, single.js와 함께 추가하자.

Javascript 파일 생성

Kakao.init('YOUR_KAKAO_APP_KEY');

 

functions.php에 추가

wp_enqueue_style( 'single-styling', get_template_directory_uri() . '/css/single.css?v=' . filemtime(get_template_directory() . '/css/single.css') );

wp_enqueue_script( 'singleJS', get_template_directory_uri() . '/js/single.js', array(), '0.1.0', true );

wp_enqueue_script( 'kakao-sdk', 'https://developers.kakao.com/sdk/js/kakao.min.js', array(), '1.43.5', false );

wp_enqueue_script( 'kakao-init', 'JS 파일 URL', array(), '0.1.0', false );

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기