アメブロ(ブログ)記事から直接facebookでコメントしてもらう方法(その3)
投稿日時:
この記事は約 7 分で読めます。
大丈夫、あなたなら出来る!
ソーシャル・マーケティング協会 代表理事の白鳥友康です。
3/2にfacebookコメントのソーシャルプラグインがアップデートしました。この新コメント機能、今までとはうって変わって【超】強力なクチコミ効果があります。これまでfacebookコメントを設置していた人もそうでない人も、ぜひこの記事を読んで設置してみてください。
アメブロの記事URL(単独記事ページ)を表示しているときに、
「なうで紹介」「mixiチェック」「ツイートする」ボタンの下に
こんな感じのコメント入力欄を表示します。
各記事に頂いたコメントは、そのままコメントしてくれたユーザのウォールに表示され、自分のウォールにも表示されまるので、クチコミ効果も絶大です。
旧コメント機能ではアラート機能がなく、記事にコメントしてくれたことを知るには、その記事を改めてチェックする必要があったのですが、新コメント機能では自分のウォールに表示され、かつ、facebookのお知らせにもアラートが出るので、せっかく読者さんからいただいたコメントを見逃すことがありません。この点が、個人的にものすごーく気に入っています。 残念ながら「お知らせ」の機能は削除されてしまったようです。とても便利な機能だったので、激しく残念です。現在は、別の方法でコメントが書き込まれたことを知る方法をテスト中です。(2011/03/26追記)
このfacebookコメント機能、とっても便利なのでいろんなサイトに組み込みしたいところですが、アメブロでは記事中に使えるHTMLタグが制限されているので、フリープラグインとして導入します。フリープラグインとして表示後、JavaScriptで表示位置を変更するという手段を取る必要がありますのでご注意を。
facebookアプリIDの取得
まず最初にfacebookのアプリIDが必要なので、こちらのページから申請してアプリIDを取得しておいてください。
コメント欄を設置したいサイトの名前とURLを記入して「Create app」をクリックしてください。アプリIDはただの数字の羅列です。後で使いますので大切に保管しておいてください。
コメント欄埋め込み用のコードを取得
次に埋め込み用のコードを取得します。こちらのページでいろいろ設定を調整して「Get Code」をクリックすると、コードを生成してくれますよ。
各項目の説明
◯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】&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】&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】&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】&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万円で提供していた【ソーシャル・マーケティング認定コンサルタント養成講座】のエッセンスを凝縮した動画を無料プレゼントしています。
関連記事
-
-
12/21のTwitter stats for 白鳥友康@ウェブデザイナー
25,923 Followers (+490 yesterday, +347 on average) 25,048 Follow…
-
-
facebook:「いいね!」の押された数がわかる、アクセス解析「insights(インサイト)
こういったアクセス解析は、ちょっと手間が掛かりますが導入しておくと後々かなり役立ちますよね。 《参考記事》facebook:「い…
-
-
日本のfacebookユーザー数、現在768万人
微増。このデータは更新される頻度が一定ではないですが、おおむね最近は1ヶ月に100万人程度のユーザー増のペース。先日、Faceb…
-
-
クライアント様のfacebookページ作成中。まずはバナー画像だけできました。
売上増等経営コンサルティング 税理士法人 児玉税経http://www.facebook.com/kodamazeikei こち…
-
-
ほぼ日刊 ソーシャルメディア最新ニュースまとめ [2012/08/20 : vol.004]
動きの早いソーシャルメディア業界の情報の中から、これだけは読んでおきたいニュースを白鳥がピックアップ![2012/08/20 :…
-
-
【知っておきたいSEO対策の基本】
Meta Description は順位の上昇に大きな影響は与えないが、検索結果に表示されるため、今でもSEO対策上、重要な要素…
-
-
【知っておきたいSEO対策の基本】
内部SEO対策で良く出てくる見出しタグですが、ページとキーワードの関連性を強める魔法の杖という訳ではありません。キーワードを詰め…
-
-
バカッター教師【ソーシャルメディア最新ニュースまとめ:vol.215】
中学校の教師が生徒を正座させた写真をFacebookに投稿… 当たり前ですが、中学生にだって人権はあり…
-
-
[ほぼ日] Facebookは、すでにマスメディアになった
読売新聞の発行部数が約985万部、朝日新聞が約795万部。日本のFacebookユーザー数は2200万人。もうすでに2大新聞の発…
-
-
[facebook] 新ニュースフィードは読み手側の興味が反映しやすい。
リリースから数日経ちましたが、新ニュースフィードの使い勝手はどう感じていますか? 私は実に良いアップデートだと実感しています。 …