WordPressにプラグインなしでSNSのシェアボタンを設置してみました。

どうもこんにちは。ブログの方も空いた時間にちょくちょく足りないところや機能を実装している最中です。今度はPJAXでも導入してみようかと思っています。
さて、今回はブログには必須と言っても過言ではないSNSのシェアボタンを実装する方法をご紹介します。

*Wordpress内での実装を想定しているため、他の場所では動きません。

必要な素材

・fontawesome アイコンで使用しています。
・はてなブックマークの画像　fontawesomeになかったのでこれだけ画像

基本的にコピペだけで動きますので（貼り付ける場所を間違えなければ。。。）、ぜひ活用してみてください。いろいろなプラグインでシェアボタンを入れることができると思いますが、自分で実装した方がデザインもブログに合わせることができるのでデザインにこだわる方は自ら実装した方がいいですね。
ただ、SNSシェアの使用が変わったりしたときは変更を加える必要があります。

サンプルコード

html

<div class="single-sns clearfix">
	<div class="sns-item sns-facebook">
		<div class="fb-like" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
	</div>
	<a href="https://twitter.com/share?url=<?php the_permalink();?>&text=<?php the_title();?>" target="_blank" class="sns-item sns-twitter">
		<i class="fa fa-twitter" aria-hidden="true"></i>
	</a>
	<a href="http://b.hatena.ne.jp/add?url=<?php the_permalink();?>" target="_blank" class="sns-item sns-hatena">
		<img src="http://lifevancouver.jp/wp/wp-content/uploads/2016/08/2016-08-11_22-47-58.png">
	</a>
	<a href="http://getpocket.com/edit?url=<?php the_permalink();?>" target="_blank" class="sns-item sns-pocket">
		<i class="fa fa-get-pocket" aria-hidden="true"></i>
	</a>
	<a class="sns-item sns-google" href="javascript:(function(){window.open('https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>'+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'_blank');})();"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
	<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" class="sns-item sns-line">LINE</a>
</div>

css

.sns-item{
	display: block;
    width: 60px;
    height: 28px;
    border-radius: 5px;
    text-align: center;
    line-height: 28px;
	float:left;
	margin-right: 5px;
	margin-bottom: 10px;
}
.sns-facebook{
	    width: 150px;
}
.sns-twitter{
    background: #55acee;
    color: #fff;
}
.sns-hatena{
	background:#1aa4dc;
	color:#fff;
}
.sns-hatena img{
	    height: 100%;
}
.sns-pocket{
	background:#e5364e;
	color:#fff;
}
.sns-google{
	background:#D43D37;
	color:#fff;
}
.sns-line{
	background:#5ae628;
	color:#fff;
  	font-size:14px;
}

上記のhtmlコードをsingle.phpの入れたい箇所（僕の場合は記事の最初と最後に設置しました）に入れるだけで完了です。特にJavascriptを書く必要もなく設置できるのでコピペだけで完了します。

デザインはFacebookが提供しているデザインと同じにして統一感を出しています。
お好みで数を減らすこともできるので、わざわざプラグインを入れたくないという方にはぴったりだと思います。

特にシェア数を表示する必要を今は感じていないのでFacebook以外のシェア数を表示するようにはなっていません。今後SNSでのシェアが伸びてくるようであれば表記しようと思います。

では。