Facebookのソーシャルプラグインを表示するJavaScript SDKを書き換えよう

焦って変更しちゃいましたよ。

「Like Button」や「Like Box」などのFacebookソーシャルプラグインを設置する際に共通して記述するJavaScript呼び出しコードが、新しくなってたんですね。たいがいコピペするだけなので気付かなかった。。

気づいたきっかけは以下の記事。

JavaScript呼び出しのコードが変更されたのは2014年5月ごろ。それ以前に設置したコードの場合、2015年5月以降になると、動作しなくなってしまうとのこと。これは致命的ですね。

長いことブログやサイトを運営していると、古いコードのままになってるケースも多いのではないかと思うので、このタイミングで書き換えを行うのがいいんじゃないでしょうか。

使用中のコードがall.jsの場合は古いコード

「Web担当者Forum」の記事でも紹介されていますが、古いコードは2014年5月よりも前のものになります。時期以前にソーシャルプラグインを設置しているのであれば、古いコードの可能性はかなり高めです。

着目するのは、ソーシャルプラグイン設置時に記述するJavaScript SDKのコードです。

<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>

このコードの6行目の部分。all.jsと記述されてますよね?
これが2014年5月以前の古いコードになります。

新しいコードはsdk.js

今後、問題なく動作する新しいコードは、さきほどのall.jsがsdk.jsとなっています。「Like Button」でも「Like Box」でもどれでもいいんですが、ソーシャルプラグインを取得しにいけば、新しいコードが発行されます。

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

こんな感じですね。version=v2.0version=v2.3というパラメータも追加されています。

基本的にはこの部分だけ書き換えればOKです。

自分のサイトのコードが古いものか新しいものかをチェックするのは、直にコードを見るのが一番早いですが、利用しているブログサービスに依存している場合や、WordPressプラグインに頼っている場合は、チェックしづらいということがあるかもしれません。

そうした場合は、「Web担当者Forum」の記事で用意されているコードチェックのためのブックマークレットを使うと良さそうですね。

忘れないうちにチェックを、必要なら変更も含めて対応しておきましょう。