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

公式SNSボタンをCSSボタンへ変更
(YouTube, AdSense, Play 公認エキスパート)
2021年02月03日 in Web・IT
記事内にPR・広告が含まれる場合があります

ブロブ等の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アプリが入っている端末でないと機能しません。)
sns-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(); ?>はページのタイトルに変更します。

コード参考・引用:“Webクリエイターボックス

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

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

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。