記事や固定ページにソーシャルボタンを設置している方は、たまに「ボタンの表示が遅くてページ全体が表示されなくて、とても重いな～」と思うことはありませんでしょうか。（私はよくありますね・・・）

今回は、「マウスオーバー時にソーシャルボタンを表示させる（読み込みをする）」これをWordPressプラグインでカンタンに実装する方法をご紹介します。

プラグインのダウンロード＆インストール

ではでは、早速プラグインをインストールしましょう。

WordPressの管理画面から、「プラグイン」→「新規追加」で「Lazy Social Buttons」と入力してプラグインを検索します。

下の画面が表示されるので「いますぐインストール」を押します。

インストールしたら、有効化で完了です。簡単ですね。

FTPからファイルをアップロードされたい場合は、こちらからzipファイルをダウンロードできます。 （※配布終了していました）

設定はとても簡単なものです

WordPressの管理画面から「プラグイン」をクリックして、プラグインの「Settings」をクリックします。

下の画面に移動します。

（※WordPressの管理画面から「設定」→「ディスカッション」でも同じ場所にたどり着けます。）

Twitterのツイートボタン、Google+1ボタン、FacebookのLikeボタン

ボタンの表示位置を変更できます。

設置サンプルはこうなります

１．ここに、マウスオーバーします。

２．スクリプトを読み込みを始めます。

３．表示完了しました。

ツイートボタンの表示が切れているので修正したい方は

WordPressの管理画面から、「プラグイン」→「プラグイン編集」→「Lazy Social Buttons」を選択し、「lazy-social-buttons/lazySocialButtons.min.js」を選択します。

if($m.options.twitter.related){a.attr("data-related",$m.options.twitter.related);}var el=$("<div />").addClass("lsbtwbox").attr("id","lsbtwbox-"+$m.id).css({"vertical-align":"top",position:"relative",width:"60px",overflow:"hidden",height:"20px",marginRight:"10px",display:"inline-・・・

上部付近のコードを探して、赤字の「width:”60px”」の数字を変更して調整しましょう。

変更したらファイルを更新しましょう。

まとめ

これを設置するメリットはページ全体の表示速度短縮です。

通常、ソーシャルボタンを設置する際は、ページ読み込み時に外部からボタンを表示するためのスクリプトを読み込んでいるのですが、ソーシャルボタンの表示タイミングを「マウスオーバー時」にしています。

この方法はWordPressプラグインを使用しなくてもできますが、手軽にできますね。

ちなみに、下記で紹介してある方法でもできます。

http://wp.tutsplus.com/tutorials/add-lazy-loading-social-sharing-buttons-to-your-wordpress-blog/

こちらはhtmlとcssとjsとphpの知識があれば、もっと思い通りにカスタマイズできます。

私のブログはこちらを挑戦してみようかな・・・