facebookのコメント投稿プラグインの実装方法

facbookcommentウェブサイトやブログの情報を拡散したい。そんなときにはfacebookのプラグインを利用するのがおすすめです。いいね!ボタンやコメント投稿機能など、11種類のプラグインが用意されて、facebookに連携されることにより訪問者の友達にも自身のサイトの存在や記事の情報を知らせることができます。今回はfacebookプラグインの中でも人気のコメント投稿プラグインの実装方法をご紹介します。

スポンサードリンク

facebookのコメント投稿プラグインの設置方法

facebookプラグインの定番「いいね!」ボタンと合わせて導入したいプラグインのコメントプラグイン。実装は簡単。facebook developersからコードを取得して、自身のウェブサイトに張るだけ。わずか数ステップで導入することができます。コメント設置欄を設けるにあたっては、facebook developersへの登録が必要ですので、登録したのち、以下のフローで実装してください。

facebook developersからコードを取得する

Facebook developersコメントプラグインのコード取得ページに行設置するコードを取得します。
Facebook developers(コメントプラグイン コード取得ページ)

makecodes

コード取得画面では、以下の項目を設定します。

・URL to comment on:コメント欄を設けるURL
・Number of posts:表示するコメント数
・Width:コメントを表示する枠の幅
・Color Scheme:背景色

これらを入力後、GetCodeをクリックすると貼付けるコードが表示されます。

コードを貼付ける

取得したコードを利用して埋め込みの作業を行います。まずは、body内に取得したスクリプトを埋め込みます。取得したコードのうち、以下の赤枠でかこったものを挿入してください。
code1

埋め込み後、コメントを表示したいページのエリアに、取得したコードを記述します。取得したコードのうち、以下の赤枠でかこったものを挿入してください。
code2

以上でコメント欄の埋め込み作業は完了です。埋め込むと、以下のように表示されます。比較的簡単に導入できるfacebookのコメント投稿プラグイン。facebookを利用すれば情報の拡散も期待できますし、サイトがにぎわってる感もでてきます。ぜひ利用してみてください。