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

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

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

FACEBOOK(LET) FrontFACEBOOK(LET) Front Photo by FACEBOOK(LET)

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

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.jssdk.jsとなっています。「Like Button」でも「Like Box」でもどれでもいいんですが、ソーシャルプラグインを取得しにいけば、新しいコードが発行されます。

[2015.04.11 追記]
sdk.jsのバージョンが2.3になったので書き換えました。なお、sdk.jsは必ずバージョンを付与しなければなりません。

<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」の記事で用意されているコードチェックのためのブックマークレットを使うと良さそうですね。

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

モバデビの最新情報をチェック