워드프레스 블로그에 SNS 공유 버튼을 만드는 방법을 여러가지가 있습니다. 이중에서도 플러그인 없이 만드는 방법을 소개해드리겠습니다. 플러그인이 많이 설치되면 사이트가 무거워져서 SEO에 좋지 않습니다. 이 방법은 GENERATEPRESS테마의 유료버전이 필요합니다.
GENERATEPRESS 유료버전은 블로그의 상당수를 사용자가 원하는대로 최대한 변경이 가능하여 사용하는 것이 좋습니다. 또한 원하는 테마를 쉽게 고를 수도 있어 블로그를 운영하는데 유용합니다. 제가 직접 사용해보고 느낀 점 입니다.
GENERATEPRESS 유료버전($59/years 약 79,000원)을 무료로 받는 방법은 제가 알려드리는 링크를 통해 워드프레스를 설치하시면 무료로 드립니다. 블로그 하단의 연락처를 통해 연락주시길 바랍니다.
각종 코드 추가하기
이 블로그에 게시된 공유버튼 처럼 보여지기 위해서는 3가지 종류의 코드가 추가되어야합니다.
HTML 코드 추가하기
외모 ≫ elements ≫ Add new element (새 element 추가)를 누른 후 Type은 hook을 선택합니다.
제목은 편하게 작성하고 내용에는 아래의 코드를 복사해서 붙여 넣습니다. 저는 보기와 같이 ‘SNS HTML’로 설정했습니다.
<!-- SNS Share Button -->
<div class="sns-go">
<ul>
<li>
<a
href="#"
class="js-social-share"
data-url="http://share.naver.com/web/shareView.nhn?url="
data-title="[공유] "
target="_blank"
alt="네이버에 공유"
rel="nofollow"
>
<svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 96 96" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><rect width="96.000002" height="96" rx="9" ry="9" fill="#1dc800" stroke-width="0"/><g transform="translate(.000001 0.000001)"><path d="M22.810019,26.075075h18.03984l16.57371,24.254979v-24.223106h17.944217v47.999999h-17.976097L40.881729,50.075074v24.095618h-18.16733Z" fill="#fff" stroke="#000" stroke-width="0"/></g></svg>
</a>
</li>
<li>
<a
href="#"
class="js-social-share"
data-url="https://www.facebook.com/sharer/sharer.php?u="
data-title="[공유] "
target="_blank"
alt="페이스북에 공유"
rel="nofollow"
>
<svg height="35" width="35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 408.788 408.788" xml:space="preserve">
<path style="fill:#475993;" d="M353.701,0H55.087C24.665,0,0.002,24.662,0.002,55.085v298.616c0,30.423,24.662,55.085,55.085,55.085
h147.275l0.251-146.078h-37.951c-4.932,0-8.935-3.988-8.954-8.92l-0.182-47.087c-0.019-4.959,3.996-8.989,8.955-8.989h37.882
v-45.498c0-52.8,32.247-81.55,79.348-81.55h38.65c4.945,0,8.955,4.009,8.955,8.955v39.704c0,4.944-4.007,8.952-8.95,8.955
l-23.719,0.011c-25.615,0-30.575,12.172-30.575,30.035v39.389h56.285c5.363,0,9.524,4.683,8.892,10.009l-5.581,47.087
c-0.534,4.506-4.355,7.901-8.892,7.901h-50.453l-0.251,146.078h87.631c30.422,0,55.084-24.662,55.084-55.084V55.085
C408.786,24.662,384.124,0,353.701,0z"/>
</svg>
</a>
</li>
<li>
<a
href="#"
class="js-social-share"
data-url="https://twitter.com/intent/tweet?url="
data-title="[공유] "
target="_blank"
alt="트위터에 공유"
rel="nofollow"
>
<svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 29.242 29.242" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><g><g><path d="M26.918,0.668h-24.592C1.039,0.668,0,1.756668,0,3.103095v24.370858C0,28.817237,1.039,29.908,2.326,29.908h24.592c1.281,0,2.324-1.090763,2.324-2.434047v-24.370858c0-1.346427-1.043-2.435095-2.324-2.435095ZM14.549,18.113926c.41.429599.908.646495,1.496.646495h4.227c.59,0,1.09.221087,1.51.659068.422.437982.629.966075.629,1.580087s-.209,1.141058-.629,1.577992c-.42.440077-.92.661164-1.508.661164h-4.227c-1.76,0-3.266-.656973-4.514-1.964631-1.25-1.309754-1.873-2.88565-1.873-4.729784v-8.934619c0-.632873.207-1.16411.623-1.594757.416-.428552.924-.644399,1.523-.644399.584,0,1.082.217943,1.5.65802.416.440077.623.965027.623,1.580087v2.238108h6.334c.592,0,1.094.218991,1.514.659068.426.437982.633.962931.633,1.580087c0,.610869-.209,1.14001-.629,1.580087-.42.436934-.92.656973-1.51.656973h-6.341v2.2182c0,.617156.205,1.14001.619,1.572753Z" transform="translate(0-.666)" fill="#42c8f4"/></g></g></svg>
</a>
</li>
<li>
<a class="js-copy-btn">
<svg width="35" height="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"></path></svg>
</a>
</li>
</ul>
</div>코드를 복사해서 넣은 후 밑에 설정화면 에서
- settings ≫ Hook 을 generate_after_entry_title 로 설정합니다.
- Display Rules ≫ Location 을 글 All 글 로 설정합니다.
자바스크립트 코드 추가
이번에도 제목은 알아보기 쉽게 작성하고 내용에 아래의 코드를 작성합니다. 저는 ‘SNS 자바스크립트’라고 설정했습니다. 코드를 복사할 때 URL은 사용하는 사이트로 변경하시길 바랍니다.
<script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
setupSocialShare();
setupCopyToClipboard();
}, 2000); // 2-second delay
});
function setupSocialShare() {
// Select the element to trigger the social sharing functionality
const snsGo = document.querySelector('.sns-go');
// If the element exists, attach an event listener to it
snsGo && snsGo.addEventListener('click', (e) => {
e.preventDefault();
const shareLink = e.target.closest('.js-social-share');
// If a valid share link is found, construct a URL and open a share window
if (shareLink) {
const shareUrl = `${shareLink.getAttribute('data-url')}${encodeURIComponent(document.URL)}`,
shareTitle = `${shareLink.getAttribute('data-title')}${encodeURIComponent(document.title)}`;
window.open(`${shareUrl}&title=${shareTitle}`, 'shareWindow', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}
});
}
function setupCopyToClipboard() {
// Select the button intended to trigger the copy functionality
const copyBtn = document.querySelector('.js-copy-btn');
// If the button exists, attach an event listener to it
copyBtn && copyBtn.addEventListener('click', (e) => {
e.preventDefault();
copyURLToClipboard(copyBtn);
});
}
function copyURLToClipboard() {
// Extract the post ID from the body's class attribute
const bodyClass = document.body.className;
const match = bodyClass.match(/postid-(\d+)/);
// If a post ID is found, construct a URL and try to copy it to the clipboard
if (match) {
const postId = match[1];
const url = `https://nuknuk.co.kr/?p=${postId}`;
navigator.clipboard.writeText(url)
.then(() => {
// Inform the user that the URL was copied
alert('URL이 복사되었습니다!');
})
.catch(error => {
// If the copy fails, log the error and inform the user
console.error('Copy failed', error);
alert('URL 복사에 실패했습니다.');
});
}
}
</script>사이트 URL을 변경한 코드를 복사해서 넣은 후 밑에 설정화면 에서
- settings ≫ Hook 을 wp_footer 로 설정합니다.
- Display Rules ≫ Location 을 글 ≫ All 글 로 설정합니다.
CSS 코드 추가
GENERATEPRESS 의 CSS를 추가하는 방법은 간단합니다. CSS를 추가하는 것은 무료버전도 가능합니다.
외모 ≫ 사용자정의하기 ≫ 추가 CSS 에 하단의 코드를 복사한 후 붙여넣습니다.
/* SNS 공유 */
.sns-go {
margin-top: 30px;
}
.sns-go ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.sns-go li {
float: left;
margin-right: 10px;
}
.sns-go a {
display: block;
color: white;
text-align: center;
text-decoration: none;
cursor: pointer;
}
/* 링크 복사 */
.linktooltips-container{
background-color: #030303;
color: #ffffff;
padding: 5px 30px;
border-radius: 10px;
position: absolute;
z-index: 999;
}SNS 공유 버튼 추가 완료
플러그인 없이 공유 버튼을 추가하는 방법에 대해 알아보았습니다. 위 방법은 GENERATEPRESS 테마 유료버전 방법입니다. 제가 드리는 링크로 워드프레스를 설치하면 무료로 유료버전을 업그레이드 해드리고 있습니다. 유료버전이 필요하시다면 블로그 하단의 연락처로 연락주시길 바랍니다.
✅참고할만한 글
공유버튼 만드는법을 찾다 보았습니다. 많은 도움이 되었습니다. 감사합니다.
도움이 되어서 다행입니다.