HOMEブログFacebookブログにFacebookのコメントボックスを設置しよう。

ブログにFacebookのコメントボックスを設置しよう。

投稿日:2013年05月17日

ブログにFacebookのコメントボックスを設置する事で、ブログとFacebookが連動して、Facebookを有効に活用する事が出来ます。

ご注意

ブログ移転に伴い、この記事は2013年5月に公開されたブログを一部修正して、再掲載しています。
元のブログはこちらです。
横浜で、ホームページ製作をしている自転車乗りの堅物。 横浜本田WEBブログ

ブログにFacebookのコメントボックスを設置しよう。

今日のお題は「Facebookのコメントボックス」 についてお話します。

フェイスブックのコメントボックスと言う物を見た事があるかと思います。

これ実は書き込んだ内容がそのまま、自分のタイムラインに表示されます。
つまり、外部で書いた内容が、そのまま自分の記事になる。
と言うモノです。

これをブログやニュース記事に連携させれば
書き込みが、そのままFacebookで拡散されます。

ブログなどの場合は、専用のコメント欄よりもずっと効果的です。
しかも、書き込みをする事で【いいね】を押した事にもなり、良い事だらけです。

Facebookに対する有用性と言う意味では、いいねボタンの比ではありません。

上の画像は、Facebookのタイムラインの画像です。
書き込んだコメント内容が表示されていますね。
先日のブログで書いた、OGPタグがそのブログに設定されていれば、ご覧の様に、
画像・タイトル・説明
がきちんと表示されますので、見た目も綺麗です。こうして見ると、OGPタグって大事ですよね。もしOGPタグが無ければ、単純にページタイトルとリンクURLが表示されるだけです。それでは、見た目で損をしていると思いませんか?

OGPタグについてはこちらをご覧ください。

さて、ではどの様にコメントボックスを設置するかですが、基本的なお話だけにさせて貰います。
と言うのも、実はブログに設置する場合、それぞれのブログ用に若干カスタマイズが必要になります。
ですので、今回は基本的な設置方法のみと言う事で、ご勘弁を。

もし、どうしても知りたいという方は、具体的なブログ名(アメブロ・ライブドア等)をコメントしていただければ、対応したいと思います。

コメントボックス

コメントボックスのソースコードは下のリンクから取得できます。

https://developers.facebook.com/docs/reference/plugins/comments/

URL to comment on

コメント欄を設置したい、サイトのURLを入力します。
この時、入力するのはドメインまでとしてください。

Width

表示するコメント欄の横幅です。何も設定しない場合は、横幅550pxが自動的に設定されます。

Number of posts

コメントを何件表示するかです。

最後に【Det Code】を押して、ソースコードが表示されます。

通常のブログであれば、表示されているコードをそのままコピーしてOKです。

1.JavaScript SDKを設置

上にあるJavaScript SDKをHTMLの<bode>タグの直後に書き込みます。※1

       <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/ja_JP/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        
		

2.コメント欄の設置

コメント欄を表示したい場所に、このコードを設置します。
この時に、このままのコードで設置してしまうと、このコメント欄は【hon-web.blogspot.jp】のコメント欄となってしまいます。

         <div class="fb-comments" data-href="http://hon-web.blogspot.jp" data-width="470" data-num-posts="10"></div>
        

例えば、コメント欄をブログの個別記事に対して設置し、個別にコメントを貰いたい場合には、下記の様に変更します。

	  <div class="fb-comments" data-href="【ここにブログの独自タグを入れる】" data-width="470" data-num-posts="10"></div>
	  

ページURLの箇所に、各ブログで使用するページ生成タグを挿入します。
このタグは、それぞれのブログによって違うので、利用しているブログの仕様を確認してください。

もし、このURL設定をしないとどうなるか……
先ほど言った様に、一つのドメインのコメント欄として、認識されてしまうので、全てのブログページで同じコメントが表示されます。

今回は、最低でもある程度HTMLの知識が必要になります。
まぁ、基本的にはコピー&ペーストで作業自体は簡単なのですが、ソースコードの何処に貼りつけるか?とか、ブログの独自タグの追加などと言った、少々込入った内容ですが、設置出来れば、Facebookに対しての効果は絶大です。

チャレンジして損は無いと思います。
各ブログの具体的な設置例などは、
アメブロ Facebook コメント欄
などの検索項目で検索出来るので、チャレンジしてください。
どうしてもわからない場合はコメントを頂ければ、調べる程度の事はしたいと思います。


このブログの初期公開は2013年5月です。

※1
現在は画面表示が少し違いますのでご注意ください。

お問い合わせはお気軽に

この記事が面白いと思ったら、下のボタンをお願いします。

御社にとってのホームページとは何ですか。

横浜でホームページ製作を始めて、10年以上が経ちます。ホームページ制作会社は、横浜にも数多くありますので、私の様な個人で仕事をしている者へのお仕事依頼はなかなかありませんが、ご相談頂ければ、フットワークの良さと、フレンドリーで身近にお役にたつようなお仕事を心がけております。

ホームページ製作はもちろんのこと、DM製作やパンフレット等の紙媒体の製作も行なっております。

最近は、CMS(主にWordPress・modx)によるホームページ制作を主に行なっております。

直接お話をお伺い出来るエリアは、横浜市内および、横浜近郊の神奈川県。東京都23区の一部とさせて頂いておりますが、エリア外でも対応が可能ですので、まずは、お気軽にご連絡ください。