公式SNSボタンは重い！コピペでできるCSSのSNSボタンで軽くする

ブロブ等のWebサイトにFacebookやtwitterなどのSNSボタンを設置していますでしょうか？記事に「いいね！」を押してもらったりシェアしてもらうのに大切なアイテムですね。各SNSの公式サイトにもボタンの設置方法等が紹介されていますし、多くの方が利用しているのではないかと思います。

WordPressをご利用の方であれば、『WP Social Bookmarking Light』等のプラグインを利用して簡単にSNSボタンを設置することが可能です。

しかし公式のSNSボタンを利用することによるデメリットも存在します。SNSボタンを設置してあるページを読み込む（表示させる）のに、とても時間がかかり重いのです。Facebookの「いいね！」ボタンは特に重いような・・・。ユーザビリティやSEOの面でもページ表示速度が重要視されるようになり、「0.1秒でも早くしたい！」という方にとって無視することはできません。

もしページ表示速度が気になるようであれば、重い公式SNSボタンを廃止して軽いCSSのSNSボタンを利用してみましょう。当サイトでも読み込みに時間がかかっているのが気になり、公式SNSボタンは廃止することにしました。

コピペでできるCSSの軽いSNSボタン

画像などを利用しても良いのですが、より軽くコピー＆ペーストだけでも実現可能なCSSベースのSNSボタンをご紹介致します。Twitter・Facebook・Google+・はてなブックマークを設置可能です！

※LINEボタンも追加しました！（LINEアプリが入っている端末でないと機能しません。）

まずCSSのコードです。

#share ul{
	height:auto;
}
#share li{
	font-size:14px;
	float:left;
	text-align:center;
	width:84px;
	margin-right:1%;
	margin-bottom:8px;
	border-radius:3px;
	list-style:none;
}
#share li.share-twitter{
	background:#55acee;
	box-shadow:0 2px #2795e9;
}
#share li.share-twitter:hover{
	background:#83c3f3;
}
#share li.share-facebook{
	background:#3b5998;
	box-shadow:0 2px #2d4373;
}
#share li.share-facebook:hover{
	background:#4c70ba;
}
#share li.share-google{
	background:#dd4b39;
	box-shadow:0 2px #c23321;
}
#share li.share-google:hover{
	background:#e47365;
}
#share li.share-hatena{
	background:#2c6ebd;
	box-shadow:0 2px #225694;
}
#share li.share-hatena:hover{
	background:#4888d4;
}
#share li.share-pocket{
	background:#f13d53;
	box-shadow:0 2px #e6152f;
}
#share li.share-pocket:hover{
	background:#f26f7f;
}
#share li.share-line{
	background:#00C300;
	box-shadow:0 2px #009d00;
}
#share li.share-line:hover{
	background:#2bd92b;
}
#share a{
	display:block;
	height:27px;
	padding-top:6px;
	color:#ffffff;
	text-decoration:none;
}
#share a:hover{
	text-decoration:none;
	color:#ffffff;
}

各ボタンの色やサイズはご自身のサイトに合わせてご変更ください。

次にHTMLに記載するコードです。

<div id="share">
<ul>
<!-- Twitter -->
<li class="share-twitter">
<a href="http://twitter.com/home?status=<?php echo urlencode(the_title_attribute('echo=0')); ?>%20<?php the_permalink(); ?>%20by%20" target="_blank">Twitter</a>
</li>
<!-- Facebook -->	
<li class="share-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank">Facebook</a>
</li>
<!-- Google+ -->
<li class="share-google">
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">Google+</a>
</li>
<!-- はてなブックマーク -->
<li class="share-hatena">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title();?>" target="_blank">はてブ</a>
</li>
<!-- Pocket -->
<li class="share-pocket">
<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank">Pocket</a>
</li>
<!-- LINE -->
<li class="share-line">
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">LINE</a>
</li>
</ul>
</div>

上記のコードではWordPress用に設定してあります。WordPress以外の場合は、コードの「＜?php the_permalink(); ?＞」の部分を、その表示するページのURLに変更してください。LINEボタンの「＜?php the_title(); ?＞はページのタイトルに変更します。

いいね！やツイートの数を知りたいという場合はこちらのページでご紹介しております。

ページの表示がモッサリ重かったのが、公式SNSボタンを廃止するだけでサクッと表示されるようになりました！当サイトの場合でも1秒程度改善されています。「重い！」「遅い！」と表示速度が気になるという方は、SNSボタンを見なおしてみてください。