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

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

SNSボタン

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

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

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

TwitterFacebookGoogle+はてなブックマークPocketLINEに対応しています。コードは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で表示しています。

CSSのSNSボタン

オリジナルのSNSボタンを利用するメリットは、今回のような仕様変更があっても基本的にソースを変えなくてもいい点。また、公式のSNSボタンはスクリプトや画像の読み込みが遅いため、ページの表示速度の改善=SEO対策にもつながります。デザインを統一できるのもメリットですね。

デメリットは、記事の「いいね!」や「ツイート数」が表示されない点。「いいね!」の数が多いと、訪問してきたユーザーが「この記事は人気があるみたいだから拡散しよう」といった相乗効果が期待できます。ただ、逆に人気のない記事の場合は、カウント表示がない方がプラスかもしれません(笑)

良い面悪い面ありますが、今回のような仕様変更に振り回されるのが嫌な人や、ページの表示速度が遅くて悩んでいる人は、この機会にオリジナルのSNSボタンに変更してみてはいかがでしょうか。

追記:2015/10/09

Twitterのボタンカウント数の表示は、2015年11月20日に廃止すると正式に発表されました。

LINK:持続的なプラットフォームのための難しい決断

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

1 件のコメント

  • 返信 SHEEP |

    シェアボタンは問題なく表示できました。ありがとうございます。
    お手数ですがよろしければボタン群の中央寄せを教えて頂けませんでしょうか?
    初心者なためイメージですがfloat:left;(横並び)のままセンター表示にする感じです。

コメント