「Facebookで共有する」ボタンを高速・快適に表示するスクリプトの説明

写真はうちのみーこ。

昨日のツイートボタン表示と同じようにFacebookでも「共有ボタンの表示が遅い＆重い」問題があります。

Facebookで共有ボタンを外すと当然速くなりますがサイトへのトラフィックが減る事になるので本末転倒です。

遅くなる＆重く感じる理由はページの初期化が一斉に行われている中でFacebookスクリプトの読み込みと初期化が同時に行われているからです。

そのため任意のタイミングで初期化を行う、例えば共有をする直前で初期化する、仕組みにするともっさり感じが減って快適になります。

以下、任意のタイミングでFacebook JavaScript SDKを初期化してボタンを押すと共有ボタン表示を行うサンプルコードです。

    function initFacebookAPI(loadedHandler) {
      window.fbAsyncInit = function() {
        FB.init({xfbml: false, version: 'v2.7'});
        loadedHandler();
      };
      (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 = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    }
    initFacebookAPI(
      function() {
        document.getElementById('show-fb-share-button').onclick = function() {
          FB.XFBML.parse();
        };
      }
    );

HTMLは以下のようにしておきます。

  <div>
    <button id="show-fb-share-button">show-fb-share-button</button>
    <span class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" ref="unique-parameter-value">
    </span>
  </div>

個別に説明して行きます。

以下スクリプトはクイックスタート: Facebook SDK for Javascriptで説明されている内容に手を加えたものです。

      window.fbAsyncInit = function() {
        FB.init({xfbml: false, version: 'v2.7'});
        loadedHandler();
      };
      (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 = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

まずsdk.jsが非同期に読み込まれます。読み込みが完了すると fbAsyncInit が呼び出されます。

fbAsyncInit では FB.init を呼び出しFacebook SDKの初期化を行います。

オプションの xfbml を false にすると、XFBMLマークアップを自動的にパースして共有ボタンを設置・表示する処理が行われません。共有ボタンは任意のタイミングで表示させたいので falseにして高速化します。

次に「シェアボタンを表示」を押したタイミングでFacebook共有ボタンを表示するようにします。

    initFacebookAPI(
      function() {
        document.getElementById('show-fb-share-button').onclick = function() {
          FB.XFBML.parse();
        };
      }
    );

事前にFacebookSDKの初期化が完了しているので FB.XFBML.parse を呼び出すとFacebook共有ボタンが表示されます。

以上でFacebook共有ボタンの表示タイミングをずらす事で快適に表示できるようになりました。

すっきり。

Facebook Javascript SDK の読み込みと初期化速度を測定するテストページを設置しました。

https://tkosuga.jp/experimental/comfortable-facebook-share-button.html

テストしてみるとSDKの初期化は速いですがFB.XFBML.parseに時間が掛かっているのが分かります。共有ボタンの表示はページ読み込み時からずらした方が快適になると思います。

この記事はレコーディングダイエットができるウェブアプリを開発した中で「Twitterで共有する」機能を実装している中で色々調べた内容をまとめたものです。

tkosuga.jp

インストール必要なしブラウザで動作するのでよかったら試して見て下さいね。