オススメ記事を右下にピョコっと表示するFacebook｢Recommendations Bar」を設置する方法

2012年8月3日2013年5月7日

オススメ記事を表示してくれるプラグインがFacebookのRecommendations Bar。

このブログでも導入してみました。

参考にさせて頂いた記事

誰でもカンタン! Facebookの｢Recommendations Bar｣を設置する方法 | [M] mbdb

基本的に参考にさせて頂いた記事の通りだったんですがちょっとハマったのでそのことを以下に。

ハマった内容

うまく表示されず以下の内容になってしまうのです。

「指定されたURLは、アプリケーションの設定で許可されていません。: 指定されたURLの中にアプリの設定で認められないものが含まれています。ウェブサイトまたはキャンバスのURLと一致しているか、ドメインがアプリのドメインのサブドメインである必要があります。」

対処したこと

そもそもFacebookのプラグインを元々入れていました。

なのでJavascript SDKは導入済みでAppIDも設定されていました。

ただ位置がHTMLの中の最後の方でした。

これは、ページ表示を早くするために、読み込みの遅いFacebookのJavascript SDKを後回しにしていたのです。

まずここを直して、<body>の直後にするようにしました。

結局丸コピして治りましたｗｗ下記コードは非同期読み込みに対応しております。

[code lang=”js”]<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.async = true;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=ここにApp ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
[/code]

参考になれば幸いです。てか基本に従うのが一番ですね。

ありがとうございました。＞@cazukiさん