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

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

アメブロ(ブログ)記事から直接facebookでコメントしてもらう方法(その3)

 投稿日時:

この記事は約 7 分で読めます。

大丈夫、あなたなら出来る! 
ソーシャル・マーケティング協会 代表理事の白鳥友康です。

3/2にfacebookコメントのソーシャルプラグインがアップデートしました。この新コメント機能、今までとはうって変わって【超】強力なクチコミ効果があります。これまでfacebookコメントを設置していた人もそうでない人も、ぜひこの記事を読んで設置してみてください。

アメブロの記事URL(単独記事ページ)を表示しているときに、
「なうで紹介」「mixiチェック」「ツイートする」ボタンの下に

$売れる!ホームページの作り方

こんな感じのコメント入力欄を表示します。

各記事に頂いたコメントは、そのままコメントしてくれたユーザのウォールに表示され、自分のウォールにも表示されまるので、クチコミ効果も絶大です。

旧コメント機能ではアラート機能がなく、記事にコメントしてくれたことを知るには、その記事を改めてチェックする必要があったのですが、新コメント機能では自分のウォールに表示され、かつ、facebookのお知らせにもアラートが出るので、せっかく読者さんからいただいたコメントを見逃すことがありません。この点が、個人的にものすごーく気に入っています。 残念ながら「お知らせ」の機能は削除されてしまったようです。とても便利な機能だったので、激しく残念です。現在は、別の方法でコメントが書き込まれたことを知る方法をテスト中です。(2011/03/26追記)

このfacebookコメント機能、とっても便利なのでいろんなサイトに組み込みしたいところですが、アメブロでは記事中に使えるHTMLタグが制限されているので、フリープラグインとして導入します。フリープラグインとして表示後、JavaScriptで表示位置を変更するという手段を取る必要がありますのでご注意を。

facebookアプリIDの取得

まず最初にfacebookのアプリIDが必要なので、こちらのページから申請してアプリIDを取得しておいてください。

Create an App – Facebook開発者

コメント欄を設置したいサイトの名前とURLを記入して「Create app」をクリックしてください。アプリIDはただの数字の羅列です。後で使いますので大切に保管しておいてください。

コメント欄埋め込み用のコードを取得

次に埋め込み用のコードを取得します。こちらのページでいろいろ設定を調整して「Get Code」をクリックすると、コードを生成してくれますよ。

Comments – Facebook開発者

各項目の説明

◯URL to comment on
コメント欄を関連付けるURLを指定。アメブロに設置するには、この部分でちょっと小技を使うので、ひとまず最初から入っている「example.com」でOK。

◯Number of Comments
コメント欄に表示するコメントの最大数。ここは好きな数に指定してください。

◯Width
コメント欄の横幅です。ここはサイトに合わせて適当に指定してください。このブログのテンプレートだと横幅420です。

コメント欄埋め込み用コードのカスタマイズ

埋め込み用コードが取得できたら、アメブロに設置するためにコードをカスタマイズしますので、メモ帳などのテキストエディタに一旦コピペしましょう。コードをコピペする前に、下のコードで【アプリID】となっている部分を、先ほど取得したあなたのアプリIDに置き換えるのを忘れないようにしてください。

<div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=【アプリID】&amp;xfbml=1"></script><fb:comments href="example.com" num_posts="2" width="420"></fb:comments>

このブログに貼りつけてあるのはこんな感じのコードです。facebookで生成したコードをそのまま貼り付けると英語になってしまいます。日本語にしたい場合は「en_US」の部分を「ja_JP」に変更すればOKです。

アプリIDを入力して日本語化が出来たら、そのコードを<div>タグで囲います。これは後で表示位置を変更するのに使いますので、以下を参考に<div>タグを追加してください。<div>タグのidには「fb-comments」を指定。これはJavaScriptが分かる人以外は変更不可。

<div id="fb-comments"><div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=【アプリID】&amp;xfbml=1"></script><fb:comments href="example.com" num_posts="2" width="420"></fb:comments><!-- /[#fb-comments] --></div>

