Facebook プラットフォーム変更に合わせて「いいね!」ボタンのコードを新しく書き換えました

Facebook の「いいね!」ボタンを新しいコードに書き換えた

Facebook の「いいね!」ボタンを新しいコードに書き換えました。参考にしたのはこちらのリンク先です。

いいね!ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります(公式情報) | 編集長ブログ―安田英久 | Web担当者Forum

「いいね!」ボタンは記事をシェアしてもらうために設置します。設置方法はFacebook Developers で登録して、それからサイトに貼るコードをもらうのですが、そのコードの記述が少しだけ変更しました。

リンク先から引用します。

なぜ、いいね!ボタンが動かなくなるの?

これは、Facebookプラットフォームのアップグレードにともなう新バージョンのAPI提供によって、古いバージョンのAPIの提供が打ち切られることが原因です。

Facebookは、2014年4月30日に、新しい「バージョン2.0」のAPIを導入しました。それによって、それまで使われていたバージョン1のAPIは、1年後の2015年4月30日で有効期限が切れると決められました。

いいね!ボタンが2014年4月30日より前に設置されていた場合は、バージョン1のAPIを使うようになっているため、2015年4月30日を過ぎると動かなくなるというわけです。

Facebook プラットフォームアップグレードガイド

Facebook プラットフォーム変更ログ

Facebook プラットフォームのバージョン管理

くわしい内容は「Web担当者Forum」の該当ページをご覧ください。運営しているサイトの「いいね!」ボタンが古いタイプかどうかを判別するブックマークレットも公開されています。

 コードの変更箇所

新しいバージョンの「いいね!」ボタンのコードは、以下のようになります(これは公式で挙げられている例)。

変更しているのは6行目の、

//connect.facebook.net/en_US/sdk.js#version=v2.0&xfbml=1&appId=113263196637420

の部分です。以前は「all.js」とあるだけでした。ここだけ見れば小さな変更点ですね。

変更方法は、とくに難しくもなく、公式ページで簡単に作れます。もしXHTML や<iframe>で作ったコードをHTML5 に対応させたいときも、以下のリンク先で変更できます。

Facebook「いいね!」ボタン作成ページ

Facebook 「いいね!」ボタン作成公式ページ 

この方法は自分でHTML に書き込んでいくので、慣れていない人には難しいかもしれません。

WordPress のサイトでプラグインを利用しているなら

WordPress で作っているサイトであれば、プラグインを使用している方は多いと思います。たとえば、以下のプラグインは有名です。

WordPress › WP Social Bookmarking Light « WordPress Plugins

おそらく、215年5月までにはソーシャルボタン系プラグインのアップデートがなされ、Facebook プラットフォームの変更に対応しているはずです。

したがって、とくに自分ですることは何もありませんが、3点だけ注意が必要です。

  • 2015年5月の時点でそのプラグインが対応しているかを確認する
  • プラグインの開発・更新そのものが停止していないかを確認する
  • ソーシャルボタンが含まれている配布テーマを利用しているのであれば対応しているかを確認する

これらのことをチェックしておけば大丈夫でしょう。もし、対応しなければ、新しい類似のプラグインやテーマを探せばいいだけです。

WordPress のテンプレートタグで「いいね!」ボタンを修正

また、WordPress で投稿していく記事ページのURLを個別に指定していく必要はありません。WordPress 関数(テンプレートタグ)を利用しましょう。

Facebookの公式ページで「いいね!」ボタンのコードを取得したら

2行目のリンク先を、テンプレートタグ<?php the_permalink();?> に置き換えます。

これで「いいね!」ボタンのURL は各々の記事に合わせたリンク先を自動で出力してくれるようになります。

関連記事

Google Analytics のトラッキングコードをプラグインなしで埋め込んでみました:Google の推奨する PHP の設定方法

いままではかんたんに設置できるプラグイン「Google Analyticator」を使っていたのですが、サイトデザインも一新したことなので、プラグインの数を整理・削減していっています。今回はGoogle が提供しているアクセス解析サービスの…

プラグインなしで WordPress サイトにソーシャルボタンを設置する方法

ソーシャルボタンを作るの備忘録 各種ソーシャルボタンの作成手順をまとめました。いろんなところで解説されている内容とほとんど同じです。自分が忘れないようにするためと、ひとつのページにまとめておくと、あとで修正するときに便利だからメモの代わりに…

PageSpeed Insights で「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されたときの修正方法

Google Developer では無料サービスの1つとして「PageSpeed Insights」という「ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための修正方法を提案してくれるツール」が提供されています。 Pag…