Facebookボタンの役割から設置まで！最適な設置場所とは？

2017/06/28

他社からプラットフォームを提供されているFacebookなどのソーシャルメディアと、自社で運営するWebサイトやキャンペーンサイトを組み合わせることは、オンラインマーケティングでますます重要になっています。

例えばとある製品のキャンペーンでキャンペーンサイトを運営しつつソーシャルメディアでキャンペーンの告知をしたとします。

キャンペーンサイトでソーシャルメディアと連動した企画を開催すれば、ソーシャルメディアからキャンペーンを知るユーザーやキャンペーンサイトから企業のSNSアカウントを知るユーザーが増加。

製品の認知度増加とソーシャルメディアでの露出度増加につながります。

ソーシャルメディアとWebサイトを組み合わせることで、相乗効果を生み出すことに期待できるのです。

そこでFacebookと外部の連携に役立つのがFacebookボタン。Facebookは外部サイトとFacebookをつなげることができるボタン機能を提供しています。

これによりWebサイトの情報をFacebook上で露出することが可能に。多くのユーザーにコンテンツを届けることができます。

今回はFacebookボタンの役割から設置方法、さらにおすすめの設置方法を事例と共に紹介します。

Facebookのボタンとは？種類と役割

種類と役割

Facebookは「いいね！ボタン」「シェアボタン」「フォローボタン」という外部に設置できるボタン機能を提供しています。

このボタンをWebサイトやブログに設置することで、ユーザーは設置されたページからFacebook上で直接アクションを起こすことが可能。

Facebookを開かなくても指定したページで行動が起こせるので、コンテンツの拡散やフォロワーの増加に役立ちます。

起こせる行動はボタンの種類によって異なるので、どういった効果を得たいかによってボタンを使い分けましょう。

いいね！ボタン

出典 : https://developers.facebook.com/docs/plugins/like-button
いいね！ボタンは、基本的にコンテンツを気に入ったことを示すボタン。多くの人にそのコンテンツを見て欲しいと感じたら、いいね！ボタンを押すことでFacebook上の友達や指定したグループに拡散できます。

今では「怒り」や「悲しみ」を示すリアクションボタンがあるので様々な感情を示すことが可能です。

しかし以前はいいね！ボタンしかなかったので、良いと思ってなくても気になったコンテンツはいいね！を押すことで拡散されていました。

しかし悲しいニュースでもいいね！で拡散する必要があったため違和感を抱くユーザーも多く、他の感情を示せるリアクションボタンが導入されます。

外部にいいね！ボタンを設置するときは今のところ怒りや悲しみといったリアクションボタンは表示されず、いいね！ボタンのみ表示されます。

オプションでいいね！ボタンの横にシェアボタンを表示できるので、いいね！以外の感想を抱いた場合はシェアボタンで共有することを促進しましょう。

外部に設置されたいいね！ボタンを押すことで、ボタン設置ページをFacebookで共有可能。ワンクリックしてもらうだけで該当ページをFacebookで拡散してもらえます。

シェアボタン

出典 : https://developers.facebook.com/docs/plugins/share-button
シェアボタンは他の人に見て欲しいコンテンツを、自身の言葉で編集したコメントを使って拡散できるボタンです。

いいね！ボタンはコンテンツに対する支持をワンクリックで簡単に表明できるボタンでしたが、シェアボタンはコンテンツへの感想を投稿するのに向いています。

例えばレストランの紹介ページにシェアボタンが設置してあれば、「ここのステーキが美味しかった！」と感想を添えてFacebookに投稿可能。

伝えたいポイントをページのリンクと一緒にFacebookで共有できます。

シェアボタンはコメントをつけて投稿できますが、コメントをつけずにページのリンクだけシェアすることも可能です。

外部に設置できるボタンで今のところリアクションボタンがないので、いいね！以外の感情を共有したいユーザーには無言でシェアボタンを押してもらいましょう。

フォローボタン

出典 : https://developers.facebook.com/docs/plugins/follow-button
フォローボタンは指定したプロフィールアカウントを、クリックしたユーザーにフォローしてもらえるボタンです。

