テクノロジー・動画・写真・デザインとか

Facebookいいねボタン等を高速表示させるための非同期まとめコード

ブログなどを運用していて、FacebookのいいねボタンやTwitter、Google + などのソーシャルボタンを設置している人は殆どだろうが、JavaScriptのデータ転送が原因となってページの表示が重く感じることもしばしば。

そこでJavaScritpのデータ転において、送信側と受信側のタイミングの一致を気にせずに通信をやり取りできる非同期通信を利用することで、データ転送の効率は下がるものの、遅延を感じさせずに体感的にページ表示の高速化をさせることができる。

大抵の場合、ソーシャルボタンのコードの中に「async = true」のような感じで記述すれば、非同期通信の設定をすることができるが、この非同期通信について色々と調べていたら、Facebook、Twitter、Google + 、はてなブックマークのソーシャルボタン、さらにはGoogle Analyticsコードをまとめたものがこちらのサイトに紹介されていたので、ちょいとピックアップ。

Javascriptコード

「UA-XXXXXXXX-X」となっている箇所は自分のGoogle AnalyticsのトラッキングIDを入れ、 </body>タグの前にでも挿入。

続きを読む


AnalyticsのIDは、「アナリティクス設定」、「トラッキング情報」で確認できる。

ボタン

以下は、Facebookいいねボタン、Twitterのツイートボタン、Google Plusoneボタン、はてなブックマークのボタンを挿入するためのタグ。

通常のボタン

こちらは通常のボタン、好きな場所に挿入。
Twitterボタンのdata-via=”eiz”は自分のIDに変更、 data-lang=”ja”を削除すると英語表記になりボタンがスマート。

ボックス型ボタン

こちらは、ボックス型のボタン。

これで、色々とごちゃごちゃしているソーシャルボタンのコードがかなりスッキリするのではないだろうか。

Adsenseも非同期コードがベータ版として使用可能

ブログでAdsenseを利用している人は、ほとんどだと思うが、実はこのAdsenseも非同期コードをベータ版として公開している。

Adsenseのコードを選択する時に、非同期コードを選択して貼り付けるだけだ。
Adsenseの非同期コード

これでユーザーの体感速度は向上するので、ページ離脱を少しでも防げるだろう。