【Webサイト高速化】SNSソーシャルボタンをあと読み設定する方法とコードを紹介

ソーシャルボタンの読込みには時間も負荷もかかるため表示をあと読みにしました。すると体感速度がアップ。今回は表示速度の高速化第2弾としてソーシャルボタンの後読みの設定方法について共有したいと思います。

ゆめぴょんです。こんちはっ(^^)/

ブログやサイトにソーシャルボタンを設置するとシェアしてもらえる場合もあるので最近は必須です。普通の設置方法は下の記事を見てください。しかし毎回の読込みに時間がかかり、ページ表示速度も遅くなりがちなのが悩みでした。

◆保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK

WordPressで作成したブログにプラグインで設置する方法

◆WP Social Bookmarking Lightは複数ソーシャルボタン設置のWordPressプラグイン
◆WordPressサイト高速化でSEO対策！17の表示速度アップ術

Pocketボタンは後読みできないので通常どおり設置
ソーシャルボタンを設置する場所に書くタグ
ソーシャルボタンあと読みのソースコード
普通のブログやサイトにソーシャルボタン後読みを設置する方法
WordPress作成のブログにソーシャルボタン後読みを設置する方法
まとめ：今日のゆめぴょんの知恵

Pocketボタンは後読みできないので通常どおり設置

いろいろ試してみましたが「Pocket」ボタンについては後読みがうまく機能しませんでした。ググってみたけど他のブログでも「Pocket」ボタンだけは成功してなかったり。もし何か方法を知ってる人はぜひ教えてください。

ソーシャルボタンを設置する場所に書くタグ

設置場所には次のように記述してください。重要なのは1行目の「class=”social_btn”」です。classをidに変えたり、値の変更は可能ですが後ほど。「Pocket」ボタンが必要ない場合は2行目は削除してください。

[html]
<div class="social_btn" >
<div style="float:left;margin:0 16px 0 0"><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en">Pocket</a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></div>
</div><br style="clear:left" />
[/html]

ソーシャルボタンあと読みのソースコード

下のソースコードをフッターや</body>タグの直前などに記述してください。ただし1〜2行めの「Jquery」については他の箇所で読み込んでいるなら削除可能です。重複のないように注意してください。

はてなブックマーク、Google+、ツイッター、Facebookのソーシャルボタンを分けて記述してるので、不要なものは削除可能だし、好きなように並べ替えても大丈夫です。削除やソートは23行目を書き換えれることも忘れずに！

次の点にも注意して設置してください。

10行目「only＠2x.png」の「＠」（アットマーク）を必ず半角に書換え
scriptの終了タグはエスケープする（「\」をつける）
ボタン設置コード内には「’」でなく「”」（ダブル）を使う
23行目の$(‘div.social_btn’)を変更すれば、上のclass値も変更可能
24行目の「,3000」は3秒を表す。5秒後にあと読みするなら5000
Twitter、Facebookボタンには自分で書き換える場所が1箇所づつある
今回はボックス型のソーシャルボタン。変更は可能

普通のブログやサイトにソーシャルボタン後読みを設置する方法

WordPressでブログを作成してる人は、ここは飛ばして次の項目を読んでください。WordPressを利用せず普通のブログやサイトを作成してる人はこちらのコードを設置してください。

[html]
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript">window.jQuery || document.write(‘<script src="https://wispyon.com/wp/js/jquery-1.10.2.min.js"><\/script>’)</script>

// Hatena
hatena_btn ='<div style="float:left;margin:0 16px 0 0"><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加" data-hatena-bookmark-lang="ja">
<img src="http://b.st-hatena.com/images/entry-button/button-only＠2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"><\/script></div>’;
// Google+
google_btn = ‘<div style="float:left;margin:0 16px 0 0"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"><\/script><g:plusone size="tall"></g:plusone></div>’;
// Twitter
twitter_btn ='<div style="float:left;margin:0 16px 0 0;width:80px"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="●●あなたのtwitterアカウント「例：yume_pyon」">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"><\/script></div>’;
// Facebook
facebook_btn ='<div style="float:left;margin:0"><iframe src="//www.facebook.com/plugins/like.php?href=■■あなたのサイトのURL■■&send=false&layout=box_count&width=90&show_faces=false&action=like&colorscheme=light&font=arial&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:62px;" allowTransparency="true"></iframe></div>’;

window.addEventListener(‘load’, function() {
setTimeout(function(){
$(‘div.social_btn’).append(hatena_btn + google_btn + twitter_btn + facebook_btn);
},3000);
});
</script>
[/html]

WordPress作成のブログにソーシャルボタン後読みを設置する方法

以下のコートはテーマファイルに書く必要があります。テーマファイルがわからない人は、まずWordPress管理画面から「外観」→「テーマ編集」を選択。右のファイルメニューから「footer.php」を選び、</body>タグの直前に下のコードをコピペして保存すればOKです。

テーマファイルはWordPressで最も重要なファイルの1つなので、修正を加える前には必ずバックアップをとってくださいね。そして問題が起こったらすぐに元に戻してください。修正は自己責任でお願いします。

全てのページでソーシャルボタンを表示するなら、フッター「footer.php」の</body>タグの直前に下のコードをコピペ。

ソーシャルボタン設置が記事ページのみの場合は「single.php」や「content.php」の最終行にでもコピペしてください。またわかる人なら条件分岐で設置してもいいと思います。

// Hatena
hatena_btn ='<div style="float:left;margin:0 16px 0 0"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加" data-hatena-bookmark-lang="ja">
<img src="http://b.st-hatena.com/images/entry-button/button-only＠2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"><\/script></div>’;
// Google+
google_btn = ‘<div style="float:left;margin:0 16px 0 0"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"><\/script><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></div>’;
// Twitter
twitter_btn ='<div style="float:left;margin:0 16px 0 0;width:80px"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="yume_pyon" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"><\/script></div>’;
// Facebook
facebook_btn ='<div style="float:left;margin:0"><iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/wispyon&send=false&layout=box_count&width=90&show_faces=false&action=like&colorscheme=light&font=arial&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:62px;" allowTransparency="true"></iframe></div>’;

window.addEventListener(‘load’, function() {
setTimeout(function(){
$(‘div.social_btn’).append(hatena_btn + google_btn + twitter_btn + facebook_btn);
},3000);
});
</script>
[/html]