Blog

FacebookのLikeボタンの読み込みが遅いときにチェックするべき項目

2014.06.24Cat:facebook デザイナー

Webページの制作で、FacebookのLikeボタン(「いいね!」ボタン)を設置するとき、

サーバーや端末などの環境による影響も原因になることがありますが、

異常に遅いときは、設定等に原因がある可能性もあります。

 

Likeボタンが遅いときにチェックしてみるといいかもしれないポイントをまとめましたので、

ご紹介いたします。

 

ポイント1 OGPに誤りがないか

私はこれで引っかかってしまったのですが、

OGPの設定が間違っていると、Likeボタンの読み込みがとても遅くなります。

また、Likeボタンをテストしてみて、エラーが起こったり、タイムラインに表示されない場合も、

OGPの設定が原因であることが多いようです。

OGPのエラーは↓コチラでチェックできます。

https://developers.facebook.com/tools/debug/

 

私の場合、

↑この画像を設定するところを間違えてしまったのが原因で、読み込みが遅くなっていました。

ここのURLには相対パスではなく、絶対パスを入力する必要があります。

ここが相対になってしまっていたり、リンク切れのURLになってしまっていると、エラーとなってしまうようです。

 

また、WPなどCMSで各ページのOGPを切り替えている場合に、全ページでエラーが起こってしまう場合は、

トップページのOGPだけが原因になっている場合もあるようですので、

まずはトップページからチェックされることをお勧めします。

 

ポイント2 Likeボタンのプラグイン設定が非同期読み込みになっているか

Likeボタンの通常の設定では、非同期読み込みは有効になっておらず、

Likeボタンが読み込まれるまで、ページの別のJavaScriptの読み込みにまで影響が出てしまいます。

それ故に体感としてとてもページの読み込みが遅く感じる原因になってしまいます。

 

こちらの設定方法は、
ページのヘッダーなどに設置しているJavaScriptのコード

ここに ” js.async = true;”を書き加えて、

このように書き換えます。

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