yasuoza diary

web and life

非同期ソーシャルボタン

facebookやツイッターのソーシャルボタンをサイトに置くことが多くなってきています。 特にサイトのトップページや、ニューストップページには記事の見出しごとにソーシャルボタンを配置したりして、 かなりページの読み込みが遅くなってしまっているページを良く見かけます。

そこで、初期のページ読み込み時にはソーシャルボタンは読み込まず、ユーザがソーシャルボタンを押す動作を した時に非同期でソーシャルボタンを読み込むようにするjQueryのスニペットを書きました。

デモは次のページで見ることができます。 Demo

詳しくはgistを参照して下さい。 Lazy share button (jQuery plugin)

基本的にはTechCrunchのコードを参考にしましたが、最適化を施したり、はてなブックマークにも対応しました。 良ければ使って下さい。