Facebookコメントの設置と設定 | ひいろんＢＬＯＧ

Facebookコメントの設置と設定

| 2014年10月11日(土) |

0 |

zenbackの導入で簡単に設置出来るFacebookコメントですが…

zenbackのFacebook comment

いいねボタンとシェアボタンがセットになってます。

これ単体で設置をする際は非常に便利なんですけど
ひいろんのブログではソーシャルボタンをまとめて設置して…
いいね＆シェアボタンもそちらに設置してあるんで
ちょっとくどいというか…
もやもやした感じになってました(^^;

理想的には…

理想とするFacebookコメント欄

こんな感じでしょうかね(^^

あと、ブログレイアウト的に
Facebookコメント欄をブログコメント欄の真下に設置したい
って事もあり…

この度、zenbackに頼らない形の単独設置を施してみました。 Facebookコメント欄の作成にあたり…

まずは、Facebookの開発者登録とアプリの作成が必要になります。

既にFacebookページを作成されてる方は必要ありませんが…

開発者登録とアプリ作成に関しては…

下記のサイトさんを参考に。。
（はい、他力本願です…爆）

Facebookアプリの開発者登録とアプリ作成手順 | TechMemo

アプリ作成を終えた所で…

引き続きFacebookコメント欄の作成に移ります。

コメント欄の作成ですが

【Comments Plugin - Facebook Developers】

から簡単に作成できます。

コメント欄作成ページにて…

(クリックで拡大画像)

設定を入力します

URL to comment on
　コメント欄を表示させるページのＵＲＬを入力します。
　この部分については後に変更しますが…
　とりあえずはブログのＵＲＬを記入しておきます。

Width
　コメント欄の幅を入力します。
　自分のサイトに合わせてご自由にどうぞ。

Number of Posts
　１ページに表示されるコメント数です。
　とりあえずデフォルトの５のままで良いかと。

Color Scheme
　ご自分のサイトのカラーに合わせて
　【lignt】か【dark】を選択しましょう。

入力し終えたら…
【Get Code】ボタンをクリックします。

すると、貼り付けコードが表示されるんで…

(クリックで拡大画像)

赤で囲ったコード

<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&appId=【自分のアプリＩＤ】";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

を<body>～</body>タグ内に貼ります。

ちなみに上記コードは他のFacebookソーシャルプラグイン
例えばいいねボタン・シェアボタン・Like Boxなど
と共通のモノになるんで、既に他のプラグインを導入済みの場合は
必要ありません。

青で囲ったコード

<div class="fb-comments" data-href="【表示させるサイトのＵＲＬ】" data-width="【コメント欄の幅】" data-numposts="5" data-colorscheme="light"></div>

はコメント欄の表示用コードなので…

表示させたい位置に貼りましょう。

ブログの場合、表示させるＵＲＬがページ毎に変わるんで…
ページのＵＲＬを表示させる独自タグを入力します。

【Serene Bachの場合】
<div class="fb-comments" data-href="{entry_permalink}" data-width="【コメント欄の幅】" data-numposts="5" data-colorscheme="light"></div>

次に…

サイトをFacebookアカウントと紐付ける為に

<head>～</head>内に