ボタンはサイト内のどこに置いてもよいのですが、少なくとも、会社概要ページと、ブログのトップページ/サイドバーには設置しておくことをお勧めします。Twitterのツイートボタン、Facebookのいいね!ボタンとシェアボタン、LinkedInのシェアボタンなどが該当します。シェアのためのハイパーリンクを作成できる場合もあります。したボタンやリンクを使うと、コンテンツのリーチを拡大して新たなオーディエンスを獲得でき、新規訪問者を呼び込みやすくなります。ランディングページ、ウェブページ、ブログの各記事、メールなど、作成するコンテンツすべてにボタンを設置しておくことをお勧めします。この2つの違いを踏まえたうえで、5種類のSNSについて、主なボタンを個別に見ていきましょう。(なお、HubSpotのユーザーの方たちは、今回紹介するボタンのほとんどを、HubSpotのソーシャルメディアツールで簡単に設置できます)。Twitter用のボタン1)Twitterのフォローボタン用途Twitterのフォローボタンを設置しておくと、あなたのサイトから離れることなく、クリック1つであなたのアカウントをフォローしてもらうことができます。フォロワーを増やす素晴らしい手段です。設置方法https://twitter.com/about/resources/buttons#followを開いて、ボタンの対象アカウント(クリックしたときにフォローするアカウント)、サイズ、言語を設定します。あとは、表示されたHTMLコードをコピーして、あなたのサイトでボタンを設置したい場所に貼り付けるだけです。実際の設置例がこちらです。ボタンをクリックして、TwitterでHubSpotをフォローしてみてください。@HubSpot2)ツイート/シェアボタン用途ブログ記事、ランディングページ、そのほかのウェブページなど、あなたのサイトにあるコンテンツを、サイト利用者のフォロワーに紹介してもらうためのボタンです。これがあるとシェアが簡単になり、コンテンツのリーチ拡大につながります。設置方法https://twitter.com/about/resources/buttons#tweetを開き、ボタンの見た目、ツイートの内容とURL、言語、メンションするユーザー名、ハッシュタグなどを設定してください。リーチ拡大とフォロワー獲得につながるよう、あなたのTwitterユーザー名を含めたツイートにしておくことをお勧めします。設定が済んだら、表示されたHTMLコードをコピーして、あなたのサイトでボタンを設置したい場所に貼り付ければ完了です。実際の設置例がこちらです。ボタンをクリックして、このブログ記事についてツイートしてみてください。現在あなたがプロモーションしているイベントやマーケティングキャンペーンに関連して、特定のハッシュタグでのツイートを促すときに役立つボタンです。対象のイベントやキャンペーンのページにボタンを設置して、その認知度とハッシュタグを広めましょう。設置方法https://twitter.com/about/resources/buttons#hashtagを開いて、ボタンの外観やハッシュタグなどを設定したうえで、HTMLコードをコピーして貼り付けるだけです。対象のイベントのサイトや登録ページなどにボタンを設置するとよいでしょう。実際の設置例がこちらです。ボタンをクリックして、HubSpotのカンファレンス「INBOUND」についてツイートしてみてください。#INBOUND154)Twitterのメンションボタン用途Twitter上であなたのアカウントに対するコミュニケーションを促すためのボタンです。あなたのサイトのお問い合わせページ、会社概要ページ、ヘルプページなどに設置しておきましょう。設置方法https://twitter.com/about/resources/buttons#mentionを開いて、ボタンの設定を行い、HTMLコードをあなたのサイトの目的の場所に貼り付けるだけです。実際の設置例がこちらです。ボタンをクリックして、HubSpotに向けてメッセージをツイートしてみてください。@HubSpot5)事前指定した文面をツイートするテキストリンク用途ボタンではなく、テキスト形式のリンクからツイートできた方が便利な場面もあります。ハイパーリンクをクリックすると、特定の文面のツイートを投稿できるというものです。HubSpotでは、そのようなリンクをブログ記事で多用しています。オファーを特定の文面でプロモーションするよう促したいときに、ランディングページの中でこうしたリンクを使うことがよくあります。ブログ記事、eBook、ホワイトペーパーなど、コンテンツ自体の中でもよく使います。公式のツイートボタンと同じで、あなたのサイトのコンテンツをシェアしてもらうときのツイートの文面を、マーケティングに適した内容で事前に指定できます。設置方法ツイートのテキストリンクは、無料のツールで簡単に作ることができます。http://clicktotweet.comを開き、ツイートの内容を入力したうえで、生成されたURLを、あなたのサイト上でテキストのハイパーリンク先として指定するだけです。ツイートには、プロモーションするコンテンツのURLを必ず入れておきましょう。ツイートで使える文字数を増やすために、URLは短縮しましょう。(URL短縮にはbitlyが人気です)。あなたのアカウントのユーザー名をツイートに含めることも、リーチ拡大を図るうえで効果的です。実際の設置例がこの下のリンクです。Article!6)Twitterのウィジェット用途Twitterには、投稿内容をリアルタイムで埋め込み表示できる公式ウィジェットがいくつかあります。ユーザータイムラインウィジェット:あなたのアカウントで最近ツイートした内容を表示できるウィジェットです。検索ウィジェット:特定の検索結果をリアルタイムで表示できるウィジェットです。(たとえば、あなたの会社がプロモーションに使っているハッシュタグのツイートを表示するという使い方ができます)。いいねウィジェット:あなたのアカウントが「いいね」したツイートだけを表示できるウィジェットです。(たとえば、あなたの会社の製品を称賛するツイートだけに「いいね」をし、あなたのサイトの「利用者の声」ページにこのウィジェットを埋め込んでおくという使い方ができます)。Developers")。あなたの会社で主催した年次イベントを高く評価しているツイートだけをピックアップして、あなたのサイトのイベントページにこのウィジェットを埋め込んでおくという使い方ができます。リストウィジェット:リストに登録しているユーザーのツイートだけを表示するウィジェットです。(たとえば、社員のTwitterアカウントをリストにまとめておいて、このウィジェットをあなたのサイトの人材募集ページに埋め込んでおくという使い方ができます)。設置方法https://twitter.com/settings/widgetsを開いて、「新規作成」をクリックしたら、ウィジェットの種類を選び、オプション、外観、サイズなどを設定してください。あとは、生成されたHTMLコードをコピーして、あなたのサイトの目的の場所に貼り付けるだけです。実際の設置例がこちらです(ユーザータイムラインウィジェット)。@HubSpotFacebook用のボタン1)Facebookのフォローボタン(旧称:フィード購読ボタン)用途Facebookのフォローボタンは、Twitterのフォローボタンと同じような役割のボタンです。ワンクリックで、あなたのFacebookページに「いいね!」してもらうことができ、Facebookでのリーチ拡大につながります。Marketing)。設置方法https://developers.facebook.com/docs/reference/plugins/follow/を開き、ボタンをカスタマイズしたら、コード(HTML5、XFBML、IFRAME、URLのいずれか)を生成して、あなたのサイトの目的の場所に貼り付けてください。実際の設置例がこちらです。ボタンをクリックして、FacebookでHubSpotをフォローしてみてください。2)Facebookの送信ボタン用途Facebookの送信ボタンは、サイト上のコンテンツをメッセージで紹介してもらうためのボタンです。Facebookのメッセージ機能で特定の友達に送るか、Facebookのグループに投稿するか、特定のメールアドレスにメールで送るかのいずれかが可能です。ボタンに設定したURLへのリンクのほか、タイトル、画像、リンクの簡単な説明を記入して送信できます。設置方法https://developers.facebook.com/docs/reference/plugins/send/を開き、対象のURLとボタンのカスタマイズについて指定したら、コードを生成して、あなたのサイトの目的の場所に貼り付けるだけです(注:このボタンは、HTML5かXFBMLにのみ対応しています。SDKを使用します)。実際の設置例がこちらです。このブログ記事について送信してみてください。3)Facebookのいいね!ボタン用途Facebookのいいね!ボタンでは、あなたのサイトにあるコンテンツへの支持や賛同を簡単に表明してもらい、シェアを促すことができます。あなたのサイトのブログ記事やランディングページを見たユーザーが、サイト上のいいね!ボタンをクリックすると、そのユーザーのタイムラインや友達のフィードにそのことが表示されます。このボタンから共有するリンクには、ユーザーがコメントを加えたりはできない点に注意してください。それを可能にしたい場合は、次に説明するシェアボタンを使ってください。設置方法https://developers.facebook.com/docs/reference/plugins/like/を開き、ボタンのカスタマイズについて指定したら、コード(HTML5、XFBML、IFRAME、URLのいずれか)を生成して、あなたのサイトの目的の場所に貼り付けてください。実際の設置例がこちらです。ボタンをクリックして、このブログ記事に「いいね!」してみてください。4)Facebookのシェアボタン用途Facebookのシェアボタンは、いいね!ボタンと同じように、ユーザー本人のタイムラインとその友達のフィードを通じてコンテンツを共有してもらえる機能ですが、いいね!ボタンと違うのは、リンクにコメントやメッセージを添えられる点です。Facebookのグループでシェアしたり、Facebookのメッセージで特定のユーザーに伝えたりといったこともできます。設置方法https://developers.facebook.com/docs/plugins/share-buttonを開いて、対象のURLとボタンのカスタマイズについて指定したら、コードを生成して、あなたのサイトの目的の場所に貼り付けてください。(注:このボタンは、HTML5かXFBMLにのみ対応しています。SDKを使用します)。実際の設置例がこちらです。ボタンをクリックして、このブログ記事をシェアしてみてください。5)Facebookのシェア用テキストリンク用途Facebookの公式シェアボタンではなく、通常のテキストのハイパーリンクからコンテンツをシェアできるようにしたい場合もあるかもしれません。実はそのようなリンクの作成は簡単です。ウェブページやブログ記事、ランディングページのほか、eBookやホワイトペーパーといったコンテンツでも使えます。設置方法Facebookでコンテンツをシェアするためのテキストリンクを作成するには、下のURLでオレンジ色になっている部分を、シェア対象のコンテンツのURLに変えるだけです。あとは、下のURL全体を、テキストのハイパーリンク先として指定してください。http://www.facebook.com/share.php?u=http://bit.ly/vOKpgC実際の設置例がこの下のリンクです。Facebook!そのほかのFacebook用ボタン:今回の記事では、使用頻度が高い主なボタンだけを紹介していますが、Facebookの公式ボタンはほかにもあります。https://developers.facebook.com/docs/plugins/でご確認ください。LinkedIn用のボタン1)LinkedInの企業フォロープラグイン用途LinkedInの企業フォロープラグインは、TwitterやFacebookのフォローボタンと同じような役割です。LinkedInの会社ページを簡単にフォローしてもらうことができ、LinkedInでのリーチ拡大につながります。設置方法https://developer.linkedin.com/plugins/follow-companyを開き、ボタンを設定してください。ボタンのスタイルがいくつかあり、フォロワー数の表示位置(上、右、なし)のオプションもあります。あとはコードをコピーして、サイトに貼り付けるだけです。実際の設置例がこちらです。ボタンをクリックして、LinkedInでHubSpotをフォローしてみてください。単なるフォローボタンではなく、自社についてもう少し詳しく紹介したい場合は、企業プロフィールプラグインはいかがでしょう。フォローの機能に加えて、会社の簡単な紹介文、所在地、ロゴ、社員数をコンパクトに表示できます。設置方法https://developer.linkedin.com/plugins/company-profile-pluginを開いて、設定を行ってください。社名を入力し、表示モードを選択します。表示モードには、すべてをインラインで表示するモード(下の例を参照)と、シンプルなフォローボタンからのホバー表示で会社情報を表示するモードがあります。LinkedInでの社員のつながりを表示するかどうかも設定できます。あとは、コードをコピーして、サイトに貼り付けてください。実際の設置例がこちらです(インライン表示のモードにした場合)。参考:パーソナルブランドの場合は、LinkedInのメンバープロフィールプラグインを同じような用途に使えます。Generator)。3)LinkedInのシェアボタン用途LinkedInのシェアボタンを設置しておくと、ブログ記事やランディングページなど、あなたのサイトのコンテンツをLinkedIn上で簡単にシェアしてもらうことができます。Facebookのいいね!ボタンやシェアボタン、Twitterのツイートボタンと同じで、LinkedInのオーディエンスに対してコンテンツのリーチを拡大でき、あなたのサイトにトラフィックを呼び込みます。設置方法hhttps://developer.linkedin.com/plugins/shareを開いて、対象のURLを指定し、ボタンのスタイルを設定します。企業フォロープラグインと同じで、シェア件数の表示方法(上、右、なし)を変えられます。あとは、コードを生成してコピーし、あなたのサイトでボタンを表示したい位置に貼り付けてください。実際の設置例がこちらです。ボタンをクリックして、このブログ記事をシェアしてみてください。そのほかのLinkedIn用ボタン:今回の記事では、使用頻度が高い主なボタンだけを紹介していますが、LinkedInの公式ボタンはほかにもあります。http://developer.linkedin.com/pluginsでご確認ください。Google+用のボタン1)Google+のフォローボタン用途Google+のフォローボタンでは、利用者があなたの会社のページやプロフィールをGoogle+のサークルにその場で追加できます。サイトにこのボタンを設置しておくと、Google+での存在感を高め、ページのフォロワーを増やすことができ、リーチの拡大につながります。設置方法https://developers.google.com/+/web/follow/を開いて、対象のGoogle+ページかプロフィールを選択し、ボタンのサイズやフォロワー数の表示位置(上、右、なし)を設定してください。あとは、コードをコピーして、サイト上でボタンを表示したい場所に貼り付けるだけです。実際の設置例がこちらです。ボタンをクリックして、HubSpotをGoogle+のサークルに追加してみてください。2)Google+バッジ用途Google+バッジは、LinkedInの企業プロフィールプラグインと同じような役割をするものです。サークルへの追加だけでなく、もう少し詳しい情報を表示できます。設置方法https://developers.google.com/+/web/badge/を開いて、個人か会社のアカウントを選び、スタイルを選びます。G+マークのシンプルなアイコン(アイコンと社名のみのボタン)か、詳細なバッジかのどちらかです。バッジの場合は、レイアウトの向き(縦向きの方が多くの情報を表示できます)、幅、色のテーマ、カバー写真とキャッチフレーズの表示有無を選択します。あとは、コードをコピーして目的の場所に貼り付けるだけです。実際の設置例がこちらです。(バッジ、縦向きの場合)3)+1ボタン用途サイトのコンテンツに+1ボタンを設置しておくと、利用者がそのコンテンツへの「+1」(共感やお気に入りの表明)を簡単に行うことができます。Google+でのシェアを促して、コンテンツのリーチを拡大でき、サイトにトラフィックを呼び込むことができます。設置方法http://www.google.com/webmasters/+1/button/を開いて、+1ボタンをカスタマイズしてください。+1情報の表示方法(インライン、バルーン、なし)などを設定できます。+1の対象となるURLは「詳細オプション」で指定します。あとは、コードを生成して貼り付けるだけです。実際の設置例がこちらです。ボタンをクリックして、このブログ記事を+1してみてください。4)Google+の共有ボタン用途Google+の共有ボタンは、コンテンツをシェアできるという意味では+1ボタンとよく似ていますが、支持や賛同の+1を表明しないという点が異なります。Google+の説明によると、このボタンは、議論を呼びそうなコンテンツやニュースなど、ユーザーが+1せずに共有したいと思うコンテンツに適しているとのことです。設置方法https://developers.google.com/+/web/share/を開き、ボタンを設定します。+1ボタンと同じように、件数の表示方法などを指定できます。対象のURLは詳細オプションで指定してください。あとは、コードを生成して貼り付けるだけです。実際の設置例がこちらです。ボタンをクリックして、このブログ記事をシェアしてみてください。用途FacebookやTwitterの場合と同じように、Google+でコンテンツをシェアするためのハイパーリンクも簡単に作成できます。+1ボタンと同様の働きをするテキストリンクです。ひとまとまりのコンテンツの中で紹介している個別の要素をシェアできるようにしたい場合に便利です。設置方法Google+でコンテンツをシェアするためのテキストリンクを作成するには、下のURLでオレンジ色になっている部分を、シェア対象のコンテンツのURLに変えるだけです。あとは、下のURL全体を、テキストのハイパーリンク先として指定してください。https://plusone.google.com/_/+1/confirm?hl=en&url=http%3A%2F%2F%20http://bit.ly/vOKpgC利用者がこのリンクをクリックすると、そのコンテンツに+1したことになります。+1ボタンと同じように、コメントを追加してから共有することもできます。実際の設置例がこの下のリンクです。Google+!Pinterest用のボタン1)Pinterestのフォローボタン用途ほかのSNSと同じように、Pinterestにもフォローボタンがあります。Pinterestでの存在感を高め、新しいフォロワーを獲得できます。http://business.pinterest.com/widget-builder/#do_follow_me_buttonを開いて、PinterestアカウントのURLと名前を指定します。あとはコードを生成し、サイトに貼り付けるだけです。実際の設置例がこちらです。ボタンをクリックして、PinterestでHubSpotをフォローしてみてください。2)”ピン”ボタン用途ほかのSNSで言うシェアボタンにあたるボタンです。Pinterestでコンテンツをシェアしてもらい、リーチを拡大できます。画像やインフォグラフィックなど、視覚的なコンテンツの横に表示するのに適しています。http://business.pinterest.com/widget-builder/#do_pin_it_buttonを開いて、ボタンを設定します。画像を含むページのURL、画像自体のURL、簡単な説明を指定してください。数の表示位置(右、上、なし)も設定できます。あとは、コードをコピーして貼り付けるだけです。実際の設置例がこちらです。ボタンをクリックして、このブログ記事をシェアしてみてください。そのほかのPinterest用ウィジェット:アカウントのピンをプレビュー表示するプロフィールウィジェット、特定のボードの内容を表示するボードウィジェット、特定のピンを表示するピンウィジェットがあり、いずれもhttps://business.pinterest.com/en/widget-builderから作成できます。編集メモ:この記事は、2014年10月に投稿した内容に加筆・訂正したものです。Vaughanによる元の記事はこちらからご覧いただけます。トピック:ソーシャルメディアメルマガ登録コメント申し訳ありません。過去のコメント履歴が削除されてしまいました。何か疑問やご質問がある方はこちららどうぞ。疑問や質問をツイートするにはこちら。Inc.法的事項プライバシーポリシーサイトマップ。