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

スポンサーリンク

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

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

FACEBOOK(LET) Front

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

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」でもどれでもいいんですが、ソーシャルプラグインを取得しにいけば、新しいコードが発行されます。

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

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

「Facebook」新着記事

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookの「Send Button」を独自ボタンで実装する方法

Avatar for ホシナ カズキ

ホシナ カズキ

知ってた? Facebookを操作するキーボードショートカットまとめ

Avatar for ホシナ カズキ

ホシナ カズキ

大幅に変更されたFacebookページの新デザインが徐々に開放されてきましたね

Avatar for ホシナ カズキ

ホシナ カズキ

【Facebook】ニュースフィードの動画自動再生をON/OFFする方法

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく