ブログとSNSの連携強化:X(旧Twitter)シェアボタン設置・カスタマイズ方法

ブログ制作

今回の記事ではX(旧Twitter)のシェアボタン設置方法・カスタマイズ方法を解説していきます。

ブログ運営も以前のようなSEOによる検索流入だけではなく、SNSからの流入も取り込まなければ戦えなくなりつつあります。
ブログとSNSはセットで運用するのが必須の時代となりました。

そんな中、SNSでコンテンツをシェア・拡散してくれる人の存在は本当にありがたいものです。
そして、シェアを促す意味でも、シェアしてくれる人の手間を少しでも省く意味でも、シェアボタンの設置は大きな効果があります。

特にX(旧Twitter)はリポスト(リツイート)による拡散機能が強力ですので、うまく利用できれば大きな効果が期待できます。

X(旧Twitter)のシェアボタンを設置する方法

X(旧Twitter)のシェアボタンを設置するには、以下の基本コードをhtml内に貼り付けます。

【基本コード】

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

シェアボタンが設置されました

WordPressに設置する場合は…

記事のブロックや、ウィジェットの中に「カスタムhtml」というものがあります。
シェアボタンを設置したい場所にまずはこの「カスタムhtml」を配置し、そこに先述の基本コードを貼り付けます。

WordPressには備え付けのシェアボタンがあるので、追加で配置することはあまりないかもしれませんが…
任意の位置に配置したい場合、カスタマイズしたい場合などに活用ください。

シェアボタンのカスタマイズ方法

先述の基本コードに、以下のコードを追加することでさまざまなカスタマイズが可能です。
基本コードの――

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" 〇〇〇>Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

〇〇〇の部分に追記します。
複数追加する場合は前後のコードと繋がってしまわないよう、間に半角スペースを入れることに注意してください。

【追加コード】

data-text="文章"シェア時に表示される文章の設定。
初期設定ではその記事のタイトルが表示されるように設定されている。
data-url="URL"シェア時に表示されるリンク先URLの設定。
初期設定ではその記事のURLが設定されている。
data-via="XのユーザーID"シェアの内容に、自身のXユーザーIDが記載されるようになる。
data-hashtags="ハッシュタグ"シェアの内容に、任意のハッシュタグが記載されるようになる。
data-related="XのユーザーID"設定したユーザーIDが、シェア後に「おすすめユーザー」として表示される。
data-size="large"シェアボタンのサイズが大きくなります。
data-lang="ja"表示言語の設定。
設定しなくても自動で日本語になるはずですが、
「なぜか勝手に他の言語になる」みたいな場合は="ja"を設定すれば日本語設定になります。

自由にカスタマイズできるけど…気持ちよくシェアして貰えるように

自由にカスタマイズできるとはいえ、シェア設定に「自身が発信したいこと」を組み込みすぎるのは考えものです。

なにせ、最終的に投稿するのはあなたではなく、シェアしてくれる人です。
その人が、「え、こんな内容…」とシェアを取り止めてしまっては元も子もありません。

【私が思わずシェアを取り止めた設定】
 × 「**系ブロガーの〇〇 | 月間**PV | 公式LINEグループはこちら」
   この記事はシェアしたいと思ったけど、あんたのことは知らんがな…

 × 「**では現在〇〇を開催中!週末はみんなも**へ出掛けよう~(^^♪」
   このノリの発信をするのは恥ずかしい…

そもそも、単純にシェアをしてくれるだけでもとてもありがたいものです。
あまり欲張りすぎず、気持ちよくシェアして貰えるようなシェア設定にするようにしましょう。

よくある活用例としては、
「ミニゲームで達成したスコア」や「診断アプリの結果」などをシェアできるように設定しているケースが挙げられます。
シェア機能を活用している好例だと思います。
単純にシェアを促すだけではなく、このようにひと工夫加えてシェアしたくなる内容にカスタマイズできるとより効果的です。

コメント

タイトルとURLをコピーしました