Threadsは、MetaがInstagramアカウントと連携して使用できるように開発したテキスト中心のソーシャルネットワークサービスです。 2023年に発売されたこのプラットフォームは、Instagramのフォロワー関係をそのまま呼び、簡単にコミュニケーションできるようにし、最大500文字程度の短い文と写真（最大10枚）を投稿することができます。
X（旧Twitter）を競争相手にして作られたThreadsは、Xと同様の構造でリアルタイムの会話とディスカッションが活発に行われ、テキスト投稿にコメントしたり、スレッド形態につながる会話を構成できることが特徴です。
スレッド ユーザーが増加している間、このSNSチャネルを新しい外部流入経路として活用するユーザーが増加しています。プラグインを使用してスレッド共有ボタンを表示できますが、 WordPress ブログでは、比較的簡単なコードを使用して本文の上部に Facebook、Xでスレッド共有ボタンを追加しました。
WordPressにプラグインを使用せずにSNSスレッド共有ボタンを表示する方法
このブログの本文の上部に複雑でないコードを使用して Facebook、X、スレッド共有ボタンを表示しています。
そして下部にもポストURLをコピーしてソーシャル共有ボタン（Naver を含む）を追加しました。😄
SNS共有ボタンを表示しても、ユーザーが活発にソーシャルネットワークに共有していないようです。これらの共有ボタンとURLコピーボタンを個人的に使いやすくするために追加しました。
下部にソーシャル共有ボタンを表示する方法については、次の記事を参照してください。
上部にソーシャル共有ボタンを表示する方法に、この記事で数回紹介したことがあります。これらのコードを改善し、現在このブログで使用されているコードを参考のためにここで共有します。必要に応じてご活用ください。
GeneratePress テーマを使用している場合は、タイトルの下にHTMLまたはPHPコードを表示できます。 GeneratePress テーマを使用していない場合は、Ad Inserterでも試してみることができるようです。
次は、 GPプレミアムの 要素 モジュールを有効にして要素にコードを追加する方法を見てみましょう。 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="Facebook에 공유"
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> 必要に応じて この記事を参考にして Naver 共有ボタンとカカオ共有ボタンも追加できます。
3 Display Rules（表示ルール） タブをクリックして、 所在地から を選択します。
4 次に、ポストURLコピー機能を持つJavaScript（JavaScript）を追加します。 URLコピー機能を使用しない場合は、この手順をスキップしてください。以下のコードを使用すると、URL https://www.thewordcracker.com/?p=73298のような短縮形式でコピーされます。
새로운 「Hook」を作成し、 「Hook」에 wp_footerを選択します。
テキストボックスに次のJavaScript（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」はそのサイトのアドレスに置き換えます。 （私はこのコードを少し遅らせてロードしました。）
このコードがすべての投稿に対して表示されるように前に設定したのと同様 表示ルール タブに移動して 所在地에 投稿→すべての投稿を選択します。
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}上記の手順をすべて完了したら、今すぐ投稿にアクセスして共有ボタンが正常に機能していることを確認してください。
👉上記のコードはこのブログに適用されており、うまく動作しますが、使用環境によっては（特にキャッシュプラグインがインストールされている場合）、必要に応じて動作しない可能性もあります。
[スレッドの共有]ボタンをクリックすると、スレッドはその投稿を共有し、短いメッセージを一緒に入力できます。
最後に、
以上で WordPress サイトにスレッド共有ボタンを含める Facebook、X共有ボタンを追加する方法について説明しました。
韓国開発会社が作った韓国型ソーシャル共有プラグイン Korea SNSの場合、スレッド共有ボタンはまだサポートされていません。現在、1年以上アップデートができず、今後アップデートできない可能性もあるようです。
きちんとSNS共有ボタンを追加したい場合は、このプラグインを検討することができますが、サイトの速度には若干影響を与える可能性があります。
スレッド共有ボタン WordPressに追加する方法は非常に興味深いです！最近、SNSの使用が活発になり、さまざまなプラットフォームとの連動が重要になりましたが、このように簡単なコードで実装できるという便利なヒントですね。多くの人がこのボタンでコミュニケーションをより活発にすることができればと思います。
しかし、上部と下部に異なる共有ボタンを置くのはなぜですか？ユーザーエクスペリエンスの面でどんな効果を期待しているのか気になります！
上段に配置したボタンは以前から使ってきたのですが。特にURL https://www.thewordcracker.com/?p=73862 と同じ形式でコピーする機能のため表示しています。個人的に Naver カフェやカトクなどにURLをきれいな形式でコピーして共有するのに活用しています。下部にもURLコピーがあり、このコピーボタンでコピーするとURLが完全URLにコピーされます。ハングルURLがある場合、ハングル部分がエンコーディングのため壊れて見えます。この機能はURLをコピーしてGoogleサーチコンソールなど検索エンジンにページインデックスをリクエストする目的で個人的に使用しています。 😄
スレッド共有ボタンを直接コードとして追加する方法を共有してくれて本当に便利ですね！最近のスレッドユーザーが増え、SNS連携がさらに重要になると思います。上部にボタンを追加すると、ユーザーが簡単に共有できるようになりますが、実際に共有する割合はどうなりますか？
このようなソーシャルボタンがアクティブになれば、ユーザーがもっと頻繁に活用するように見えますが、もしどんなデザインや配置が効果的でしょうか？
簡単には WordPress用ソーシャルボタンプラグインをインストールすると（速度上少し悪いかもしれませんが）、まともなデザインのボタンを表示できるはずです。