FC2ブログの個別記事にfacebookコメント投稿フォームを設置
Fc２ブログの個別記事ページに、facebookのコメントフォームを設置しました。
参考にしたサイトは以下です。
これまたFacebookのソーシャルプラグイン機能で、コメント投稿フォーム（Comments Box/コメントボックス）があります。先ほど当サイトでも設置しましたが、ものの5分で設置できました。
続きの部分に設置コードの取得の仕方を忘備録として載せています。
上記エントリーより、html5、XFBMLというコードの選択肢が増えているようです。
FC2ブログを使った私の写真ブログ
Pleasure Fruits EN
追記： 2011年12月11日
個別記事に表示するには、設置場所が重要ですので、
当サイトの、
FC2ブログの個別記事にfacebookコメント投稿フォームを設置(2)
を必ず参考にして下さい。
１．facebookコメント投稿フォーム貼り付けコードの取得：
facebookコメント投稿フォームコード取得ページ
に移動します。
入力画面
- URL to comment onの部分に<%topentry_link>と入力して下さい。 空白にするとエラーになります。
FC2ブログ以外のブログを使用の場合は、個別記事ページを表示するタグを適宜入力して下さい。
- Number of postsは、表示されるコメントの数です。
数が多いほど表示が遅くなると思われます。
- それ以外も適宜記入して、Get codeボタンをクリックします。
そうすると以下のようなコードが表示されます。
- コードは、html5とxfbmlの2種類ありますが、デフォルトで表示されるhtml5のコードをコピーします。
- 取得したコードの中に、data-href="＆ａｍｐ；ｌｔ；%topentry_link＆ａｍｐ；ｇｔ；"という部分がありますが、このままではエラーになってしまうので、エディターやノートパッドを使って＆ａｍｐ；ｌｔ；%topentry_link＆ａｍｐ；ｇｔ；の部分を<%topentry_link>と書き換えます。
- 書き換えたコードを、個別記事ページの適当な所へ貼り付けます。自分の場合は、facebookのいいね（Like）ボタンの下に貼り付けました。
取得したコードは以下の通り
<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/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="<%topentry_link>" data-num-posts="2" data-width="500"></div>
facebookもhtml5のコードは最近追加したようですね。
facebookのコード作成ページもいろいろ出力コードが変わっているようなので、
コードを貼り付ける時は、最新のコードを入力画面から入手して使われることをお勧めします。
動作はChrome 14、Firefox 7、IE8、IE9、Safari 5.1、Opera 11、Slepinirで確認しました。
設置後の使用感ですが、やはりfacebookに接続している為、
いいね（Like）ボタン以上に表示が少し遅くなります。
回線スピードの早い日本では殆ど問題にならないのでしょうけど。
それと、facebookの接続が不安定なベトナムでは、
表示エラーになる場合もあると思います。
そうするとなおさら表示が遅くなりますね。
ベトナム以外にもfacebookがブロックされている国では表示エラーになりますよね。
しばらく様子を見てみます。
と言っていたらいきなり来ました～。
コメントする