WordPress 記事ごとに Facebook のいいね！ボタンを設置する方法

最終更新日 2021.01.12 - 公開日 2017.07.09

by Takumi Hirashima

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

記事ごとにいいね！ボタンを設置
ボタンの設置がうまくいかない場合の対処方法

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

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

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

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

<div class="fb-like"

  data-href="https://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> タグの直後に追加しましょう。

コードは常に更新されているため、最新のコードをオフィシャルサイトから入手してください。
特定の Facebook アカウントといいねボタンを紐づける場合は、特定のアカウントで Facebook にログイン後いいね！ボタン構成ツールのコードの取得からソースコードを再取得してください。

合わせてツイートボタンを設置したい場合はWordPress 投稿に Twitter のツイートボタンを設置する方法をご覧いただくか、またはオフィシャルサイトを参照してください。

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 のいいねボタンを設置する方法を紹介しました。
Twitterのツイートボタンを設置したい場合はWordPress 投稿に Twitter のツイートボタンを設置する方法をご覧ください。
いいね！ボタンをオリジナルの画像で設置したい場合は、Facebook のシェアボタンを画像やテキストで設置する方法をご覧ください。