ザツログ

雑学、幕末、80年代、ブログカスタマイズ、ITトラブルシューティングなど。

MENU

『Facebookコメントプラグイン』をはてなブログに設置する方法

f:id:maekeeeeen:20140915040024j:plain

一般的なコメント欄ではなく、Facebookアカウントでログインして書き込みするコメント欄を使用しているブログやサイトが増えてきました。
そこで、『Facebookコメントプラグイン』をはてなブログに設置する方法を紹介します。

 

コメントプラグインのコードを生成

まず、Facebookにログインした状態で、下記のソーシャルプラグインのコードを生成するページへアクセスします。

各項目に情報を入力します。

----------------------------------------------

[URL to comment on]

プラグインを設置するURLを入力。
※後で、記事のURLに変更しますが、ここは一時的にサイトのURLを入力して下さい。

 

[Number of posts]

標準状態で表示されるコメントの数を設定します。
※初期値は『5』になっています。

 

[Width]

横幅を設定します。
※初期値は『550』になっています。

 

[Color Scheme]
背景色light(白)dark(黒)から選びます。
※初期値は『light』になっています。

 ----------------------------------------------

 

上記4項目の入力が完了したら、『Get Code』ボタンをクリックします。

f:id:maekeeeeen:20140915040145p:plain

 

上記で設定したプラグインコードがプレビューされますので、『HTML5』を選択します。

f:id:maekeeeeen:20140915040157p:plain

青で囲ったスクリプト部分と、緑で囲ったプラグインコードの部分が必要になりますので、画面を開いたままにしておきます。

 

はてなブログへの設置方法

はてなブログ管理画面より『デザイン』設定を開きます。

カスタマイズ』 > 『サイドバー』 > 『モジュールを追加』を選択します。

HTML』を選択し、コードの入力部分(青囲み)に、『Facebookコメントプラグイン』生成ページで作成したスクリプト(青で囲ったスクリプト部分)を貼り付けます。
なお、サイドバーへ表示させない為に『タイトル』には何も入力しないで下さい。

f:id:maekeeeeen:20140920145331p:plain

 

次に各記事へプラグインコードを貼り付けます。

はてなブログ管理画面より、『記事を書く』 > 『HTML編集』を選択します。

②Facebookのコメント欄を設置したい場所(記事の下)に、『Facebookコメントプラグイン』生成ページで作成したプラグインコード(緑で囲ったプラグインコードの部分)を貼り付けます。

③プラグインコード内のURLを、該当記事のURLに変更します。

例えば、この記事のURLは『http://blog.maekeeeeen.com/entry/2014/09/17』となりますので、以下のように編集(赤文字を追加)します。

<div class="fb-comments" data-href="http://blog.maekeeeeen.com/entry/2014/09/17" data-numposts="5" data-colorscheme="light"></div>

Facebookにログインした状態で、書き込みができるか確認しましょう。

 

匿名で書き込みができるコメント機能と違い、『Facebookコメントプラグイン』は、基本実名ベースのFacebookアカウントを持っていないと書き込めない為、コメント欄が荒れにくいので利用者が増えています。