WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

JQ

2015/04/15

あと2週間で動かなくなる!古いFacebook「いいね!ボタン」は早急な対応を!

投稿者: JQ
カテゴリー: マークアップ >Facebook

Like

最近は、Facebookのいいね!ボタンが設置されていないWebサイトのほうが珍しいというほど、あらゆるWebサイトにいいね!ボタンが見かけられるようになりました。

しかし、そのいいね!ボタンを設置したのが2014年5月より以前の場合は、来月の2015年5月から動作しなくなる可能性があるということなので、今回は現在設置しているいいね!ボタンが、来月からも動作するのか調べる方法をご紹介します。

JavaScriptの呼び出し部分をチェック

2015年5月から使用できなくなる例

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

古いJavaScriptで呼び出している場合は、上記5行目に“all.js”と書かれています。
このままでは5月以降はいいね!ボタンが使用できなくなってしまいます。

これを以下の様に書き換えます。

今後も使用できる例

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

ご覧のように、5行目の“all.js”“sdk.js”に変更されています。また、“appId”の後ろに“&version=v2.0”という記述が加わっています。

お使いのいいね!ボタンのJavaScriptの記述が“all.js”の場合は、4月30日までに対応が必要になります。

iframe版のいいね!ボタンも要注意

先ほどまではJavaScriptでいいね!ボタンを呼び出している事例について説明しましたが、iframe版のいいね!ボタンにも対応が必要になるようです。

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=320&amp;appId=xxxxxxxxxx" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true">
</iframe>

iframe版のいいね!ボタンのソースコードに対しては、“/www.facebook.com/”の後ろに
“/v2.0/”というバージョン番号を追記すればOKです。

新いいね!ボタンは2016年4月30日まではサポート

Facebook公式の発表によると、上記の新しい「いいね!ボタン」は、2016年4月30日までは確実にサポートすると記載されています。
詳しくは以下の公式ページをご覧ください。

Facebook バージョンスケジュール

便利なチェック用ブックマークレット

現在、使われているいいね!ボタンが古いものなのか新しいものなのか、ワンクリックでチェックしてくれるブックマークレットが下のWebサイトで提供されています。
ソースコードを見なくてもチェックすることができ、とても便利です。ぜひ利用してみてください。

まとめ

このようなSNS系のAPIなどを利用していると、一度作成した後は、そのまま放置しているという方も少なく無いと思います。
ですが、今回のように仕様が変更されることが少なくないため、知らない間に動かなくなっていたという事態にならないためにも、普段からFacebookやTwitterなどのリリースに気を配っておくことが必要です。

これまでは、生成されるコードをそのままコピペしていただけという方も、これを機会にもう一度、管理しているWebサイトのAPI関連のチェックをしてみてはいかがでしょうか。

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