Google+バッジの非同期読み込み対応スクリプトを生成するには

18d839871b4f3e476619b5c0999e3f42.jpg

ココのところページ読み込み高速化の重要性をひしひしと感じ、いろいろと高速化を図っていました。

GooglePageSpeedの計測結果で「レンダリングを妨げているもの」のほとんどがソーシャルボタンに関連するものになってきたので、Google+バッジの貼り替えも行ってみました。

調べてみると、Google+バッジは読み込みを遅らせるためのスクリプトがGoogle+バッジページで生成できる、との記事多数。

それを使おうと思ったのですが、解決にしばし時間をとられ、2週間もすれば忘れる自らのポンコツ脳みその為にも備忘録的に記事にしてみました(^^ゞ

まずはGoogle+バッジの取得ページにGO!

Google+バッジの取得ページ

Google+バッジを取得するページ

バッジの取得方法については以下の記事で述べていますが、

普通にバッジを取得する方法:ソーシャルメディアの各ボタン・アイコン・バッジの設置方法

この設定の中で、詳細オプションというのが、非同期読み込みにするかしないか、を選択できるオプションらしいというのを知らずにおりました(-_-;)

らしい、というのは、オプションを以下のように選択し、

Google+バッジを非同期にするオプション

生成されるスクリプトと、

Google+バッジのスクリプト

Google+ バッジのページの下の方にある、「一般的な設定」の「JavaScript」の非同期読み込みタグ↓

Google+バッジの一般的な設定

とを比較すると、function以下が全く同じ^^;

ということは、この詳細オプション設定で生成されるタグは、非同期読み込みタグ、ということですね。

ここで、スクリプトパラメータに関する記載が以下のようにあり、

google+バッジ スクリプトパラメータ

指定を変更する必要がある、スクリプトパラメータというのは、多分、先程生成したコードの中の、

パラメータ

この部分。

ここに”parsetags: ‘onload'”を追記した方が良いのか、2日程(笑)ネット上を探してまわりましたが、見つからず。

とうとうフォーラムで質問しました(-_-;)

Google+フォーラム回答

とのご回答をいただきました<(_ _)>

なんだかすっきりしなかったのですが、ここで、+1ボタンのページを見てみたところ、そちらには非同期読み込みの例が記載されており、スクリプトパラメータに”parsetags: ‘onload'”の追記はされていなかったので、無しでOK!と判断しました

ということで、非同期でGoogle+バッジと+1ボタンを読み込みたい場合、詳細オプションで

  • ダイナミックにチェック、
  • デフォルトに●

の状態で、生成された最新コードを使用すればOK、のようです。

このタグの最適な配置場所は、

Google+バッジの一般的な設定2

ということですから、バッジタグの直後にこのタグを貼り付けます。

また、1つのページにスクリプトは1つだけでOKなので、+1ボタンと、バッジを両方設置するページの場合は、ページの最後の+1ボタンかバッジの直後か、</body>タグの直前に置くと良いでしょう。

それにしても。

何で非同期のオプション名が『ダイナミック』なのか・・不思議です^^;

ではでは、本日はこれにて。

お役に立てば幸いです(^^)

Published:2015/02/06

Written by