WordPress で Facebook のいいね!ボタンを設置する方法

WordPress で Facebook のいいね!ボタンを設置する方法を紹介します。
例えば、記事一覧ページの記事ごとにいいね!ボタンを設置したいときに便利な方法です。

  1. 記事ごとにいいね!ボタンを設置
    1. いいね!ボタンのスタイルを選択
    2. <body> タグの直後に JavaScript SDK を追加
    3. いいね!ボタンを表示する場所にコードを追加
  2. ボタンの設置がうまくいかない場合の対処方法

記事ごとにいいね!ボタンを設置

WordPress で記事ごとにいいね!ボタンを設置する方法を紹介します。
次に紹介する方法は、記事一覧、記事詳細ページでボタンを設置することを前提に説明します。

1.いいね!ボタンのスタイルを選択

Facebook が提供しているいいね!ボタン構成ツールを使用して、ボタンを表示するためのソースコードを入手します。
例えば、
・「いいね!」するURL:http://hirashimatakumi.com/
・レイアウト:button
・ボタンサイズ:small
・アクションタイプ:like
・友達の顔を非表示
・シェアボタンを非表示
の場合のコードは次の通りです。

<div class="fb-like"
data-href="http://hirashimatakumi.com/"
data-layout="button"
data-action="like"
data-size="small"
data-show-faces="false"
data-share="false">
</div>

このままだと WordPress では動的に処理できないため、data-href の URLの取得部分を the_permalink に変更します。

<div class="fb-like"
data-href="<?php the_permalink(); ?>"
data-layout="button"
data-action="like"
data-size="small"
data-show-faces="false"
data-share="false">
</div>

いいね!ボタンのスタイルを変更する場合は、いいね!ボタン構成ツール でコードを新たに取得してください。

2.<body> タグの直後に JavaScript SDK を追加

ボタンを設置するページの <body> タグの直後に、次の JavaScript SDK を追加します。
WordPress の場合、テンプレートファイル header.php 内の <body> タグの直後に追加しましょう。

<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/sdk.js#xfbml=1&version=v2.9";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

コードの追加位置は使用しているテーマによって調整してください。
特定の Facebook アカウントといいねボタンを紐づける場合は、特定のアカウントで Facebook にログイン後 いいね!ボタン構成ツール のコードの取得からソースコードを再取得してください。

3.いいね!ボタンを表示する場所にコードを追加

記事ごとにいいねボタンを設置する場合は、メインループやサブループ内にボタンのソースコードを追加します。
例えば、メインループにいいね!ボタンを設置する場合は、先ほど用意したいいね!ボタンのコードをループ内に追加します。

<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>
<!-- いいね!ボタンを表示 -->
<div class="fb-like"
data-href="<?php the_permalink(); ?>"
data-layout="button"
data-action="like"
data-size="small"
data-show-faces="false"
data-share="false">
</div>
<?php endwhile; ?>
<?php else: ?>
<!-- 投稿が無い場合の処理 -->
<?php endif; ?>

ボタンの設置がうまくいかない場合の対処方法

ボタンの設置がうまくいかない場合は次の点をチェックしましょう。
・JavaScript SDK の設置場所
・いいね!ボタンのURLの指定
よくあるのが、すべてのいいね!ボタンが同じURLを指定してしまっている。
この場合は、ループ内のいいね!ボタンのURLが動的に変更されているかを確認しましょう。

まとめ

WordPress で Facebook のいいねボタンを設置する方法を紹介しました。
いいね!ボタンをオリジナルの画像で設置したい場合は、Facebook のシェアボタンを画像やテキストで設置する方法をご覧ください。

Facebook のシェアボタンを画像やテキストで設置する方法

スポンサーリンク

合わせて読みたい関連記事