マーケティングコンテンツを多くの人にプロモーションする手段として、SNS（ソーシャルメディア）はとても効果的です。
しかし、SNSはいくつもありますし、コンテンツをシェアしたりアカウントをフォローしたりするためのボタンも多種多様です。何をしたいときにどのボタンを使えばよいのか、悩んでしまう人も多いと思います。
そこでこの記事では、5種類のSNS（Twitter、Facebook、LinkedIn、Google+、Pinterest）について、ウェブサイトや作成したブログ記事に設置できる各種ボタンの役割と具体的な設置方法を紹介していきます。また、SNSのフォローボタンとシェアボタンの違いについても説明します。
グローバル ソーシャル メディア最新動向レポート2023
知っておくべきSNSの最新動向が満載のレポートです。SNS活用のチャンスや課題など、最新データを確認しましょう。
- 2023年SNSにおけるトレンド上位10件
- 人気のSNSチャネル
- SNS投稿でパフォーマンスの高いコンテンツ
- エンゲージメントを高める投稿タイミング
今すぐダウンロードする
全てのフィールドが必須です。
フォローボタンとシェアボタンの違い
どの目的で何のボタンを配置すればよいかを理解するためには、SNSのフォローボタンとシェアボタンの違いをざっくり押さえておくことが第一歩です。その大枠さえわかれば、それぞれのSNSでいくつもあるボタンの細かな違いも理解しやすくなると思います。
いずれにせよ、ボタンの存在の目的はソーシャルプルーフであったり、フォロワーやファンを増やしてリーチを拡大することです。
では実際にボタンの違いを見ていきましょう。SNSのフォロワーやファンを増やしてリーチを拡大する方法を知りたい方はこちらの記事をどうぞ。
SNSのフォローボタン
フォローボタンは、あなたがSNSにアカウントを開設していることをサイトの利用者に知ってもらい、ファンやフォロワーになってもらうためのボタンです。
Twitterのフォローボタン、Facebookのフォローボタン、LinkedInの企業フォロープラグインなどが該当し、それぞれのSNSでのリーチ拡大につながります。
ボタンはサイト内のどこに置いてもよいのですが、少なくとも、会社概要ページと、ブログのトップページ/サイドバーには設置しておくことをお勧めします。
SNSのシェアボタン/リンク
シェアボタンは、あなたのサイトのコンテンツを、SNS上で友達やフォロワーに紹介してもらうためのボタンです。
Twitterのツイートボタン、Facebookのいいね！ボタンとシェアボタン、LinkedInのシェアボタンなどが該当します。また、シェアのためのハイパーリンクを作成できる場合もあります。
こうしたボタンやリンクを使うと、コンテンツのリーチを拡大して新たなオーディエンスを獲得でき、新規訪問者を呼び込みやすくなります。ランディングページ、ウェブページ、ブログの各記事、メールなど、作成するコンテンツすべてにボタンを設置しておくことをお勧めします。
この2つの違いを踏まえたうえで、5種類のSNSについて、主なボタンを個別に見ていきましょう。
難しかったり聞きなれないSNSの用語などがありましたらこちらの記事「【マーケティング担当者向け】SNS用語集」をどうぞ。
（なお、HubSpotのユーザーの方たちは、今回紹介するボタンのほとんどを、HubSpotのSNS（ソーシャルメディア）ツールで簡単に設置できます）。また、LineやPocketなどの異なるタイプのSNSボタンについてはこちらLIGさんの記事で解説があります。Twitter用のボタン
１. Twitterのフォローボタン
用途
Twitterのフォローボタンを設置しておくと、あなたのサイトから離れることなく、クリック1つであなたのアカウントをフォローしてもらうことができます。フォロワーを増やす素晴らしい手段です。
設置方法
https://twitter.com/about/resources/buttons#followを開いて、ボタンの対象アカウント（クリックしたときにフォローするアカウント）、サイズ、言語を設定します。あとは、表示されたHTMLコードをコピーして、あなたのサイトでボタンを設置したい場所に貼り付けるだけです。
実際の設置例がこちらです。ボタンをクリックして、TwitterでHubSpotをフォローしてみてください。
２. ツイート/シェアボタン
用途
ブログ記事、ランディングページ、そのほかのウェブページなど、あなたのサイトにあるコンテンツを、サイト利用者のフォロワーに紹介してもらうためのボタンです。これがあるとシェアが簡単になり、コンテンツのリーチ拡大につながります。実際、ツイートボタンを設置することでTwitter上の言及数が7倍にもなるとの調査結果もあります（関連記事はこちら：Using Social Sharing Buttons Leads to 7x More mentions [Data]）。
設置方法
https://twitter.com/about/resources/buttons#tweetを開き、ボタンの見た目、ツイートの内容とURL、言語、メンションするユーザー名、ハッシュタグなどを設定してください。リーチ拡大とフォロワー獲得につながるよう、あなたのTwitterユーザー名を含めたツイートにしておくことをお勧めします。
設定が済んだら、表示されたHTMLコードをコピーして、あなたのサイトでボタンを設置したい場所に貼り付ければ完了です。
実際の設置例がこちらです。ボタンをクリックして、このブログ記事についてツイートしてみてください。
３. Twitterのハッシュタグボタン
用途
現在あなたがプロモーションしているイベントやマーケティングキャンペーンに関連して、特定のハッシュタグでのツイートを促すときに役立つボタンです。対象のイベントやキャンペーンのページにボタンを設置して、その認知度とハッシュタグを広めましょう。
設置方法
https://twitter.com/about/resources/buttons#hashtagを開いて、ボタンの外観やハッシュタグなどを設定したうえで、HTMLコードをコピーして貼り付けるだけです。対象のイベントのサイトや登録ページなどにボタンを設置するとよいでしょう。
実際の設置例がこちらです。ボタンをクリックして、HubSpotのカンファレンス「INBOUND」についてツイートしてみてください。
４. Twitterのメンションボタン
用途
Twitter上であなたのアカウントに対するコミュニケーションを促すためのボタンです。あなたのサイトのお問い合わせページ、会社概要ページ、ヘルプページなどに設置しておきましょう。優れたカスタマーサポートになります（関連記事はこちら：Does customer Service Actually Work on Twitter? 5 Brands That Do It Well）。
設置方法
https://twitter.com/about/resources/buttons#mentionを開いて、ボタンの設定を行い、HTMLコードをあなたのサイトの目的の場所に貼り付けるだけです。
実際の設置例がこちらです。ボタンをクリックして、HubSpotに向けてメッセージをツイートしてみてください。
５. 事前指定した文面をツイートするテキストリンク
用途
ボタンではなく、テキスト形式のリンクからツイートできた方が便利な場面もあります。ハイパーリンクをクリックすると、特定の文面のツイートを投稿できるというものです。HubSpotでは、そのようなリンクをブログ記事で多用しています。
オファーを特定の文面でプロモーションするよう促したいときに、ランディングページの中でこうしたリンクを使うことがよくあります。また、ブログ記事、eBook、ホワイトペーパーなど、コンテンツ自体の中でもよく使います。公式のツイートボタンと同じで、あなたのサイトのコンテンツをシェアしてもらうときのツイートの文面を、マーケティングに適した内容で事前に指定できます。
設置方法
ツイートのテキストリンクは、無料のツールで簡単に作ることができます。http://clicktotweet.comを開き、ツイートの内容を入力したうえで、生成されたURLを、あなたのサイト上でテキストのハイパーリンク先として指定するだけです。ツイートには、プロモーションするコンテンツのURLを必ず入れておきましょう。
また、ツイートで使える文字数を増やすために、URLは短縮しましょう。（URL短縮にはbitlyが人気です）。さらに、あなたのアカウントのユーザー名をツイートに含めることも、リーチ拡大を図るうえで効果的です。
実際の設置例がこの下のリンクです。
（ハイパーリンクを設定するテキストの言葉は、自由に決められます）
６. Twitterのウィジェット
用途
Twitterには、投稿内容をリアルタイムで埋め込み表示できる公式ウィジェットがいくつかあります。
- ユーザータイムラインウィジェット：あなたのアカウントで最近ツイートした内容を表示できるウィジェットです。
- 検索ウィジェット：特定の検索結果をリアルタイムで表示できるウィジェットです。（たとえば、あなたの会社がプロモーションに使っているハッシュタグのツイートを表示するという使い方ができます）。
- いいねウィジェット：あなたのアカウントが「いいね」したツイートだけを表示できるウィジェットです。（たとえば、あなたの会社の製品を称賛するツイートだけに「いいね」をし、あなたのサイトの「利用者の声」ページにこのウィジェットを埋め込んでおくという使い方ができます）。
- コレクションウィジェット：特定のトピックに関するツイートを明示的に選択してして表示できるウィジェットです（参照ページはこちら："Collections | Twitter Developers"）。たとえば、あなたの会社で主催した年次イベントを高く評価しているツイートだけをピックアップして、あなたのサイトのイベントページにこのウィジェットを埋め込んでおくという使い方ができます。
- リストウィジェット：リストに登録しているユーザーのツイートだけを表示するウィジェットです。（たとえば、社員のTwitterアカウントをリストにまとめておいて、このウィジェットをあなたのサイトの人材募集ページに埋め込んでおくという使い方ができます）。
設置方法
https://twitter.com/settings/widgetsを開いて、「新規作成」をクリックしたら、ウィジェットの種類を選び、オプション、外観、サイズなどを設定してください。あとは、生成されたHTMLコードをコピーして、あなたのサイトの目的の場所に貼り付けるだけです。
実際の設置例がこちらです（ユーザータイムラインウィジェット）。
Facebook用のボタン
１. Facebookのフォローボタン（旧称：フィード購読ボタン）
用途
Facebookのフォローボタンは、Twitterのフォローボタンと同じような役割のボタンです。ワンクリックで、あなたのFacebookページに「いいね！」してもらうことができ、Facebookでのリーチ拡大につながります。ボタンには、これまでに獲得した「いいね！」の数と、そのユーザーの写真が表示されますので、ソーシャルプルーフを生かしてボタンの効果を高めることができます（関連記事はこちら：10 Ways to Instantly Amplifying the Social Proof of Your Marketing）。
設置方法
https://developers.facebook.com/docs/reference/plugins/follow/を開き、ボタンをカスタマイズしたら、コード（HTML5、XFBML、IFRAME、URLのいずれか）を生成して、あなたのサイトの目的の場所に貼り付けてください。
外観
実際の設置例がこちらです。ボタンをクリックして、FacebookでHubSpotをフォローしてみてください。
２. Facebookの送信ボタン
用途
Facebookの送信ボタンは、サイト上のコンテンツをメッセージで紹介してもらうためのボタンです。Facebookのメッセージ機能で特定の友達に送るか、Facebookのグループに投稿するか、特定のメールアドレスにメールで送るかのいずれかが可能です。ボタンに設定したURLへのリンクのほか、タイトル、画像、リンクの簡単な説明を記入して送信できます。
設置方法
https://developers.facebook.com/docs/reference/plugins/send/を開き、対象のURLとボタンのカスタマイズについて指定したら、コードを生成して、あなたのサイトの目的の場所に貼り付けるだけです（注：このボタンは、HTML5かXFBMLにのみ対応しています。また、JavaScript SDKを使用します）。
実際の設置例がこちらです。このブログ記事について送信してみてください。
３. Facebookのいいね！ボタン
用途
Facebookのいいね！ボタンでは、あなたのサイトにあるコンテンツへの支持や賛同を簡単に表明してもらい、シェアを促すことができます。あなたのサイトのブログ記事やランディングページを見たユーザーが、サイト上のいいね！ボタンをクリックすると、そのユーザーのタイムラインや友達のフィードにそのことが表示されます。
ただし、このボタンから共有するリンクには、ユーザーがコメントを加えたりはできない点に注意してください。それを可能にしたい場合は、次に説明するシェアボタンを使ってください。
設置方法
https://developers.facebook.com/docs/reference/plugins/like/を開き、ボタンのカスタマイズについて指定したら、コード（HTML5、XFBML、IFRAME、URLのいずれか）を生成して、あなたのサイトの目的の場所に貼り付けてください。
外観
実際の設置例がこちらです。ボタンをクリックして、このブログ記事に「いいね！」してみてください。
４. Facebookのシェアボタン
用途
Facebookのシェアボタンは、いいね！ボタンと同じように、ユーザー本人のタイムラインとその友達のフィードを通じてコンテンツを共有してもらえる機能ですが、いいね！ボタンと違うのは、リンクにコメントやメッセージを添えられる点です。また、Facebookのグループでシェアしたり、Facebookのメッセージで特定のユーザーに伝えたりといったこともできます。
設置方法
https://developers.facebook.com/docs/plugins/share-buttonを開いて、対象のURLとボタンのカスタマイズについて指定したら、コードを生成して、あなたのサイトの目的の場所に貼り付けてください。（注：このボタンは、HTML5かXFBMLにのみ対応しています。また、JavaScript SDKを使用します）。
実際の設置例がこちらです。ボタンをクリックして、このブログ記事をシェアしてみてください。
５. Facebookのシェア用テキストリンク
用途
Facebookの公式シェアボタンではなく、通常のテキストのハイパーリンクからコンテンツをシェアできるようにしたい場合もあるかもしれません。実はそのようなリンクの作成は簡単です。ウェブページやブログ記事、ランディングページのほか、eBookやホワイトペーパーといったコンテンツでも使えます。
設置方法
Facebookでコンテンツをシェアするためのテキストリンクを作成するには、下のURLでオレンジ色になっている部分を、シェア対象のコンテンツのURLに変えるだけです。あとは、下のURL全体を、テキストのハイパーリンク先として指定してください。
http://www.facebook.com/share.php?u=http://bit.ly/vOKpgC
実際の設置例がこの下のリンクです。
そのほかのFacebook用ボタン：今回の記事では、使用頻度が高い主なボタンだけを紹介していますが、Facebookの公式ボタンはほかにもあります。https://developers.facebook.com/docs/plugins/でご確認ください。
LinkedIn用のボタン
１. LinkedInの企業フォロープラグイン
用途
LinkedInの企業フォロープラグインは、TwitterやFacebookのフォローボタンと同じような役割です。LinkedInの会社ページを簡単にフォローしてもらうことができ、LinkedInでのリーチ拡大につながります。
設置方法
https://developer.linkedin.com/plugins/follow-companyを開き、ボタンを設定してください。ボタンのスタイルがいくつかあり、フォロワー数の表示位置（上、右、なし）のオプションもあります。あとはコードをコピーして、サイトに貼り付けるだけです。
外観
実際の設置例がこちらです。ボタンをクリックして、LinkedInでHubSpotをフォローしてみてください。
２. LinkedInの企業プロフィールプラグイン
用途
単なるフォローボタンではなく、自社についてもう少し詳しく紹介したい場合は、企業プロフィールプラグインはいかがでしょう。フォローの機能に加えて、会社の簡単な紹介文、所在地、ロゴ、社員数をコンパクトに表示できます。
設置方法
https://developer.linkedin.com/plugins/company-profile-pluginを開いて、設定を行ってください。社名を入力し、表示モードを選択します。表示モードには、すべてをインラインで表示するモード（下の例を参照）と、シンプルなフォローボタンからのホバー表示で会社情報を表示するモードがあります。
また、LinkedInでの社員のつながりを表示するかどうかも設定できます。あとは、コードをコピーして、サイトに貼り付けてください。
実際の設置例がこちらです（インライン表示のモードにした場合）。
参考：パーソナルブランドの場合は、LinkedInのメンバープロフィールプラグインを同じような用途に使えます。こちらから作成可能です（参照ページはこちら：Member Profile Plugin Generator）。
３. LinkedInのシェアボタン
用途
LinkedInのシェアボタンを設置しておくと、ブログ記事やランディングページなど、あなたのサイトのコンテンツをLinkedIn上で簡単にシェアしてもらうことができます。Facebookのいいね！ボタンやシェアボタン、Twitterのツイートボタンと同じで、LinkedInのオーディエンスに対してコンテンツのリーチを拡大でき、あなたのサイトにトラフィックを呼び込みます。
設置方法
hhttps://developer.linkedin.com/plugins/shareを開いて、対象のURLを指定し、ボタンのスタイルを設定します。企業フォロープラグインと同じで、シェア件数の表示方法（上、右、なし）を変えられます。あとは、コードを生成してコピーし、あなたのサイトでボタンを表示したい位置に貼り付けてください。
外観
実際の設置例がこちらです。ボタンをクリックして、このブログ記事をシェアしてみてください。
そのほかのLinkedIn用ボタン：今回の記事では、使用頻度が高い主なボタンだけを紹介していますが、LinkedInの公式ボタンはほかにもあります。http://developer.linkedin.com/pluginsでご確認ください。
Google+用のボタン
１. Google+のフォローボタン
用途
Google+のフォローボタンでは、利用者があなたの会社のページやプロフィールをGoogle+のサークルにその場で追加できます。サイトにこのボタンを設置しておくと、Google+での存在感を高め、ページのフォロワーを増やすことができ、リーチの拡大につながります。
設置方法
https://developers.google.com/+/web/follow/を開いて、対象のGoogle+ページかプロフィールを選択し、ボタンのサイズやフォロワー数の表示位置（上、右、なし）を設定してください。あとは、コードをコピーして、サイト上でボタンを表示したい場所に貼り付けるだけです。
外観
実際の設置例がこちらです。ボタンをクリックして、HubSpotをGoogle+のサークルに追加してみてください。
２. Google+バッジ
用途
Google+バッジは、LinkedInの企業プロフィールプラグインと同じような役割をするものです。サークルへの追加だけでなく、もう少し詳しい情報を表示できます。
設置方法
https://developers.google.com/+/web/badge/を開いて、個人か会社のアカウントを選び、スタイルを選びます。G+マークのシンプルなアイコン（アイコンと社名のみのボタン）か、詳細なバッジかのどちらかです。
さらにバッジの場合は、レイアウトの向き（縦向きの方が多くの情報を表示できます）、幅、色のテーマ、カバー写真とキャッチフレーズの表示有無を選択します。あとは、コードをコピーして目的の場所に貼り付けるだけです。
実際の設置例がこちらです。（バッジ、縦向きの場合）
３. +１ボタン
用途
サイトのコンテンツに+１ボタンを設置しておくと、利用者がそのコンテンツへの「+１」（共感やお気に入りの表明）を簡単に行うことができます。Google+でのシェアを促して、コンテンツのリーチを拡大でき、サイトにトラフィックを呼び込むことができます。
設置方法
http://www.google.com/webmasters/+1/button/を開いて、+１ボタンをカスタマイズしてください。+１情報の表示方法（インライン、バルーン、なし）などを設定できます。+１の対象となるURLは「詳細オプション」で指定します。あとは、コードを生成して貼り付けるだけです。
外観
実際の設置例がこちらです。ボタンをクリックして、このブログ記事を+１してみてください。
４. Google+の共有ボタン
用途
Google+の共有ボタンは、コンテンツをシェアできるという意味では+１ボタンとよく似ていますが、支持や賛同の+１を表明しないという点が異なります。Google+の説明によると、このボタンは、議論を呼びそうなコンテンツやニュースなど、ユーザーが+１せずに共有したいと思うコンテンツに適しているとのことです。
設置方法
https://developers.google.com/+/web/share/を開き、ボタンを設定します。+１ボタンと同じように、件数の表示方法などを指定できます。対象のURLは詳細オプションで指定してください。あとは、コードを生成して貼り付けるだけです。
外観
実際の設置例がこちらです。ボタンをクリックして、このブログ記事をシェアしてみてください。
５. Google+のシェア用テキストリンク
用途
FacebookやTwitterの場合と同じように、Google+でコンテンツをシェアするためのハイパーリンクも簡単に作成できます。+１ボタンと同様の働きをするテキストリンクです。ひとまとまりのコンテンツの中で紹介している個別の要素をシェアできるようにしたい場合に便利です。
設置方法
Google+でコンテンツをシェアするためのテキストリンクを作成するには、下のURLでオレンジ色になっている部分を、シェア対象のコンテンツのURLに変えるだけです。あとは、下のURL全体を、テキストのハイパーリンク先として指定してください。
https://plusone.google.com/_/+1/confirm?hl=en&url=http%3A%2F%2F%20http://bit.ly/vOKpgC
利用者がこのリンクをクリックすると、そのコンテンツに+１したことになります。さらに、+１ボタンと同じように、コメントを追加してから共有することもできます。
実際の設置例がこの下のリンクです。
Pinterest用のボタン
１. Pinterestのフォローボタン
用途
ほかのSNSと同じように、Pinterestにもフォローボタンがあります。Pinterestでの存在感を高め、新しいフォロワーを獲得できます。
設置方法
http://business.pinterest.com/widget-builder/#do_follow_me_buttonを開いて、PinterestアカウントのURLと名前を指定します。あとはコードを生成し、サイトに貼り付けるだけです。
実際の設置例がこちらです。ボタンをクリックして、PinterestでHubSpotをフォローしてみてください。
２. ”ピン”ボタン
用途
ほかのSNSで言うシェアボタンにあたるボタンです。Pinterestでコンテンツをシェアしてもらい、リーチを拡大できます。画像やインフォグラフィックなど、視覚的なコンテンツの横に表示するのに適しています。
設置方法
http://business.pinterest.com/widget-builder/#do_pin_it_buttonを開いて、ボタンを設定します。画像を含むページのURL、画像自体のURL、簡単な説明を指定してください。ピン数の表示位置（右、上、なし）も設定できます。あとは、コードをコピーして貼り付けるだけです。
外観
実際の設置例がこちらです。ボタンをクリックして、このブログ記事をシェアしてみてください。
)
そのほかのPinterest用ウィジェット：アカウントのピンをプレビュー表示するプロフィールウィジェット、特定のボードの内容を表示するボードウィジェット、特定のピンを表示するピンウィジェットがあり、いずれもhttps://business.pinterest.com/en/widget-builderから作成できます。
HubSpot（ハブスポット）の機能ではデフォルトでSNSボタンが配置されています。実際にSNSの運用管理や投稿ツールをお探しの方はこちらへどうぞ。
いかがでしたか？SNSはボタンの設置やフォロワーの拡大の必要性な行うことが多く存在します。ソーシャルアイコンを含めた無料135アイコン集もご用意していますので、デザイン制作などのお時間のない方は是非ご利用ください。
編集メモ：この記事は、2014年10月に投稿した内容に加筆・訂正したものです。Pamela Vaughanによる元の記事はこちらからご覧いただけます。