ここまで出来たら先述のアメブロに設置するとき限定の小技を使います。「Get Code」をするときに仮で入力しておいた「URL to comment on」の部分がありますよね。「example.com」のままにしておいた部分です。

上記のコードの中から「example.com」を探して「%%current_uri%%」に変更してください。変更するとこうなります。

<div id="fb-comments"><div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=【アプリID】&amp;xfbml=1"></script><fb:comments href="%%current_uri%%" num_posts="2" width="420"></fb:comments><!-- /[#fb-comments] --></div>

次に<script>タグを別に分けておきます。こちらを【埋め込み用コードA】とします。

<script src="http://connect.facebook.net/ja_JP/all.js#appId=【アプリID】&amp;xfbml=1"></script>

こちらを【埋め込み用コードB】とします。

<div id="fb-comments"><div id="fb-root"></div><fb:comments href="%%current_uri%%" num_posts="3" width="420"></fb:comments><!-- /[#fb-comments] --></div>

ひとまずこれで埋め込み用のコードの準備は完了です。

アメブロに設置するためのカスタマイズ

アメブロのフリープラグインの編集エリアに、以下のコードをコピペしてください。コピペをする際に【埋め込み用コードA】【埋め込み用コードB】の部分を置き換えるのを忘れないようにして

カテゴリ - 未分類
タグ - 

無料プレゼント

【Web担当者向け】SNS集客の全体像を55分で把握できる動画

受講料50万円で提供していた【ソーシャル・マーケティング認定コンサルタント養成講座】のエッセンスを凝縮した動画を無料プレゼントしています。

ダウンロードはこちら

  関連記事

no image
【効率的にお礼状が書ける魔法の表現】「仕事のヒント」123

個人的メモです。 ┃–「仕事のヒント」神田昌典365日語録–     No.123╋━━━━━━━━━━…

unnamed
Google+を活発に利用するユーザーはほとんどいない、という分析結果

ま、分かっていたことではありますが(苦笑) 活発にGoogle+への投稿を行っているユーザーは全体のたった9%とのこと。Goog…

WishpondLikesInfographic.jpg  850×6176
[ほぼ日] Facebookページのファンを増やす7つの方法

Facebookページのファンが集まらないとお悩みなら、チェックしてみてください。王道の方法が多いですが、王道を知っておくのも重…

Fotolia_55349930_Subscription_Monthly_M0411
チャンネル登録144人。「YouTube Space Tokyo レッスン動画制作ラボ」無事、応募できました^^

  大丈夫、あなたなら出来る。 .先日はチャンネル登録のご協力ありがとうございます。おかげ様で144人の方に登録いただ…

Twitterの時でも、「マフィアファミリーからのDMが頻繁に送られてくる」

なんてことが発生していましたが、最初の頃は自分で気をつけながら使う必要がありますね。 Facebookのアプリを安全に利用するた…

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

[2012/08/17 : vol.001] ————— NHN J…

Zemanta Related Posts Thumbnail
VALUE-DOMAINでドメインを取得する方法

○空きドメイン検索 こちらのページから取得したいドメインを検索してみましょう。  ↓ ↓ ↓バリュードメイン 「希望ドメイン名」…

2015-04-22 14.38.56
★建築業界の皆さま向けに、YouTube戦略動画セミナー開催中です。

昨日に引き続きトステムマネジメントシステムズ様にてセミナー登壇。今日は、いま大注目のYouTubeを戦略的に使いこなすノウハウで…

YUK_6210
白鳥友康のプロフィール

★白鳥友康(しらとり ともやす) 一般社団法人ソーシャル・マーケティング協会 代表理事ソーシャルメディア専門のWeb制作会社 株…

no image
日本におけるソーシャルメディア普及率調査 利用者数の推移(2012年3月)

こんにちは。ソーシャルメディア専門ウェブ制作会社代表の白鳥友康です。 最新のソーシャルメディア利用状況レポート。3月のものですが…