- 公開日： 最終更新日：
ソーシャルボタンとは？種類と設置法、いらないと言われる理由
作成したページをSNSで手軽に共有できる便利な仕組みがソーシャルボタンです。多くのホームページやブログに設置され、SNSからのアクセスを増やす手段として活用されています。しかし、ソーシャルボタンの種類や設置方法が分からなかったり、本当に必要なのか疑問に思ったりする方も少なくありません。
本記事では、ソーシャルボタンの種類や設置方法、不要と言われる理由について解説します。
目次
ソーシャルボタンとは
ソーシャルボタンとは、ホームページ内のページを手軽にSNSで拡散できるボタンのことです。ちなみに似た言葉にSNSシェアボタンと呼ばれるものがあり、こちらはシェアに特化したボタンになります。ソーシャルボタンは、多くのWebサイトで導入されており、SNSからの流入を増やすための重要な要素となっています。
たとえば、当サイトではブログ記事の下部にシェアとツイート、はてブ、LINEなどのボタンを設置しており、これらがソーシャルボタンに該当します。
読者がワンクリックで簡単にコンテンツを共有できるため、SNSを活用しているユーザーに対して自然に情報を拡散できる仕組みです。特に、現在はSNSの影響力が大きくなっており、検索エンジンからの訪問者と同じくらいSNS経由のアクセスも多くなっています。
ソーシャルボタンを設置すれば、ホームページの認知度向上や新規顧客の獲得につながる可能性が高まります。
ソーシャルボタンの種類と設置法
多くのWebサイトで活用されているソーシャルボタンには、各SNSごとに異なる設置方法が用意されています。ここでは、主要なソーシャルボタンの設置方法について解説します。
Xのソーシャルボタン
Xでは、シェアボタン、フォローボタン、メンションボタン、ハッシュタグボタン、メッセージボタンの5種類のソーシャルボタンが設置できます。よく使用されるのは、シェアボタンとフォローボタンの2種類です。
作成方法は、Xが提供する公式ツールを利用すると便利です。
まず、ツールのページにアクセスし、少しスクロールしてX Buttonsを選択します。
設置したいボタンをクリックします。
そのままコードを取得できる場合もありますが、必要に応じて情報を入力すると、カスタマイズしたHTMLコードが生成されます。
他のボタンも同様の手順ですが、ここではシェアボタンをベースにした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>
このHTMLタグをそのまま使用すると、ボタンのサイズが小さい、投稿する文章を変更できないなどの課題が発生することがあります。そのため、状況に応じてカスタマイズを行います。
まず、ボタンを大きくしたい場合は、data-size="large"を追加します。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" data-size="large">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
また、デフォルトでは現在のページURLがシェアされますが、data-url="シェアしたいURL"を追加すると、特定のURLを設定できます。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" data-url="シェアしたいURL" class="twitter-share-button" data-show-count="false" data-size="large">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
シェア時のテキストを指定したい場合は、data-text="ポストしたい文章"を追加します。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" data-text="ポストしたい文章" class="twitter-share-button" data-show-count="false" data-size="large">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
カスタマイズすることで、サイトのデザインや目的に合わせたXのソーシャルボタンを設置できます。
Facebookのソーシャルボタン
Facebookでは、いいねボタン、シェアボタン、コメントプラグイン、グループプラグインの4種類のソーシャルボタンがあります。企業サイトなどでよく利用されるのは、いいねボタンとシェアボタンの2種類です。
Facebookのソーシャルボタンを設置する方法は、Meta社が提供する公式ツールを活用すると便利です。
基本的な利用方法として、シェアボタンの設置方法を紹介します。
まず、Facebookのソーシャルプラグイン一覧のページからシェアボタンを選択します。
次に、シェアするURL、レイアウト、ボタンサイズを記入・選択し、最後にコードを取得ボタンをクリックすると、HTMLコードが生成されます。
適切に設定することで、より使いやすいFacebookのソーシャルボタンを設置できます。
LINEのソーシャルボタン
LINEでは、LINEで送るというソーシャルボタンが提供されています。このLINEで送るボタンは特にBtoC企業でよく利用されています。
導入方法は、LINEの公式ツールを利用します。
上記のページにアクセスし、言語の選択、URLの設定、ボタンタイプ、サイズ、シェア数の選択を行い、LINE Social Pluginsガイドラインに同意すると、HTMLタグが生成されます。
さらに、LINEではカスタムアイコンを設定できるため、デザインに合わせたソーシャルボタンを設置できます。
pocketのソーシャルボタン
pocketでは、pocketというソーシャルボタンが提供されています。日本ではあまり馴染みがないかもしれませんが、気になる記事をpocketしておけば、後から読むことができます。
導入方法は、pocketの公式ツールを利用します。
上記のページにアクセスし、ボタンのデザインを選択すると、HTMLコードを取得できます。
また、pocketには、サイト運営者向けにPocket for Publishersという機能があります。Pocket for Publishersを活用すると、Pocketに保存された回数や、後で読まれた回数を集計できます。
企業がpocketを活用するなら、ぜひ導入したいツールです。詳しい登録方法は、GIGAZINEのPocketで自分の書いた記事がどれだけあとで読まれているかわかるPocket for Publishersの使い方が参考になります。
pinterestのソーシャルボタン
pinterestでは、フォローボタンとPin itボタンの2種類のソーシャルボタンが設置できます。
フォローボタンの設置方法は、公式サイトで確認できます。
まず、以下のJavaScriptを該当ページに記載します。
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js">
</script>
その後、以下のHTMLコードを記載します。
<a href="https://www.pinterest.com/<your-profile-here>/"
data-pin-do="buttonFollow">
Your profile name here
</a>
これでフォローボタンを設置できます。
次に、Pin itボタンの設置方法も、公式サイトで確認できます。
Pin itボタンも同様に、まずは以下のJavaScriptを記載します。ただし、すでにフォローボタンを設置している場合は不要です。
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js">
</script>
その後、以下のHTMLコードを記載します。
<a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"></a>
これでpinterestのフォローボタンとPin itボタンの設置が完了です。
はてなブックマークのソーシャルボタン
はてなブックマークでは、ブックマークというソーシャルボタンが提供されています。
ブックマークボタンの設置方法は、はてなブックマークの公式サイトを利用します。
ページにアクセスして、ボタンのデザイン、選択、確認を行い、HTMLコードをコピーします。
はてなブックマークは、自演ではSEO効果を得るのが難しいですが、SEOで成功しているホームページほど多くのブックマークを獲得しており、SEOに取り組む企業にとって導入すべきソーシャルボタンです。
Instagramにはソーシャルボタンがない
Instagramには、FacebookやXのようなソーシャルボタンが提供されていません。
その理由は、Instagramが外部サイトへの誘導ではなく、アプリ内でのエンゲージメントを重視しているためです。そのため、外部サイトからの直接シェアを許可していません。
WordPressでSNSシェアボタンを設置できるプラグイン
WordPressでは、プラグインを活用することで簡単にSNSシェアボタンを設置できます。ここでは、主要なプラグインを紹介します。
Jetpack
Jetpackには複数の種類があり、Jetpack – WP セキュリティ、バックアップ、高速化、成長が正式名称です。
Jetpackは、WordPress.comが提供する多機能なプラグインで、SNSシェアボタンの設置はもちろん、サイトのパフォーマンス向上やセキュリティ機能も搭載されています。FacebookやXなど、複数のSNSに対応したソーシャルボタンを簡単に設置できるのが特徴です。
また、RSSフィードやSNSログインを活用したコメント投稿機能も提供されており、ホームページの拡散力を高めるのに適しています。
SNSシェアボタン設置とともに、サイト全体の管理を効率化したい場合に便利なプラグインです。
AddToAny Share Buttonsは、対応するSNSの数が非常に多いのが特徴のプラグインです。Facebook、X、Pinterest、Google、WhatsApp、LinkedIn、Tumblr、Redditなど、100以上のソーシャルメディアに対応しており、あらゆるプラットフォームでコンテンツをシェアできます。
特に注目すべき点は、LINEのSNSシェアボタンを設置できることです。日本ではLINEのユーザー数が多く、情報拡散やシェアを促進する上で欠かせないSNSとなっているため、日本向けのホームページ制作では、このプラグインを活用することで、より多くのユーザーにコンテンツを届けることができます。
記事の上下に設置するstandardと、画面の端に固定表示するfloatingがあり、サイトのレイアウトに合わせて選択できます。ボタンのアイコンサイズも自由に設定できるため、デザインに最適化したSNSシェアボタンの設置が可能です。
Simple Share Buttons Adderは、個性的なデザインを使用できるSNSシェアボタンのプラグインです。
対応するソーシャルチャンネルの数は約17種類と少なめですが、豊富なデザインテンプレートが用意されているため、見た目にこだわりたい方に適しています。シンプルなデザインからカラフルなものまで、サイトの雰囲気に合ったボタンを選択できるのが特徴です。
ただし、LINEやはてなブックマークのシェアボタンには対応していないため、日本のユーザー向けにこれらのSNSを重視する場合は、別のプラグインと併用するのがよいでしょう。デザイン性を重視しつつ、必要なソーシャルボタンをカスタマイズしたい場合におすすめのプラグインです。
ソーシャルボタンがいらないと言われる理由
Web担当者フォーラムによると、スマートフォンユーザーのソーシャルボタンの利用率は低いとされています。
モバイルWebにソーシャルボタンは不要なの？だって、ぜんぜん使われてないじゃん！はこちら
その背景には、パソコンではSNSにログインしているが、スマートフォンではログインしていないユーザーが多いことが影響していると考えられます。このため、一部では、ソーシャルボタンはいらないのではないかとの意見もあります。
しかし、当社ではソーシャルボタンが完全に不要とは考えていません。理由は、ユーザーが記事を最後まで読んだ際に、次に興味を引くページがなければ、そのまま離脱してしまうことが挙げられます。このとき、ソーシャルボタンが設置されていれば、シェアするという選択肢を意識させる効果が期待できます。
また、現在のWebサイト運営ではSNSからの流入が増加しており、ソーシャルメディア対策は重要な集客手法の一つとなっています。SNSを活用した流入を強化するためにも、適切な位置にソーシャルボタンを設置することは、見込み顧客を獲得する上で有効な手段と言えます。
ソーシャルボタンのまとめ
本記事では、ソーシャルボタンについて解説しました。
ソーシャルボタンを設置するだけで大幅な集客が見込めるわけではありませんが、ホームページの流入経路として、検索エンジンに次いでSNSからのアクセスが重要であることは確かです。
ソーシャルボタンは必要なのか？と疑問に思っているWebマスターにとって、本記事が参考になれば幸いです。
