アメブロ記事から直接facebookでコメントしてもらう方法
投稿日時:
この記事は約 8 分で読めます。
大丈夫、あなたなら出来る!
ソーシャル・マーケティング協会 代表理事の白鳥友康です。
アメブロに「いいね!」ボタンを設置しようと
いろいろ調べていたらコメントが投稿できるプラグインを発見。
試しに設置してみました。
2011/01/29追記
コメントして頂いたものが、各記事ごとのコメントとして扱われず、
サイト全体へのコメントとなってしまうので、一旦削除いたしました。
2011/02/06追記
不具合を修正したものを改めて作成しました。こちらの記事をご覧ください。「アメブロ(ブログ)記事から直接facebookでコメントしてもらう方法(バグfix版)」
アメブロの記事URL(単独記事ページ)を表示しているときに、
「なうで紹介」「mixiチェック」「ツイートする」ボタンの下に
こんな感じのコメント入力欄を表示します。
ここからコメントをすると、
コメントしてくれたユーザのウォールに投稿されます。
ちなみに「いいね!」ボタンも一緒に表示されるので、
かなり便利だと思います!
以下のスクリプトをフリープラグインに入力します。
<div id="fb-root"></div>
<div id="fb-comments"><fb:comments xid="APP_ID" numposts="5" width="420" publish_feed="true"></fb:comments></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
/* facebook init { */
window.fbAsyncInit = function() {
FB.init({appId: 'APP_ID', status: true, cookie: true, xfbml: true});
};
$(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/ja_JP/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
/* } facebook init */
$(document).ready(function(){
uri = window.location.href;
_uri = encodeURI(window.location.href);
// 記事単独ページのとき
if (_uri.indexOf('/entry-') != -1) {
$("#fb-comments").insertAfter("#exLinkBtn");
// ホームページのとき
} else if ( (uri.indexOf('http://ameblo.jp/[アメブロID]') != -1) ||
(uri.indexOf('http://ameblo.jp/[アメブロID]/') != -1)) {
$("#fb-comments").hide();
}
});
</script>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=APP_ID&amp;xfbml=1"></script>
「APP_ID」はプラグインを設置する際に
facebookで申請して取得する数字の羅列です。
「アメブロID」は、URLの最初のディレクトリにある文字列。
詳細説明
<div id="fb-root"></div>
<div id="fb-comments"><fb:comments xid="APP_ID" numposts="5" width="420" publish_feed="true"></fb:comments></div>
これはfacebookで取得したコード
<div id="fb-comments">にコメント欄を表示させたいので、
この部分は追加しました。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
後でjQueryを使うのでGoogle様から借りてきます。
<script type="text/javascript">
/* facebook init { */
window.fbAsyncInit = function() {
FB.init({appId: 'APP_ID', status: true, cookie: true, xfbml: true});
};
$(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/ja_JP/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
/* } facebook init */
</script>
初期設定開始。
facebookソーシャルプラグインを使うときに必要になる初期設定
<script type="text/javascript">
$(document).ready(function(){
uri = window.location.href;
_uri = encodeURI(window.location.href);
// 記事単独ページのとき
if (_uri.indexOf('/entry-') != -1) {
$("#fb-comments").insertAfter("#exLinkBtn");
// トップページのとき
} else if ( (uri.indexOf('http://ameblo.jp/[アメブロID]') != -1) ||
(uri.indexOf('http://ameblo.jp/[アメブロID]/') != -1)) {
$("#fb-comments").hide();
} else {
$("#fb-comments").hide();
}
});
</script>
そのままでは、フリープラグインの欄に入力しているので、
サイドバーに表示されている状態です。
これを記事本文の下に移動します。
それ以外のページの時は非表示に。
トップページには後で別のものを出したいので、
if文だけ指定してありますが、これは無くてもOK。
<script src="http://connect.facebook.net/ja_JP/all.js#appId=APP_ID&amp;xfbml=1"></script>
facebookコメント欄を表示する外部JavaScriptファイルを呼び出します。
これはfacebookでコードを取得できます。
関連ページ
公式のドキュメントはこちら(英語です)
Comments – Social plugins
http://developers.facebook.com/docs/reference/plugins/comments
WebページにFacebookのコメントボックスを挿入するには | xweb.wanichan.jp
http://xweb.wanichan.jp/tips/01.html
無料プレゼント
【Web担当者向け】SNS集客の全体像を55分で把握できる動画
受講料50万円で提供していた【ソーシャル・マーケティング認定コンサルタント養成講座】のエッセンスを凝縮した動画を無料プレゼントしています。
関連記事
-
-
Facebookファンページ作成実践セミナー、1月29日開催
ビジネス利用ならファンページは必須。 facebookは最初分かりにくいので知っている人に習っちゃうのが一番早いかも。 Face…
-
-
★注目のスマホ向けC2Cサービス
C2Cという用語はあまり有名では無いかもしれません。いわゆるヤフオクのような、ユーザー間の取引を仲介するサービスですが、各ジャン…
-
-
★ソーシャル・マーケティング協会のフォローアップ勉強会です!
第2部までの休憩の間にパチリ。毎月第1金曜は、会員さん向けの勉強会を開催しています。 今日は、Twitterの活用法、会員制ビジ…
-
-
一億円の価値がある輪ゴム
写真をご覧ください。はい。ただの輪ゴムです(笑) 一億円で売っている輪ゴムではなく、一億円の価値を生み出す輪ゴムです。 では、な…
-
-
YouTube集客、はじめの一歩。このソフトは入れておいて。【YouTube集客 vol.001】
大丈夫、あなたなら出来る。 .YouTubeに投稿を始めようとして、いきなりつまずくのが「撮影した動画が再生できない」ってことだ…
-
-
ホームページ作成用語集:HTML(エイチティーエムエル)
HyperText Markup Languageの略。ホームページを作成するための言語のこと。 つまりホームページ自体はHTM…
-
-
ソーシャルメディア最新ニュースまとめ [2014-08-08 : vol.203]
白鳥が大学の公開講座で登壇します! お子さんの安全安心スマホデビューをサポートします^^ ■親子で語…
-
-
ホームページ色名一覧
ホームページで使う色を16進数で指定するのが難しい人のために慣用名でも指定することが出来るようになっています。 考えた人は偉いで…
-
-
その手があったか!Androidガラケー登場。
LINEをやるためにスマホを買うユーザーも多い。このガラケーならLINEができる。両方の良いとこ取りで素晴らしいアイディア! A…
-
-
自分のためのメモを兼ねて、参考になるデザインを集めていきます。
アウトプットの前にはインプットが必要。圧倒的な量を見ていけば、そこに何かを見いだせるはず。 デザインを生業にしていない皆さんの参…

