WordPress の Twenty Eleven テーマに Facebook のボタンを追加する

前回のツイッター編に続いて、Facebook 編。 前回、今回ともに Twenty Eleven という少し古めのテーマを使っていますが、公式デフォルトテーマは、新しいものでも同じような構造になっているので、同じ手法で行けることも多そうです。 今回は、header.php, content.php, content-single.php の3つのファイルに手を入れます。 まずは、header.php の HEAD のタグの中に以下のコードを追加

<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta property="og:image" content="投稿用画像のURL">

Facebook のボタンはクリックした後に、Facebook 側からクローラーがこちらのサイトのURL(後で指定する個別投稿ページのパーマリンク)を読みに来て、各種の情報を取得するようになっているようなのだが、このクローラーが正しい情報を読めるとは限らないので、個別投稿ページのヘッダーに、情報を埋め込んでおく。 無しでも動くし、シェアプラグインの類でもこのタグは使ってないものも多いが、安定動作のためには入れて置いた方がいい。イメージのURLも適当に明示指定するのがお勧めです。 ある程度のサイズ(260 px 角以上とかそのくらい)が必要なようです。 このヘッダーは、各ページに使用されるものなので、個別投稿ページ以外では正常に動作しない可能性があるが、悪さはしないので、これでいいかなと考えている。 また、Facebook のクローラーには、キャッシュが入っていて、一度失敗すると、しつこく失敗し続けることもあるようなので、もし、Facebook ボタンを追加するのであれば、面倒がらずに最初からちゃんとやった方が良いようです。 間違った情報がキャッシュされると Facebook 側のデバッグツールを使わないとなかなか消えなくて鬱陶しいです。 Facebook の SDK を読み込んでおきたい場合は、BODY の開きタグの直後に書いておけばいいです。 ちなみに Google Analytics のコードもここに置きます。 保存したら、次に、Facebook のボタンコード生成ページでコードを作ります。 https://developers.facebook.com/docs/plugins/share-button# IFRAME 版の方のコードの方が、ずれたりしにくいように見えるので、こっちを使います。 通常版の方は SDK の読み込みコードが必要です。 IFRAME 版は無くても大丈夫そうです。 生成したコードを、前回同様に content.php および content-single.php の以下のタグ

</div><!-- .entry-content -->

の直前にコードを貼り付けます。 次に、URL が入っている部分を、以下のコードに書き換えます

<?php urlencode(the_permalink()); ?>

ちょうど、href= から & layout の間になると思います。 これで保存して、完了です。 今回の記事では、以下のページを参考にしました。 WordPressでFacebookのいいね！ボタンを不具合無く設置する際のポイント