ソーシャル・マーケティング協会 代表理事 白鳥友康の公式ブログ。Facebook、Twitter、YouTube、LINEなど、ソーシャルメディアを活用、集客する方法を無料でお届け。

ソーシャル★マーケティングの教科書 改訂版

アメブロ記事から直接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;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;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万円で提供していた【ソーシャル・マーケティング認定コンサルタント養成講座】のエッセンスを凝縮した動画を無料プレゼントしています。

ダウンロードはこちら

  関連記事

Zemanta Related Posts Thumbnail
浮気は調べられたら100%バレますね(笑)

クライアントであり友人の今野さんが本を出版しました。今野さんは浮気に特化したプロの探偵なのですが、いわゆる探偵という言葉が持つイ…

no image
【参考になるWebデザイン】

GoogleMaps + Flash のサイト。 デザインもシンプルだけど分かりやすくてすごく良くできていると思います。 Goo…

no image
【参考になるWebデザイン】

モノトーンでもここまで出来る。それは強弱がしっかり付いているから。 色に頼らず、白黒でも強いところは強く弱いところは弱く。 メリ…

3/29のソーシャルネットStats(Facebook Twitter)

facebookスポンサー記事広告のテストは今日で一旦終了。 facebookスポンサー記事広告には、2種類あって今度はもう一つ…

no image
この情報、探してました!

この情報、探してました! Timeline Photos

3/25のソーシャルネットStats(Facebook Twitter)

facebookスポンサー記事広告のCPC入札価格を調整しなおしました。 無事、インプレッションも回復しましたが、もう少し下げら…

cinema film
YouTube用に動画を撮影するときのポイント

クライアント様の無料動画講座の編集をしています。私も撮影される側になることが多いのですが、間違えてしまったり、途中で撮影を止めた…

2015-09-27 16.07.06
「仕事の能率」と「食べ物」の関係性

先日、人気の酵素ダイエットに使う酵素ドリンクを作ってきました。沖縄から取り寄せた100種類以上の無農薬やさい、無農薬くだもの で…

no image
ソーシャルメディア最新ニュースまとめ[2012/09/09 : vol.021]

動きの早いソーシャルメディア業界の情報の中から、これだけは読んでおきたいニュースを白鳥がピックアップ! —&#821…

no image
ホームページ作成用語集:HTMLファイル(エイチティーエムエルファイル)

ホームページの内容が記載されているファイル。 ブラウザ(ウェブブラウザ)で開くとホームページの内容が表示されます。 Window…