WordPress Facebookコメント欄をブログに設置する方法！

Web・ブログのこと Wordpress
Array ( [0] => Array ( [parent] => 0 [slug] => web-tips [name] => Web・ブログのこと ) [1] => Array ( [parent] => 701 [slug] => blog [name] => Wordpress ) )
 
スポンサーリンク

facebook_comment
ブログのコメント欄をFacebook仕様に変更しました。

設置方法はとても簡単でしたので設置手順をご紹介します！

ただし、作成にはFacebookの開発者登録が必要になります。

開発者登録が済んでいない方は、こちらのサイト様を参考にしてみて下さい。

スポンサーリンク

新しいアプリを作成

コメント欄を設定するためにFacebookのデベロッパーページ ヘアクセスします。

ログイン後、「新しいアプリを作成」ボタンをクリックします。

facebook_comment

アプリの登録

アプリを作成する際にアプリ情報を入力するウインドウが表示されます。

「App Name」と「App Category」が必須項目になります。

AppNameは自分が管理する上でわかりやすい名前を付ければOKです。
facebook_comment

アプリ登録完了

アプリの登録が完了したらこちらの画面が開きます。

これでコメント欄を作成する準備ができました。

次にこちらのコメント欄作成ページを開きましょう！

facebook_comment

コメント欄作成用コード取得

ブログへ挿入するコメント欄の表示コードを取得します。

「Get Code」ボタンをクリックしましょう！

facebook_comment

BODYタグ用のスクリプト反映

コメント欄を表示するために必要なコードは3つあります。

１つ目は、上部に表示されている長いプラグインコードをコピーして、<body>タグ内に配置して下さい。

この時、コード内のappId=”xxxxxxxxxxxxxx”となっている数字の部分をコピーして控えておいて下さい。

facebook_comment

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_comment
以上「Facebookコメントをブログに設置する方法」でした。

元々表示されていたコメント欄は消してしまい、Facebookコメントだけ表示するとスマートになりますね。

作業される前にバックアップファイルの取得をお忘れなく！

スポンサーリンク

この記事は私が書きました。

管理人：カズヤ(@kazumiso_s)

31歳、横浜市在住の2児の父。本業はシステムエンジニアで目標は今の会社で取締役になること。「毎日に価値を見出す」ことを信念に置き、未来に役立つ情報を発信しています。難病「好酸球性副鼻腔炎」という嗅覚障害持ち。最近生まれて初めて坊主にした。詳細なプロフィールはこちらから

この記事をシェアはこちらから。

フォローして頂けるとブログの更新情報をお届けできます。

この記事が気に入ったら「いいね！」
最新情報をお届けします。

もう1記事いかがですか。

前の記事
次の記事