FacebookのRecommendations Barを設置するやり方

今回はFacebookRecommendations Barというものを設置するやり方を説明しよう。
たぶん「リコメンデーションズ・バー」と読む。
このページの右下にもあるこんな感じのやつだ。(いつからか撤去しています)
FacebookのRecommendations Bar

これはページを表示して指定した秒数が経過したり、指定した場所までページをスクロールをした場合に自動的に開く。

このブログの場合は「ページを表示して30秒以上経過」しており、さらにユーザーが「記事下のFacebookコメント欄の下あたりまでスクロールした場合」という2つの条件を満たした場合にのみ開く設定になっている。(この記事を書いている時点での設定)
Recommendations Barが開いた状態

自動的に開くので多少のウザさはあるかもしれないが、閲覧者の注意を引きつけると同時に、他の誰かが「いいね!」を押した記事が出てくるため、「この記事もついでに見てみようかな」という感じで回遊率を高める効果が期待できる。
つまり「なるべく複数ページを見てもらおう」というツールだ。

Recommendations Barの設置のやり方

まずはFacebook DevelopersのRecommendations Barのページにアクセスする。
デベロッパ登録を済ませていなくてアプリIDがない人は事前に取得しておく必要がある。
https://developers.facebook.com/docs/reference/plugins/recommendationsbar/

そしてページ中央あたりにあるフォームに入力をしていく。
Recommendations Bar設定入力フォーム

これら入力項目の説明をしていこう。

URL of the article
この欄にはRecommendations Barを設置するページのURLを記入する。ページ毎のURLを自動で指定したい場合は後述するので、今回は適当に入力しておけばよい。
Trigger
この選択肢は設置したページをどのぐらいスクロールした際にRecommendations Barのボックスを開くかを指定する。
「onvisible」を選んだ場合はコードを貼りつけた場所までスクロールさせた際にボックスが開く。
「X%」はページをどの程度スクロールさせた際にボックスを開くかを指定できる。これを選ぶ際はコード生成後にXの部分を自分で数値を書き換える必要がある。(例:50%にするとページ中央までスクロールしたときにボックスが開く)
「manual」を選んだ際にはスクロールによって自動でボックスが開くことはない。
Read Time
この項目はページを表示してから何秒経過してからボックスを自動で開くかの指定である。上のTrigger指定もしている場合は両方の条件を満たした場合にのみボックスが開くことになる。
Verb to display
これは表示文字を「いいね!」にするか「おすすめ!」にするかの選択肢だ。
Side
この選択肢はページの右下に表示するか、それとも左下に表示するかの選択肢だ。右上や左上というものはないらしい。
Domain
この欄にはRecommendations Barを設置するページのドメインを記入しておく。必須かどうかよくわからない項目だが一応記入しておいたほうが無難だろう。

入力や選択が終わったら「Get Code」と書かれたボタンを押す。
すると以下のように2つのコードが生成される。(上の選択肢によって2つ目のコードの記述は変わる)
Recommendations Barのコード生成

上段と下段のコードをページ内のどこかに貼りつければOKである。
基本的にどこに貼りつけたとしてもRecommendations Barはウインドウ右下または左下に表示されることになる。

しかし前述の「Trigger」の選択肢を「onvisible」にした場合はこのコードを貼りつけた場所によってRecommendations Barのボックスを開くかどうかの判定が行われるので、その場合はコード貼り付け位置は気にしたほうが良い。

追記:「URL of the article」の欄でページ毎のURLを自動で取得して入力したい場合のやり方は後日別の記事でまた解説します。