初代編集長ブログ―安田英久

いいね！ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります（公式情報）

古いいいね！ボタンは、そのまま放っておくと、2015年5月以降は動作しなくなります。Facebookに確認しました。

4169 968 864

今日は、いいね！ボタンについて。2014年5月より前に設置したいいね！ボタンは、そのまま放っておくと、2015年5月以降は動作しなくなります。これは、米Facebookに確認をとった公式情報です。

※2015-04-03　iframe版のいいね！ボタンに関する修正版コードの情報を追加しました。

いいね！ボタンの書き方、どうなってたら動かなくなるの？

いいね！ボタン（などFacebook用の各種コード）のJavaScript呼び出し部分が以下のように「all.js」になっていたら、古いコードです。2015年5月以降は動作しなくなります。

×2015年5月以降動作しなくなる書き方

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

新しいコードは、次のように「sdk.js」になっていて、さらに「version=v2.0」が追加されています。

○2015年5月以降も大丈夫な書き方

<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.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

HTMLやJavaScriptが苦手な人は、次のブックマークレットを使うと楽です。

いいね！ボタンをチェックして古くないか確認するブックマークレット

まず、上記のリンクを「ブックマークレット」としてブラウザに登録します。

IEでのブックマークレットの登録方法

Chromeでのブックマークレットの登録方法

Firefoxでのブックマークレットの登録方法

そして、いいね！ボタンを使っている自分のサイトのページ上で、そのブックマークレットを実行（クリック）してください。

古いバージョンのコードで書かれている場合には、次のように表示されます。

新しいバージョンのコードで書かれていたら、次のように表示されます。

古いall.jsを使っている場合は、どうしたらいいの？

Facebookのソーシャルプラグインの「いいね！ボタン（ウェブ）」のページを参考に、新しいコードに書き換えてください。

ソーシャルプラグイン「いいね！ボタン（ウェブ）」

わからなければ、とりあえずいまの「all.js」を呼び出している部分を探して「sdk.js」と変えるだけでも大丈夫のはずです。

ブログサービスなどを利用していて、サービスが提供する機能でいいね！ボタンを表示している場合は、そのサービスの運営者に修正を依頼してください。

~~ちなみに、iframe版のいいね！ボタンは、API変更の影響を受けないようです。~~

Facebookへの確認時にiframe版については聞かなかったのですが、公式の新しいコードを見ても以前と変わっていないようですので、おそらく大丈夫なんじゃないかと。

2015-04-03追記：　iframe版のいいね！ボタンに関しても、修正版コードが提示されていました。

Facebookプラグインのiframeやプレーンリンクバージョンを挿入する場合は、次のように、プラグインのソースパスの先頭にバージョン番号を追加します。
<iframe
 src="//www.facebook.com/v2.0/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80&amp;appId=634262946633418" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true">
>/iframe>

ソーシャルプラグイン

2015-04-30追記：　iframe版は、このブックマークレットではチェックできません。すいません。