ホーム >  facebook >  WordPressにfacebookコメントを設置


Posted:2014/11/16 9:00:49 AM|Category : facebook

WordPressにfacebookコメントを設置

wordpressは、もともとコメント機能を持っています。
しかし、通常のコメント機能ではなく、facebookのコメントを、ホームページに設置することもできます。

完成イメージ

fb0009

準備

まだ開発者登録していない場合は、先にデベロッパー登録する必要があります。
Facebookデベロッパーに登録する

Facebookコメントを使うメリット

コメントをfacebookにすると、以下のようなメリットがあります。

  • 実名なので荒らされにくい
  • コメントした人のウォールに流れれば、アクセスアップが狙える
  • 読者との交流が図りやすい
  • 手軽にコメントできる雰囲気のデザイン

手順

①デベロッパーページを表示します。 
Facebook開発者ページ

②トップのナビゲーションにある「Docs」をクリックして開きます。
左サイドにある「sharing」→「ソーシャルプランニング」→「Comments」の順に開きます。
fb0006

③必要な項目を入力して「GetCode」ボタンをクリックします。
fb0007
URL to comment on:ホームページのURL。
Width:facebookコメントの横幅。
Number of Posts:表示するコメントの数。

④プラグインコードが表示されます。
HTML5をクリックして、上下2つのコードをコピーします。
fb0008

⑤上部の1つ目のコードを、bodyタグのすぐ近くに設置します。
ファイルは、index.phpまたはheader.phpです。

<body <?php body_class(); ?>>
<div id="fb-root"></div>
<script>(function(d, s, id) {

~中略~

}(document, 'script', 'facebook-jssdk'));</script>

⑥下部の2つ目のコードを、WordPress用に修正します。
そのままコピペすると「http://example.com」に対してのコメントになってしまいます。
hrefへ、記事のURLを指定しましょう。
WordPressで記事のURLを指定するには<?php the_permalink(); ?>を使います。

変更前

<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10">
</div>

変更後

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="470" data-num-posts="10">
</div>

⑦下部の2つ目のコードを、コメントを表示した居場所に記述します。
<?php comments_template( ”, true ); ?>というコードデフォルトのコメント欄を表示しています。
これを、先ほどの⑥のコードに置き換えます。

変更前

<?php comments_template( '', true ); ?>

変更後

<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10">
</div>

⑧ホームページに以下のように表示されれば完成です。
fb0009


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告