フォローボタンを設置したページをフォローするのではなく、フォローボタンに設定した情報でフォローしてもらうアカウントが決定します。

ユーザーがフォローボタンをクリックすると、指定されたユーザーのフィードを購読できます。

個人アカウントもFacebookページもフォローボタンに設定できます。Webサイトに企業アカウントのフォローボタンを設置してFacebookのフォロワー数増加に役立てましょう。

Facebookボタンの設置方法

ボタンの設置方法

ここでは「いいね！ボタン」「シェアボタン」「フォローボタン」という3種類のボタンの設置方法を説明します。

Facebookボタンの設置はボタン構成ツールが用意されていて、項目を選択すると設定に合ったコードが自動で生成されます。

それぞれ難しいコードを編集する必要がないので、比較的手軽に設置可能です。

いいね！ボタンの設置方法

出典 : https://developers.facebook.com/docs/plugins/like-button
いいね！ボタンを設置するには「いいね！ボタン構成ツール」を使用してコードを取得しましょう。まずはfacebook for developersのいいね！ボタン構成ツール設置ページ（https://developers.facebook.com/docs/plugins/like-button）にアクセスしましょう。ページをスクロールすると画像のように構成ツールが表示されます。各項目の設定方法は次のとおりです。

いいね！するURL

いいね！ボタンを設置するページのURLを設定しましょう。

Width

いいね！ボタンが表示されるデザインの横幅を指定します。いいね！ボタンはレイアウトによってボタンの横に文字が表示されます。

この文字が設置するページのレイアウトによって大きすぎたり小さすぎたりするのを防ぐため、この項目を使って横幅を設定しましょう。

レイアウト

ボタンのレイアウトを4種類選択できます。「standard」「button_count」「button」「box_count」の中から好みのものを選択しましょう。

レイアウトを変更するとプレビュー画面に変更後のレイアウトが表示されます。

アクションタイプ

アクションタイプとはいいね！ボタンに表示される文字のことです。「like」の場合は「いいね」、「recommend」の場合は「おすすめ」と表示されます。

ボタンサイズ

ボタンサイズを設定することによってボタンの大きさが若干変わります。「small」と「large」から選択できますが、largeはsmallより少し大きくなった程度です。

大きくデザインを壊すことはありません。

友達の顔を表示する

友達の顔を表示するにチェックを入れると、いいね！ボタンで指定したページをすでにいいね！している友達のアイコンが表示されます。

知り合いがすでに興味を持っているページはユーザーの関心を引きますが、レイアウトとしては少しスペースをとってしまいます。Facebookボタンを設置する場所のスペースを見て選択しましょう。

シェアボタンを追加

いいね！ボタンの横にシェアボタンを追加できます。特にニュース記事など様々なオピニオンが出そうなページにボタンを設置する場合は、ユーザーのコメントをつけて拡散できるシェアボタンの設置がおすすめです。

いいね！だけでなくシェアの増加を狙っている場合は、シェアボタンもつけてみてはいかがでしょう。

青枠は構成ツールで設定したコードのプレビューが表示されます。赤枠の「コードを取得」をクリックして、Facebookボタンのコードが自動で生成されます。

指示どおりコピーペーストしてHTMLに貼り付けましょう。

シェアボタンの設置方法

出典 : https://developers.facebook.com/docs/plugins/share-button
シェアボタンも「シェアボタン構成ツール」を使って手軽にコードを取得できます。facebook for developersのシェアボタン構成ツール設置ページ（https://developers.facebook.com/docs/plugins/share-button）にアクセスしましょう。ページをスクロールすると画像のように構成ツールが表示されます。各項目の設定方法は次のとおりです。

シェアするURL

シェアボタンを設置するページのURLを設定しましょう。

レイアウト

ボタンのレイアウトを3種類選択できます。「button_count」「button」「box_count」の中から好みのものを選択しましょう。レイアウトを変更するとプレビュー画面に変更後のレイアウトが表示されます。

シェアボタンの場合はいいね！ボタンのようにボタンの横に文字が表示されません。全体的にコンパクトなボタンになっています。

ボタンサイズ

大きくデザインを壊すことはありません。

モバイルIframe

