Facebookページを新たに開設した場合などに、Webサイトにいいねボタンを設置するまでの手順を紹介します。
その他いいねボタン設置に際して、Facebook app登録(app_id取得)やOGP設定についても触れています。
Facebookのいいねやフォローとは
Facebookページへのいいねは、そのFacebookページが「個人」であれば「フォロー」と呼び、「企業や団体等」であれば「いいね」と呼ばれるようですが仕組みは同じです。
個人もしくは企業のFacebookページがユーザーからフォローもしくはいいねされると、Facebookページが発信した投稿がユーザーのタイムラインに表示されるようになります。
タイムラインで投稿を見つけたユーザーがそのFacebook投稿にいいねしてくれた場合やシェアしてくれた場合は、そのユーザーをフォローしている友達にも情報が拡散されます。
もしその投稿がWebサイト上の記事をシェアしたものだった場合、ユーザーが投稿のリンクをクリック（タップ）してWebサイトの記事を見に来てくれる場合もあります。
Facebook投稿や検索エンジンからWebサイトの記事に流入したユーザーに対して、Webサイトの中にもいいねボタンやシェアボタン・フォローボタンを設置しておくことで、よりコンテンツを拡散してもらう確率を高めることができます。
そのため、Webサイトにもボタンを設置しておき、投稿を拡散してもらう仕組みを作っておくことは重要なことです。
なお、いいねやシェアの種類についてまとめると以下のようになります。
- Facebookページへのいいね（フォロー）
- Facebook投稿へのいいね
- Webページへのいいね
- Webページのシェア
これらのうち、Webサイト内にもボタンを設置できるのは、1, 3, 4です。
ボタン設置の前にFacebook app登録をしておく
それではボタンを設置したいところですが、その前にシェアプラグインのapp登録をしてapp idを作成しておくことをおすすめします。
Facebook app登録は必要？
Facebook appを登録・作成していなくても見たところシェアやいいねなどは正常に機能するように見えます。
ところが、後述するSharing debuggerにてfacebook appのidを記載していないページをテストした場合は以下のようなエラーが出ます。
Share App ID Missing
The ‘fb:app_id’ property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.
一方で、公式のよくある質問ページには以下のように書かれています。
Facebookアプリを作成する必要がありますか。
ウェブ:ウェブ上でソーシャルプラグインを使用する場合は、ソーシャルプラグインの統合にFacebookアプリを作成する必要はありません。
iOS/Android:iOSアプリまたはAndroidアプリ内にソーシャルプラグインを使用する場合は、Facebookアプリを作成して、アプリIDに紐付ける必要があります。
こちらではウェブページ上に設置する場合であれば特に必要とされていないような感じです。
app_idはなくともいいねやシェア自体には問題なさそうなため、結局のところ必要なのかどうなのかがわかりにくいのですが、デバッガーにエラーを出されて気持ち悪いというのであれば以下の手順に従って登録しておくことがおすすめです。
Facebook app登録・作成方法
Facebook appを作成するためには開発者登録を行い、アプリを作成しておく必要があります。
アプリ開発といっても基本情報を登録するだけで、アプリのコーディングを行わなければいけないわけではありませんのでご安心ください。
まずは開発者向けページにアクセスします。
https://developers.facebook.com/
開発者登録していない方は開発者登録を行ってください。
登録完了までにFacebookパスワードの入力とSMSなどによる認証が必要になります。
開発者登録ができたら開発者向けページから「新しいアプリを追加」を選びます。
するとポップアップが出ますので必要事項を埋めます。
・表示名：サイト名+ソーシャルプラグインなどあとで判別できる名前をつけておきます
・メールアドレス：Facebookに登録してある個人のメールアドレスが表示されているはずです
・カテゴリ：Facebookページのカテゴリに近いものを選択
「アプリの作成」ボタンを押してスパム防止用の画像認証をパスすればひとまずアプリの作成は完了です。
次に使用するFacebookページと関連付けるWebサイトを登録しておきます。
左メニューの「設定」→「ベーシック」と遷移すると「プラットフォームを追加」とあります。
クリックしてWebサイトを選択し、入力欄にURLを貼り付けてページ右下にあるボタンから「変更を保存」しましょう。
最後に、アプリを有効化します。
左メニューのアプリレビューのページからアプリを公開して完了です。
肝心のアプリIDもページ左上から確認できます。
Facebookページへのいいね（フォロー）ボタン設置
Facebook app登録を行ったかどうかにかかわらず、Facebookいいね（フォロー）ボタンを設置するには、次のページにアクセスします。
https://developers.facebook.com/docs/plugins/follow-button
「プロフィールのURL」にいいねボタンをしてもらいたいFacebookページのURLを入力します。
ボタンのレイアウトスタイルやサイズを選べるようになっているので、プレビューを見ながら好みのものを選びましょう。
また、タイムラインや壁紙が追加されていたりしてよりリッチなタイプもあります（ページプラグイン）。
https://developers.facebook.com/docs/plugins/page-plugin
好みのプレビューにできたら「コードを取得」をクリックします。
コードは2種類あって、javascript SDKとiframeのものがあります。
javascriptのほうはページの表示速度が遅くなるような気がするので、特にこだわりがなければiframeを選ぶとよいでしょう。
javascript SDKを用いる場合は上に表示されたタグを<body>の開始タグの直後、もう一方をボタンを設置したい場所に貼り付けます。
iframeを用いる場合はコードは１つですので、設置したい場所に埋め込むだけです。
いずれの場合でも、Facebookのapp idを取得していた方は作成したアプリが表示されているかどうかを確認してください。
（特に複数のアプリを作成している方は設置したいアプリとは別のものになっていないか注意してください。）
このコードを埋め込むことでFacebookページへのいいね（フォロー）ボタンが設置できます。
各記事ページへのいいねボタンの設置
ブログなど、Webページに対するいいねボタン、またはシェアボタンも同様に設置できます。
次のURLにアクセスしてください。
https://developers.facebook.com/docs/plugins/like-button
設置の要領はフォローボタンの場合と同じです。
javascriptを使っている場合は、やはり２つのコードを設置する必要がありますすが、１つ目のコードはフォロー用のコードと同じものですので、すでに設置されている場合は複数記述する必要はありません。
ただし、記事ごとのいいねボタンはWebページのURL（いいねするURL）をタグの中に指定しておく必要があるため、対象となるページごとにコードが変わります。
数ページだけのサイトであれば１つ１つタグを取得して手作業で設置すればよいかと思います。
ブログなどで複数ページのテンプレートに記述する場合は、phpなどで動的にURLを取得するのが便利です。
この場合ひとまずURLは適当でよいので、ボタンサイズやレイアウトを指定して「コードを取得する」をクリックします。
javascriptを用いたコードでは以下のようになっています。
<div class="fb-like" data-href="（いいねしたいURL；そのページのURL）" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>WordPressの場合には、data-hrefのいいねしたいURLの中には<?php the_permalink() ?>を記述して、テンプレートの設置したい場所に埋め込みます。
問題なく動作するかどうか必ず確認しましょう。
オリジナルのいいねボタンを設置したい場合
最近では自作のFacebookいいねボタンを設置してあるサイトも増えてきました。とはいえ、すべてのボタンが自作カスタマイズできるわけではありません。
すでに述べた通り、Webページに設置できるFacebookのいいねボタンにはおおまかに以下の３つがあります。
- Facebookページへのいいね（フォロー）
- Webページへのいいね
- Webページのシェア
このうち自作できるのはシェアボタンだけで、それ以外の機能は公式プラグインを用いる必要があります。
シェアボタンは次のようなコードになります。
<a href="https://www.facebook.com/sharer/sharer.php?app_id=(アプリID)&u=(シェアしてもらいたいURL)">
<img src="自作したボタン画像">
</a>
サンプルとして、この記事をシェアするボタンを作成してみました。
↓のボタンをクリックするとシェアダイアログが開きます。
ここまでで公式プラグイン、もしくは自作でいいねボタンは設置できたのですが、続いてOGP設定もしっかり行っておくことをおすすめします。
OGPを設定しておく
いいねボタンを設置しても、Facebookでシェアされた際の画像やテキストが目に留まったユーザーの注意を惹くものでなければ意味がありません。
OGPとはOpen Graph Protocolの略で、Facebookに対してそのページのURLやタイトル・イメージ画像を伝えるものです。FacebookでURLがシェアされる際にはOGPの情報が用いられています。
OGPをしっかり記述し最適化しておくことでシェアされた際に表示される画像やテキストをコントロールすることができます。
逆にOGPを適切に設定していないと、意図していない画像やテキストが表示されてしまい、目に留まったユーザーに伝えたいことを伝えられない場合もあります。
OGPはhtmlソースの<head>内に記述される以下のようなものです。
<meta property="og:title" content="Webマーケティングの株式会社ブレインネット" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.brain-solution.net/" />
<meta property="og:image" content="https://www.brain-solution.net/logo.jpg" />
<meta property="og:description" content="WEB集客・SEO対策・WEBサイト制作ならブレインネット" />
<meta property="fb:app_id" content="141151856317748" />
それぞれの説明は次のとおりです。
| og:title |
|---|
| シェアしようとしている記事のタイトル |
| og:url |
| シェアしようとしている記事のURL |
| og:image |
| シェアしようとしている記事の画像のURL |
| og:description |
| シェアしようとしている記事の概要文章 |
| og:type |
| シェアしようとしているページ種類（トップページならwebsite/記事ページならarticle） |
| fb:app_id |
| 取得したfacebookアプリID |
これらをWebサイトの全ページに記述するようにしましょう。(OGPを設置できるwordpressプラグインなどもあります)
OGPや設定する画像のサイズ、プラグインの利用などは次の記事にもまとめていますので参考にされてください。
Facebookシェアに最適な画像サイズとOGP設定【2016年版】
Facebook debuggerによるテスト
Facebook debuggerではシェアのプレビューが確認できますので、設置したいいねボタンが押された場合にどのような見た目でシェアされるかを確認することができます。
Facebook debugger
調べたいURLを入力してエラーなどなく意図したテキストや画像が表示されていることが確認できたら完了です。
画像やテキストの調整のほか、添付画像のように画像が切れてしまうなどもないように注意しましょう。
まとめ
ここまで、2016年現在の仕様をもとに、facebook app_id取得、いいねボタン設置、OGP設定についてまとめました。
FacebookはTwitterや検索エンジンなどと並んで、Webサイトにとって流入を獲得していく上で必須のチャネルとなっています。
いいねボタン設置までにここまでやるのは面倒かもしれませんが、面倒なのは最初だけですので頑張りましょう！
SEOの最新情報を手に入れましょう
サイト集客を強化していく上ではSEOの最新情報を手に入れ自身のサイトに落とし込んでいく必要があります。
サクラサクラボでは無料のメルマガで最新情報を配信していますので是非ご登録を！
どなたでもお名前とメールアドレスのみで簡単に登録がいただけます！
↓↓↓メルマガ登録はコチラ↓↓↓
