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

SNSシェアボタンはAddToAny Share Buttonsといったプラグインや、無料テーマCocoonで簡単に利用できます。

しかし、次のような問題がある方もいるでしょう。

• 余分なプラグインをインストールしたくない
• テーマが変更できない

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

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

• Twitter
• Facebook
• はてなブックマーク
• 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="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の追加

アイコンにはFont Awesomeを利用する事が多いですが、はてなブックマークや、Feedlyのアイコンがないので別途用意します。

Font Awesomeを利用したい方は次のページを参考にしてください。

ホームページのアイコンに最適なFontawesomeの使い方

CDN fontawesomeはCDNで提供されているため、リンクをコピペするだけですぐに利用することができます。 <link rel="stylesheet" href="" integrity="sha384-fnmOCq...

webjin.work

2020.06.07

今回は寝ログさんが作成済みの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;
	});
});