TwitterやFacebookなどの「公式SNSボタン」をオリジナルデザインにする方法

Twitterの仕様変更により、近日中にTwitterボタンのツイート数カウントが表示されなくなります。10月1日から実施されると噂されていましたが、まだ大丈夫なようです。

まだ利用できるとはいえ、仕様変更は確定事項。FacebookやGoogle+でも同じような仕様変更は過去にあり、都度ソースやデザインの修正に振り回されてきました。そこで、この機会にブログのSNSボタンを公式からオリジナルのボタンに変更することにしました。

今回は、当ブログで実装したコピペで簡単に作れるCSSベースのSNSボタンの作り方を紹介します。

オリジナルのSNSボタンの作り方

Twitter・Facebook・Google+・はてなブックマーク・Pocket・LINEに対応しています。コードはWordPress用のため、それ以外の場合は「＜?php the_permalink(); ?＞」を表示するページのURLに変更してください。

HTML

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

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;
}

ソースコードは下記のサイトを参考にさせて頂きました。

参考サイト：公式SNSボタンは重い！コピペでできるCSSのSNSボタンで軽くする

複雑になってしまうので上のソースには記述していませんが、当ブログではソーシャルアイコンをFont Awesomeで表示しています。