「おすすめ」記事をポップアップ表示するフェイスブックの「Recommendations Bar」のWordPressへの導入方法

スポンサーリンク

最近やたらと有名・無名ブログが「おすすめ」記事をポップアップ表示するフェイスブック・okのプラグイン(ブログパーツ)である「Recommendations Bar」の導入が目立ちます。Wordpress仕様の我がブログでも試しに導入してみました。 導入・設置方法は簡単です。コードを直接取得する方法と、専用のWordpressプラグインを導入する2つの方法があります。

image

フェイスブック・プラグイン「Recommendations Bar」

プラグイン「Recommendations Bar」とはブログのページを読みながら、ページ半まで読み進めると、またページ表示から一定の時間が経過したら、ページ右下からお勧め記事がポップアップ表示されるものです。 ブログに少しでも長くとどまって少しでも多くの記事を読んでもらうためのものです。

そのポップアップ表示された「おすす」記事はFacebookでどれほど共有されたかなどのアルゴリズムで自動的にピックアップされます。このブログではフェイスブックでそんなに「いいね!」の評価をもらっていないので、どういう記事がおすすめ記事として表示されるかは、設置してみなければわかりません。

というわけで、このブログの直帰率を少しでも抑えるために、フェイスブックのプラグイン「Recommendations Bar」を導入してみます。(いつ外すかは分かりません。)

Wordpressに設置する方法はいくらかあるようですが、以下に2つの方法を取り上げます。

    1. 直接コードを取得して設置する方法
    2. WordPressプラグイン「Facebook Recommendations Bar」を用いる方法

沢山プラグインを入れるとWordpressが重くなるので避けたい方は、1.がお勧めです。しかし、テーマのバージョンアップ毎にコードを修正するのが面倒と感じる方は、2.のWordpressプラグインの利用をお勧めします。

1.Wordpressに設置させる方法

(まず、準備ですが、プラグイン内に画像が表示されるようにWPプラグイン「Open Graph Pro」でFacebookページを楽々更新!エラーも克服!を参考に画像が表示されるようにしておいたほうがいいみたいです。)

WordPressにはごく簡単に「Recommendations Bar」を設定することができますが、その前にコードを生成して、取得する必要があります。

まず、まずコードの取得はRecommendations Bar – Facebook開発者 からです。入力項目は以下の通り。

image

  • URL of the article:未記入でOKみたい
  • Trigger:お勧め記事展開の方法。デフォルト「onvisible」は以下の時間指定で表示。「%」はどの程度までページスクロールをしたかで表示を指定。いずれも以下の「Read Time」が優先するようです。
  • Read Time:該当ページが表示され始めて、お勧め記事が展開するまでの時間(秒)。初期設定では30秒ですが、もっと短めがお勧めかも。
  • Verb to display:ここは表示タイトルです。likeは「いいね」、recommend「おすすめ」と表示されます。
  • Side: 表示場所で「left」は「左下」、「right」は「右下」に表示されます。
  • Domain:設置ブログのドメイン。例:example.com (URLではないのでhttp://は省く)
  • その他:[num_recommendations=”5”]などのコードを加えると、お勧め記事数が5つ表示されます。5記事以内です。

最後に「Get Code」をクリックすると、以下のようにコード(HTML5の場合)が生成されます。1.の「JavaScript SDK」はすでに「Like box」などを適正(<body>の直下近辺など)に設置している場合は必要ないようです。

「JavaScript SDK」を設置する場合は、「新しいアプリを作成」をクリックして取得します。以前にアプリを作成した方は、表示される「App ID」を取得してコード内の[APP ID]の替わりに挿入します。(まだアプリを利用したことのない方は、「WP-OGP」でフェイスブックからアクセス倍増方法とは!合計PVが2倍へ嬉しい悲鳴に!|アマモ場の「アプリIDの取得」の部分を参考に取得します。)

image

1と2のコードを一緒に、<body>~</body>内に、できるだけ<body>直下へ記述します。

このブログの場合は、Wordpressテーマ「Suffusion」の中に、ブログ上部に挿入できるウィジェットを利用できました。以下の通りです。

image

しかしほとんどのWordpressテーマの場合、(お勧め記事を表示させる場所が投稿ページの場合)テーマのsingle.phpの上部に記述します。テーマの種類によっては、<body>外になるので注意が必要です。記事コンテンツの直前なら確実です。

image

2.Wordpressプラグイン「Facebook Recommendations Bar」や「Facebook (for WordPress)」を用いる方法

こちらは簡単です。「Facebook Recommendations Bar」や「Facebook (for WordPress)」という名のWordpress用のプラグインを導入するだけです。

いつものようにWordpressのダッシュボードの「プラグイン」の「新規追加」から、「Facebook Recommendations Bar」を検索して、ヒットしたプラグインを「今すぐインストール」をします。

image

その後いつものように有効化します。

image

有効化の後に、Wordpress管理画面の「設定」に「Facebook Recommendations Bar」が表れますのでそれをクリック。以下は設定の説明です。

  • Facebook App ID・・・必ず記入します。取得方法は上記参照。
  • Enable FBML・・・既にFacebookプラグインを導入済みの方は、チェックを外しても動きます。動かない場合は、こちらにチェックを入れます。
  • Posts・・・投稿記事に表示させる場合にチェックを入れます。
  • Pages・・・ページにも表示させる場合にチェックを入れる。
  • Language・・・デフォルトは英語仕様。ここを日本語対応にするために「ja_JP」と記入。
  • Verb・・・「Like」か「Recommend」にするかの違いは上記参照。
  • Read time (seconds)・・・展開されるまでの時間(秒)上記参照。
  • Number of Recommendations・・・お勧め記事の数。
  • Which Side to Appear・・・ポップアップ表示場所が右下(right)か、左下(left)かを選択。

image

もうひとつfacebookのWordpress用の公式専用プラグイン「Facebook (for WordPress)」を用いる方法もあります。その導入方法は、フェイスブック公式プラグイン「Facebook for WordPress」の使い方!やっと自動投稿ができた|アマモ場をご覧下さい。

導入後は「設定」の最後の「Recommendations Bar」の表示にチェックを入れ、以下のように設定項目を記入するだけです。

image

以上が、「おすすめ」記事をポップアップ表示するフェイスブック・プラグイン「Recommendations Bar」のWordpressへの2つの導入・設置方法でした。

この導入で、①どれほどPVが上がるか、また②どれほど直帰率が下がるか、注視してみたいと思います。いずれにしろ、いつまで設置するかわかりません。

スポンサーリンク

シェアする

フォローする

関連記事