/ programing

WordPressブログに右下に出てくるFacebookのソーシャルプラグインRecommendations Barを追加してみた

最近、サイトの右下からfacebookのお勧めみたいなものが出てくるサイトをよく見かける。どうやら Recommendations Bar なるものらしい。オフィシャルのドキュメントを読みながら早速追加をしてみた。

今回の内容は、直接テーマファイルを編集する内容となっています。またiframe版が無効になっていたので、html5版を使っています。

手順1. ページにJavaScript SDKを含めます(<body> のすぐ後に配置します)

まずFacebook を使うには Facebook Javascript SDK を追加しないといけない。そしてJavascript SDKを使うにはFacebookで[App])を申請しておかないといけないのだが、Open Graph Protocolに対応するときに申請していたのでそれを使う。以下の 7行目のAPP_IDを置き換えたもの を header.php のbodyタグの直後に追加する。

<body <?php body_class(); ?>>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

手順2. プラグインを表示したい場所にプラグインのコードを配置します。

次にRecommendations Barを追加したい位置に以下のコードを入れる・・・・のだが追加したい位置ってどこさ？追加したい場所も何も勝手に右下に出してくれるんじゃないの？

どうやらデフォルトのTriggerだとこのプラグインのコードの部分までスクロールしたところでRecommendations Barが展開することになる。厳密にはこれプラスread_time（デフォルトは30秒)が経ってからということになる。うーむ。footerの直前くらいで出しておこうか。

しかしURLの指定の仕方がこれでいいのか全くわかっていない。というのもJavascript SDKはdocument.locationを見ればこのページのURLがわかるわけで明示的に指定させるということは何か理由があるはずなのだ。

<div class="fb-recommendations-bar" data-href="<?php echo esc_url(( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'])?>"></div>

指定するURLの仕様が気になったのでドキュメントからプラグインのパラメータを抜粋。

data-href 現在のページのURL
data-site コンマで区切れるレコメンド対象にするドメインのリスト、デフォルトはhrefのドメインを見る

data-hrefにはパーリンクというか、そのページのURLでよさそうだし。デフォルトだとhrefのドメインを使ってくれるそうなので単一ドメインで公開しているサイトであればdata-siteは何も指定しなくてもよいだろう。

Open Graph Protocolに対応していないと怒られる

個別エントリーのページでOpen Graph Protocolに対応していないと以下のようなエラーが出て、このページは記事エントリーじゃないの？と指摘されている。

Object at URL …. has og:type of ‘website’. The property ‘article’ requires an object of og:type ‘article’.

Open Graph Protocolにも対応してみたがまだ内容が固まっていないのでまた次の機会に。

Markdown with by ❤ wp-gfm