WordPressに8つのSNSシェアボタンをプラグインなしで実装

wordpressWordpress カスタマイズ

SNSのシェアボタンは WP Social Bookmarking Lightなどのプラグインでも簡単に実装できますが、少しでもサイトを軽くしたいなら、プラグインを利用せず実装したいところです。

この記事ではプラグインを使わずにSNSシェアボタンを実装する方法を解説します。

基本的には、Mt.Nanamiさんのブログで公開されている、WordPressにプラグイン無しの自作シェアボタンを追加しました。を参考にしていますが、HTMLやCSSを若干調整しています。

今回利用するシェアボタン

  • Twitter
  • Facebook
  • Google+
  • はてなブックマーク
  • Pocket
  • LINE
  • Feedly
  • RSS

single.phpに追加するタグ

<ul class="socialBtn">
	<li><a class="twitter icon-twitter" href="//twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterでシェアする">Twitter</a></li>
	<li><a class="facebook icon-facebook" href="//www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookでシェアする">Facebook</a></li>
	<li><a class="pocket icon-pocket" href="//getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Pocketであとで読む">Pocket</a></li>
	<li><a class="feedly icon-feedly" href="//cloud.feedly.com/#subscription%2Ffeed%2F<?php echo urlencode(bloginfo('rss2_url')); ?>" target="_blank" title="Feedlyで購読する">Feedly</a></li>
	<li><a class="google icon-googleplus" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Google+でシェアする">Google+</a></li>
	<li><a class="hatena icon-hatena" href="//b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加する">はてブ</a></li>
	<li><a class="line icon-line" href="//timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="LINEでシェアする">LINE</a></li>
	<li><a class="rss icon-feed" href="<?php echo urlencode(bloginfo('rss2_url')); ?>" target="_blank" title="RSSで購読する">RSS</a></li>
</ul>

CSSの追加

CSSはfloatからdisplay:flexに処理を変更しました。

また、アイコンフォントですが、こういったアイコンにはFont Awesomeを使うことが多いのですが、はてなブックマークのアイコンや、FeedlyのアイコンがFont Awesomeにはないため、
別途用意する必要があります。

今回は寝ログさんで作成済みのWebフォントを公開されていて、そのまま流用できそうでしたので利用させて頂くことにしました。

日本のブログでよく利用されているWEBサービスロゴのアイコンフォントまとめと利用方法

寝ログさんからファイルをダウンロード

同梱されいてる、style.cssを読み込みます。

wp_enqueue_style( 'icon-style', get_stylesheet_directory_uri() . '/icomoon/style.css' );

以下のCSSを追記します。

ul.socialBtn {
	margin: 50px 0 0;
	display:flex;
	flex-wrap: wrap;
}

ul.socialBtn li{
	list-style: none;
	width: 25%;
	margin-left: 0;
}

ul.socialBtn li a {
	display: block;
	color: #fff;
	text-decoration: none;
	line-height: 42px;
	letter-spacing: .05em;
	font-size: 16px;
	text-align: center;
}

ul.socialBtn li a.twitter {background: #1da1f2;}
ul.socialBtn li a.facebook {background: #3b5998;}
ul.socialBtn li a.google {background: #db4437;}
ul.socialBtn li a.line {background: #00b900;}
ul.socialBtn li a.pocket {background: #ee4056;}
ul.socialBtn li a.hatena {background: #00a4de;}
ul.socialBtn li a.feedly {background: #51b139;}
ul.socialBtn li a.rss {background: #ffa500;}

ul.socialBtn [class^="icon-"]:before,ul.socialBtn [class*=" icon-"]:before {
	margin-right: 5px;
}

jQueryで別ウインドウを開き、サイズを調整する

jQueryで別ウインドウを開く際にサイズ指定することで、ポップアップウィンドウとして開きます。
このスクリプトがない場合は既存のページが遷移してしまうので、target=”_blnak”をアンカータグにつけるか、以下のコードでポップアップウィンドウとして開くようにした方がよいでしょう。

jQuery(function($){
	$('.socialBtn li a').click(function(){
	window.open(this.href,'popup','width=600,height=300');
	return false;
	});
});

コメント