この項目にチェックを入れると、モバイル機器からシェアボタンをクリックしたときにウェブサイト上部のIframeにシェアダイアログが表示されます。

フォローボタンの設置方法

出典 : https://developers.facebook.com/docs/plugins/follow-button
フォローボタンも構成ツールを使ってコードを生成していきましょう。facebook for developersのフォローボタン構成ツール設置ページ（https://developers.facebook.com/docs/plugins/follow-button）にアクセスしてください。各項目の設定方法は次のとおりです。

プロフィールのURL

フォローしてもらいたいアカウントのページURLを設定しましょう。

Width

フォローボタンが表示されるデザインの横幅を指定します。フォローボタンはレイアウトによってボタンの横に文字が表示されます。

この文字が設置するページのレイアウトによって大きすぎたり小さすぎたりするのを防ぐため、この項目を使って横幅を設定しましょう。

Height

フォローボタンが表示されるデザインの高さを指定します。

レイアウトスタイル

ボタンのレイアウトを4種類選択できます。「standard」「button_count」「button」「box_count」の中から好みのものを選択しましょう。

レイアウトを変更するとプレビュー画面に変更後のレイアウトが表示されます。

ボタンサイズ

ボタンサイズを設定することによってボタンの大きさが若干変わります。「small」と「large」から選択できますが、largeはsmallより少し大きくなった程度です。大きくデザインを壊すことはありません。

顔を表示する

友達の顔を表示するにチェックを入れると、フォローボタンで指定したアカウントをすでにフォローしている友達のアイコンが表示されます。

こんな風に設置したい！Facebookボタン設置事例

設置事例

各ソーシャルメディアに専用のシェアボタンが設置されています。特に各記事の最後にボタンを設置することで、記事に対する感情が新鮮なうちに記事の共有を促すことが可能です。

この方法が一番使われていて効果があるかと思いますが、他にもうまくボタンを使っている企業が多数。実際にどのような設置の仕方をしているか事例と共に紹介します。

【事例1】Forbs

出典 : Forbs「The Right Stuff For Saving Kids’ Lives」：https://www.forbes.com/sites/unicefusa/2017/05/17/the-right-stuff-for-saving-kids-lives/?strref=https:%2F%2Fwww.forbes.com#3951a1461d43
大手経済紙のForbsのWebサイトでは各記事にソーシャルメディアのシェアボタンが設置されています。

他のサイトは記事の最後にシェアボタンを設置することが多いのですが、Forbsは記事の最後に加えてタイトルのすぐ下というとても目立つ位置に共有ボタンを設置しています。

Forbsは長文で読み応えの記事を配信するため、ほとんどの記事が数ページに分割されています。記事タイトルの下にシェアボタンを設置することで、記事内の次のページに移動するたびに記事のシェアを促すことが可能。

読者の好きなタイミングでコンテンツをシェアすることに貢献しています。

記事を何度も読み返すユーザーがいるので、シェアしようと思っても最期のページまでスクロールするのは一苦労です。一箇所にだけシェアボタンを置くと、シェアしてもらえる確率が減少する可能性があります。

ユーザーの好きなタイミングでシェアするように工夫することが、ソーシャルメディアへ記事をたくさんシェアしてもらえるポイントです。

【事例2】HubSpot

出典 : HubSpot「June 22, 2017 What We Learned From Spending $100k On Facebook Ads」：https://blog.hubspot.com/marketing/100k-on-facebook-ads
ユーザーの好きなタイミングでシェアできるようにボタンの設置場所を工夫するという点では、HubSpotのソーシャルメディアボタンの設置方法が優れています。

画像を確認すると分かるように記事の最初や最後ではなく、ブログ記事の横にシェアボタンが設置されています。

このシェアボタンはスクロールに合わせてボタンが常についてくるので、ユーザーはいつでも好きなときにシェアボタンの利用が可能。

シェアしたいと感じたときにスクロールしてシェアボタンを探すという作業や、Facebookに移動してURLを貼り付けるというストレスを解消しています。

WordPressを使用している場合は、ShareBarというプラグインを使ってHubSpotのようにソーシャルメディアボタンを常に表示できます。
参照：ShareBar：https://ja.wordpress.org/plugins/sharebar/