스레드(Threads)는 Meta가 Instagram 계정과 연동하여 사용할 수 있도록 개발한 텍스트 중심의 소셜 네트워크 서비스입니다. 2023년에 출시된 이 플랫폼은 Instagram의 팔로워 관계를 그대로 불러와 간편하게 소통할 수 있게 해주며, 최대 500자 정도의 짧은 글과 사진(최대 10장)을 게시할 수 있습니다.
X(구 Twitter)를 경쟁 상대로 삼아 만들어진 Threads는 X와 비슷한 구조로 실시간 대화와 토론이 활발하게 이뤄지며, 텍스트 게시물에 댓글을 달거나 스레드 형태로 이어지는 대화를 구성할 수 있는 것이 특징입니다.
스레드 사용자가 증가하면서 이 SNS 채널을 새로운 외부유입 경로로 활용하는 사용자들이 증가하고 있습니다. 플러그인을 사용하여 스레드 공유 버튼을 표시할 수 있겠지만, 이 워드프레스 블로그에서는 비교적 간단한 코드를 사용하여 본문 상단에 페이스북, X와 함께 스레드 공유 버튼을 추가했습니다.
워드프레스에 플러그인을 사용하지 않고 SNS 스레드(Threads) 공유 버튼을 표시하는 방법
이 블로그의 본문 상단에 복잡하지 않은 코드를 사용하여 페이스북, X, 스레드 공유 버튼을 표시하고 있습니다.
그리고 하단에도 포스트 URL 복사 및 소셜 공유 버튼(네이버 포함)을 추가했습니다.😄
SNS 공유 버튼을 표시해도 사용자들이 활발히 소셜 네트워크에 공유하지는 않는 것 같습니다. 이러한 공유 버튼과 URL 복사 버튼은 개인적으로 편리하게 사용하도록 추가해 보았습니다.
하단에 소셜 공유 버튼을 표시하는 방법은 다음 글을 참고해 보세요.
상단에 소셜 공유 버튼을 표시하는 방법에 이 글을 통해 몇 차례 소개한 적이 있습니다. 그러한 코드들을 개선하여 현재 이 블로그에 사용되는 코드를 여기에 참고용으로 공유합니다. 필요하신 경우 활용하시기 바랍니다.
GeneratePress 테마를 사용하는 경우 제목 아래에 HTML이나 PHP 코드를 표시할 수 있습니다. GeneratePress 테마를 사용하지 않는 경우에는 Ad Inserter로도 시도해볼 수 있을 것 같습니다.
다음은 GP Premium의 Elements 모듈을 활성화하여 엘리먼트로 코드를 추가하는 방법에 대하여 살펴보겠습니다. Ad Inserter나 다른 방법으로 코드를 추가하는 경우에도 코드 자체는 동일하므로 적절히 응용하시기 바랍니다.
1 모양 » Elements로 이동한 다음, Add New Element 버튼을 클릭하고, Choose Element Type(엘리먼트 타입 선택) 팝업에서 Hook을 선택합니다.
2 엘리먼트 추가/편집 화면이 표시됩니다.
엘리먼트 제목을 입력하고 Hook에 generate_after_entry_title 또는 적절한 훅을 선택합니다.
그리고 텍스트 상자에 다음과 같은 HTML 코드를 입력합니다.
<!-- SNS Share Button -->
<div class="sns-go">
<ul>
<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://x.com/intent/tweet?url="
data-title="[공유] "
target="_blank"
alt="X에 공유"
rel="nofollow"
>
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 509.64" height="35" width="35">
<rect width="512" height="509.64" rx="115.61" ry="115.61"/>
<path fill="#fff" fill-rule="nonzero" d="M323.74 148.35h36.12l-78.91 90.2 92.83 122.73h-72.69l-56.93-74.43-65.15 74.43h-36.14l84.4-96.47-89.05-116.46h74.53l51.46 68.04 59.53-68.04zm-12.68 191.31h20.02l-129.2-170.82H180.4l130.66 170.82z"/>
</svg>
</a>
</li>
<!-- Threads -->
<li>
<a
href="#"
class="js-social-share"
data-url="https://www.threads.net/intent/post?url="
data-title="[공유] "
target="_blank"
alt="Threads에 공유"
rel="nofollow"
>
<svg height="35" width="35" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="256" height="256" rx="56" ry="56" fill="#000"/>
<path d="M165.6 110.7c-3.7-19.6-17.9-31.8-42-31.8-29.7 0-49.3 17.6-49.3 43.9 0 26.3 19.3 44.1 49.2 44.1 9.6 0 18.6-2 26.2-5.8-3.9 19.1-18.5 29.6-41.1 29.6-11.3 0-21.6-2.2-31-6.6l-6.4 19.3c11.7 5.2 25.3 7.9 40 7.9 42.1 0 66.8-23.6 70.3-69.2l.1-1.5c7.6 2.2 14.5 5.5 20.9 9.9l10.7-16.5c-8.2-5.9-17.2-10.2-27-12.8zm-25.5 31.3c-7.1 4.9-16.4 7.6-27.1 7.6-18.5 0-29.8-9.3-29.8-24.3 0-14.8 11.3-24 29.8-24 18.4 0 29.1 8.8 31.3 23.9-.9 5.8-2.2 11.2-4.2 16.8z" fill="#fff"/>
</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> 원하는 경우 이 글을 참고하여 네이버 공유 버튼과 카카오 공유 버튼도 추가할 수 있습니다.
3 Display Rules (표시 규칙) 탭을 클릭하고 Location에서 을 선택합니다.
4 다음으로 포스트 URL 복사 기능을 하는 자바스크립트(JavaScript)를 추가합니다. URL 복사 기능을 사용하지 않을 경우 이 단계는 건너뛰면 됩니다. 아래의 코드를 사용하면 URL이 https://www.thewordcracker.com/?p=73298과 같은 단축 형식으로 복사됩니다.
새로운 Hook을 생성하고 Hook에 wp_footer를 선택합니다.
텍스트 상자에 다음과 같은 자바스크립트(JS) 코드를 입력합니다.
<script>
document.addEventListener('DOMContentLoaded', () => {
// Social Share Links
const snsGo = document.querySelector('.sns-go');
snsGo && snsGo.addEventListener('click', (e) => {
e.preventDefault();
const shareLink = e.target.closest('.js-social-share');
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');
}
});
// Copy to Clipboard Button
const copyBtn = document.querySelector('.js-copy-btn');
copyBtn && copyBtn.addEventListener('click', () => {
copyURL(copyBtn);
});
const copyURL = (element) => {
const bodyClass = document.body.className;
const match = bodyClass.match(/postid-(\d+)/);
if (match) {
const postId = match[1];
const url = `https://www.thewordcracker.com/?p=${postId}`;
navigator.clipboard.writeText(url)
.then(() => {
element.insertAdjacentHTML('afterend', '<div class="linktooltips-container">URL이 복사되었습니다!</div>');
setTimeout(() => {
document.querySelectorAll('.linktooltips-container').forEach(el => el.remove());
}, 3000);
})
.catch(error => {
console.error('Copy failed', error);
alert('URL 복사에 실패했습니다.');
});
} else {
console.warn('Post ID not found');
alert('URL을 생성할 수 없습니다.');
}
}
});
</script>위의 코드에서 "https://www.thewordcracker.com"은 해당 사이트 주소로 바꾸도록 합니다. (저는 이 코드를 약간 지연시켜 로드했습니다.)
이 코드가 모든 게시글에 대하여 표시되도록 앞서 설정한 것과 마찬가지로 Display Rules 탭으로 이동하여 Location에 글 → All 글을 선택합니다.
5 이제 마지막으로 CSS 코드를 입력합니다. 모양 » 사용자 정의 » 추가 CSS로 이동하여 다음 CSS 코드를 입력합니다.
.sns-go ul{list-style-type:none;margin:40px 0 0 0;padding:0;overflow:hidden}
.sns-go li{float:left;padding-right:5px}
.sns-go a{cursor:pointer}위의 과정을 모두 거쳤다면 이제 게시글을 방문하여 공유 버튼이 정상적으로 작동하는지 체크하시기 바랍니다.
👉 상기 코드는 이 블로그에 적용되어 있고 잘 작동하지만, 사용 환경에 따라 (특히 캐시 플러그인이 설치된 경우) 원하는 대로 작동하지 않을 가능성도 있습니다.
스레드 공유 버튼을 클릭하면 스레드에 해당 게시글이 공유되며 짧은 메시지를 함께 입력할 수 있습니다.
마치며
이상으로 워드프레스 사이트에 스레드 공유 버튼을 포함하여 페이스북, X 공유 버튼을 추가하는 방법에 대하여 살펴보았습니다.
우리나라 개발업체에서 만든 한국형 소셜 공유 플러그인인 Korea SNS의 경우 아직 스레드 공유 버튼은 지원되지 않습니다. 현재 1년 이상 업데이트가 안 되고 있고 앞으로 업데이트가 안 될 가능성도 있어 보입니다.
깔끔하게 SNS 공유 버튼을 추가하려는 경우 이 플러그인을 고려할 수 있습니다만, 사이트 속도에는 약간 영향을 미칠 수 있습니다.
스레드 공유 버튼을 워드프레스에 추가하는 방법이 매우 흥미롭습니다! 최근 SNS 사용이 활발해지면서 다양한 플랫폼과의 연동이 중요해졌는데, 이렇게 간단한 코드로 구현할 수 있다니 유용한 팁이네요. 많은 사람들이 이 버튼을 통해 소통을 더 활발히 할 수 있으면 좋겠습니다.
그런데 상단과 하단에 서로 다른 공유 버튼을 두는 이유는 무엇인가요? 사용자 경험 측면에서 어떤 효과를 기대하고 계신지 궁금합니다!
상단에 배치한 버튼은 예전부터 사용해오던 것인데요. 특히 URL을 https://www.thewordcracker.com/?p=73862 와 같은 형식으로 복사하는 기능 때문에 표시하고 있습니다. 개인적으로 네이버 카페나 카톡 등에 URL을 깔끔한 형식으로 복사하여 공유하는 데 활용하고 있습니다. 하단에도 URL 복사가 있는데, 이 복사 버튼으로 복사하면 URL이 전체 URL로 복사됩니다. 한글 URL이 있는 경우 한글 부분이 인코딩 때문에 깨져 보입니다. 이 기능은 URL을 복사하여 구글 서치 콘솔 등 검색엔진에 페이지 색인 요청을 하는 용도로 개인적으로 사용하고 있습니다.😄
스레드 공유 버튼을 직접 코드로 추가하는 방법을 공유해주셔서 정말 유용하네요! 요즘 스레드 사용자가 많아지면서 SNS 연동이 더욱 중요해지는 것 같아요. 상단에 버튼을 추가하니 사용자가 더 쉽게 공유할 수 있을 것 같은데, 실제로 공유하는 비율은 어떻게 되나요?
이런 소셜 버튼들이 활성화되면 사용자들이 좀 더 자주 활용할 것 같은데, 혹시 어떤 디자인이나 배치가 효과적일까요?
간단히는 워드프레스용 소셜 버튼 플러그인을 설치하면 (속도상 조금 안 좋을 수 있지만) 괜찮은 디자인의 버튼들을 표시할 수 있을 것입니다.