FacebookのLikeボタンの読み込みが遅いときにチェックするべき項目
Webページの制作で、FacebookのLikeボタン(「いいね！」ボタン)を設置するとき、
サーバーや端末などの環境による影響も原因になることがありますが、
異常に遅いときは、設定等に原因がある可能性もあります。
Likeボタンが遅いときにチェックしてみるといいかもしれないポイントをまとめましたので、
ご紹介いたします。
ポイント１ OGPに誤りがないか
私はこれで引っかかってしまったのですが、
OGPの設定が間違っていると、Likeボタンの読み込みがとても遅くなります。
また、Likeボタンをテストしてみて、エラーが起こったり、タイムラインに表示されない場合も、
OGPの設定が原因であることが多いようです。
OGPのエラーは↓コチラでチェックできます。
https://developers.facebook.com/tools/debug/
私の場合、
|
1 | <meta property="og:image" content="画像のURL" /> |
↑この画像を設定するところを間違えてしまったのが原因で、読み込みが遅くなっていました。
ここのURLには相対パスではなく、絶対パスを入力する必要があります。
ここが相対になってしまっていたり、リンク切れのURLになってしまっていると、エラーとなってしまうようです。
また、WPなどCMSで各ページのOGPを切り替えている場合に、全ページでエラーが起こってしまう場合は、
トップページのOGPだけが原因になっている場合もあるようですので、
まずはトップページからチェックされることをお勧めします。
ポイント２ Likeボタンのプラグイン設定が非同期読み込みになっているか
Likeボタンの通常の設定では、非同期読み込みは有効になっておらず、
Likeボタンが読み込まれるまで、ページの別のJavaScriptの読み込みにまで影響が出てしまいます。
それ故に体感としてとてもページの読み込みが遅く感じる原因になってしまいます。
こちらの設定方法は、
ページのヘッダーなどに設置しているJavaScriptのコード
|
1 2 3 4 5 6 7 8 | <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&appId=XXXXXXXXXXXX”; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script> |
ここに ” js.async = true;”を書き加えて、
|
1 2 3 4 5 6 7 8 | <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.async = true; //←ここ js.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=XXXXXXXXXXXX”; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script> |
このように書き換えます。
Author Profile
SHARE
