スポンサーリンク
ブログのコメント欄をFacebook仕様に変更しました。
設置方法はとても簡単でしたので設置手順をご紹介します！
ただし、作成にはFacebookの開発者登録が必要になります。
開発者登録が済んでいない方は、こちらのサイト様を参考にしてみて下さい。
スポンサーリンク
新しいアプリを作成
コメント欄を設定するためにFacebookのデベロッパーページ ヘアクセスします。
ログイン後、「新しいアプリを作成」ボタンをクリックします。
アプリの登録
アプリを作成する際にアプリ情報を入力するウインドウが表示されます。
「App Name」と「App Category」が必須項目になります。
AppNameは自分が管理する上でわかりやすい名前を付ければOKです。
アプリ登録完了
アプリの登録が完了したらこちらの画面が開きます。
これでコメント欄を作成する準備ができました。
次にこちらのコメント欄作成ページを開きましょう！
コメント欄作成用コード取得
ブログへ挿入するコメント欄の表示コードを取得します。
「Get Code」ボタンをクリックしましょう！
BODYタグ用のスクリプト反映
コメント欄を表示するために必要なコードは3つあります。
１つ目は、上部に表示されている長いプラグインコードをコピーして、<body>タグ内に配置して下さい。
この時、コード内のappId=”xxxxxxxxxxxxxx”となっている数字の部分をコピーして控えておいて下さい。
HEADタグ用のスクリプト反映
次に<head>タグ内に以下のメタタグを埋め込みます。
xxxxxxxxxxxxxxxの部分は、1つ前の手順でコピーした数字を埋め込んで下さい。
<meta property="fb:admins" content="xxxxxxxxxxxxxxx" />
コメント欄設置タグのスクリプト反映
最後にコメント欄をブログに表示させるためのスクリプトを反映します。
下記のコードをコピーして、Facebookコメント欄を表示したい場所に設置しましょう！
「data-width=”470″」の数字部分は横幅の指定になります。
デザインに合わせた数値に変更してお使い下さい。
<div class="fb-comments" data-href="<?php the_permalink();?>" data-width="470" data-num-posts="10"></div>
正しく設定できていれば、画像のようなFacebookコメント欄が表示されるようになります！
以上「Facebookコメントをブログに設置する方法」でした。
元々表示されていたコメント欄は消してしまい、Facebookコメントだけ表示するとスマートになりますね。
作業される前にバックアップファイルの取得をお忘れなく！
スポンサーリンク
