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のいいね!ボタンを不具合無く設置する際のポイント

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

WordPress のテーマをシンプルな Twenty Eleven にしてみた。
以前使っていた simplicity2 と比べると、大幅に機能ダウンだが、何となくシンプルなテーマにして、カスタマイズするのもいいかなと。

一番の問題は SNS のボタンがなくなってしまったので、とりあえず twitter のボタンだけ自分で追加してみることにした。

ページのソースを Chrome の [検証] 機能を使って探してみると、
content.php と content-single.php をいじれば良さそう。

twitter の公式ページに行って、リンクを作る。
https://about.twitter.com/ja/resources/buttons#tweet

URLを共有 と ツイート本文 の部分には、何か適当にダミー文字列を入れておき、リンク文字列を作る。

content.php ファイルから


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

という、タグを見つけて、その直前にリンクの文字列を入れる。

先ほどの URLを共有のダミー文字列を


<?php the_permalink(); ?>

に、 ツイート本文のダミー文字列を


<?php the_title(); ?>

に置き換えて保存。

再び、twitter のページに戻って、
・URLを共有をページのURLを使う
・ツイート本文をページのタイトルを使う
に設定して、リンク作成。

content-single.php ファイルで、先ほどと同じ div の閉じタグを検索し、その直前にリンクの文字列を挿入して保存。

これで使えるようになってるはず。
have fun!!