- 公開日： 最終更新日：
ソーシャルボタンの種類と設置法、いらないと言われる理由
作成したWebページをソーシャルメディアで手軽に共有できる便利な仕組みがソーシャルボタンです。多くのホームページやブログに設置され、ソーシャルメディアからのアクセスを増やす手段として活用されています。
一方で、「種類がよく分からない」「どう設置すればいいのか迷う」「そもそも必要なの？」といった疑問を持つ方も少なくありません。
本記事では、ソーシャルボタンの種類や設置方法、そしていらないと言われる理由について解説します。
目次
ソーシャルボタンとは
ソーシャルボタンとは、Webページを手軽にソーシャルメディアでシェアしたり、リアクションを取ったりできるボタンのことです。たとえば、「いいね」「フォロー」「ブックマーク」などが含まれます。
ちなみに、よく似た言葉にSNSシェアボタンと呼ばれるものがあり、こちらはページの内容をSNSに投稿して広めることに特化したボタンです。代表的なものに、「ツイート」「LINEで送る」「シェア」などがあります。
つまり、SNSシェアボタンは拡散に特化したボタンであり、ソーシャルボタンはその要素に加えて、ソーシャルメディア上でのリアクションや保存など、さまざまなアクションが行えるボタンの総称です。
ソーシャルボタンは、多くのホームページで導入されており、ソーシャルメディアからの流入を増やすための重要な要素となっています。当サイトでもブログ記事の下部に「シェア」「ツイート」「はてブ」「LINE」のソーシャルボタンを設置し、アクセス向上を狙っています。
特に、現在はソーシャルメディアの影響力が大きくなっており、検索エンジンからの訪問者と同じくらいソーシャルメディア経由のアクセスが多くなっています。
ソーシャルボタンを設置すれば、ホームページの認知度向上や新規顧客の獲得につながる可能性が高まります。
ソーシャルボタンの種類と設置法
多くのホームページで活用されているソーシャルボタンには、各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シェアボタンを設置できます。なお、紹介するのはSNSシェアボタンであり、ソーシャルボタンではありません。ここでは、主要なプラグインを紹介します。
Jetpack
Jetpackには複数の種類があり、Jetpack – WPセキュリティ、バックアップ、高速化、成長が正式名称です。
Jetpackは、WordPressが公式に提供する多機能なプラグインで、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やはてなブックマークのシェアボタンには対応していないため、日本のユーザー向けにこれらのソーシャルメディアを重視する場合は、別のプラグインと併用するのがよいでしょう。デザイン性を重視しつつ、必要なソーシャルボタンをカスタマイズしたい場合におすすめのプラグインです。
ソーシャルボタンを設置するメリット
ソーシャルボタンを設置することで、検索エンジン以外の経路からもホームページへの流入が見込めます。ここでは、具体的な4つのメリットを解説します。
SNSからの流入増加
ソーシャルボタンがあると、訪問者が気に入ったコンテンツを自身のSNSで簡単にシェアできます。これにより、その人のフォロワーや知人にコンテンツが届き、新たな訪問者の流入につながります。
特にXやFacebookのようなSNSは、不特定多数への拡散力が高く、多くの人に一気に情報を届けるのに適しています。一方、LINEは、信頼関係のある相手に直接情報を届けられるため、クローズドな環境での高い反応率が期待できます。
拡散による認知向上
コンテンツがSNSでシェアされることで、多くの人の目に触れる機会が増えます。ホームページへのアクセスがなくても、企業名やサービス名が広まり、じわじわと認知度を高めていくことができます。
シェアされた情報は、フォロワーといった身近なつながりを通じて広まるため、宣伝色が薄く、自然に受け入れられやすいのが特徴です。
再訪問を促せる
ソーシャルボタンには、「後で読む」や「ブックマーク」など保存系のアクションができるものもあります。
ユーザーが一度離れても、保存していれば後から再訪のきっかけになり、継続的なアクセスを生み出せます。
信頼性や共感の可視化
「いいね」や「シェア」などの数が表示されるタイプのソーシャルボタンを使えば、そのコンテンツがどれだけ支持されているかを可視化できます。
第三者からの評価が見えることで、初めて訪れたユーザーにも信頼や共感が伝わりやすくなり、読了率やコンバージョン率の向上につながります。
ソーシャルボタンがいらないと言われる理由
Web担当者フォーラムによると、スマートフォンユーザーのソーシャルボタンの利用率は低いとされています。
モバイルWebにソーシャルボタンは不要なの？だって、ぜんぜん使われてないじゃん！はこちら
その背景には、パソコンではSNSにログインしているが、スマートフォンではログインしていないユーザーが多いことが影響していると考えられます。そのため、一部では、ソーシャルボタンはいらないのではないかとの意見があります。
しかし、当社ではソーシャルボタンが完全に不要とは考えていません。理由は、ユーザーが記事を最後まで読んだ際に、次に興味を引くページがなければ、そのまま離脱してしまうことが挙げられます。このとき、ソーシャルボタンが設置されていれば、シェアするという選択肢を意識させる効果が期待できます。
また、現在のホームページ運営ではSNSからの流入が増加しており、ソーシャルメディア対策は重要な集客手法の一つとなっています。ソーシャルメディアを活用した流入を強化するためにも、適切な位置にソーシャルボタンを設置することは、見込み顧客を獲得する上で効果的な手段と言えます。
まとめ：ソーシャルボタンは流入対策として効果的
本記事では、ソーシャルボタンの種類や設置方法、いらないと言われる理由までを解説してきました。
ソーシャルボタンを設置したからといってすぐに多くのアクセスが集まるわけではありませんが、検索エンジンに加え、ソーシャルメディアからの流入を促す手段として効果的です。
ホームページの認知度を高めたり、コンテンツを多くの人に届けたい方は、目的やデザインに合わせてソーシャルボタンを上手に活用してください。
