マイホームWEB内覧会

【WordPress】8種類の自作SNSボタンのコードをご紹介！カウントも表示するよ

snsbutton

最近よくお問い合わせをいただく当ブログに設置しているオリジナルのSNSボタン8種類の全コードをご紹介します。コードはコピペでOK！STINGER5への設置方法も説明します。

シェアボタンのコードはツイッター、フェイスブック、グーグルプラス、はてなブックマーク、LINE、Pocket、RSS、feedlyの8種類です。RSSはSNSなのか!?という突っ込みはスルーでお願いします。

【WordPress】オリジナルSNSボタン設置方法！スマホ用シェア数つきSNSアイコンも公開 – ゆめぴょんの知恵

こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。

プラグイン【SNS Count Cache】でシェア数を取得する

プラグイン【SNS Count Cache】を利用するとシェアのカウント数を取得することができます。ただし、カウントするのはツイッター、フェイスブック、グーグルプラス、はてなブックマークのみです。

追記：プラグインのアップデートによりPocketのシェア数の取得もできるようになりました！

シェアカウントしているの画像

プラグイン→【新規追加】→【SNS Count Cache】をインストールし有効化しておきましょう。シェア数の取得に少し時間がかかるようです。

なお、シェア数取得が必要なければこのプラグインは必要ありません。

【SNS Count Cache】の詳しい説明はプラグインの作者さまのサイトでご確認ください。今回のアップロードでデータをエクスポートし分析できるようになったりしています！

設置コード

アイコンフォントの導入

アイコンフォントは設置が簡単なFont Awesomeを使用します。以下サイトからCDNのコードを取得し＜/head＞内に記載してください。（※STINGER5では不要）

Get Started with Font Awesome

cssコード

レスポンシブのサイトでの設置を想定しています。PCでの表示では横4つに縦2つ、モバイルでは下図のように横2列の縦4列でボタンが並びます。

snsbuttonモバイル

スマホ部分のCSS

/*--------------------------------
SNS
---------------------------------*/
.share{
	width:100%;
}
.share h4{
	font-size:120%; 
	text-align:center;
}

.sns{
	margin:0 auto;
	text-align:center;
	
}
.sns ul {
	list-style:none;

}
.sns li {
	float:left;
	width:48%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:80%;
	position:relative;
	display:block;
	padding:10px;
	color:#fff;
	border-radius:6px;
	text-align:center;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
	-webkit-transform: translate3d(0px, 5px, 1px);
	-moz-transform: translate3d(0px, 5px, 1px);
	transform: translate3d(0px, 5px, 1px);
	box-shadow:none;
}

/* ツイッター */
.sns .twitter a {
	background:#00acee;
	box-shadow:0 5px 0 #0092ca;
}
.sns  .twitter a:hover {
	background:#0092ca;
}

/* Facebook */
.sns  .facebook a {
	background:#3b5998;
	box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
	background:#2c4373;
}

/* グーグル */
.sns .googleplus a {
	background:#db4a39;
	box-shadow:0 5px 0 #ad3a2d;
}
.sns  .googleplus a:hover {
	background:#ad3a2d;
}

/* はてぶ */
.sns  .hatebu a {
	background:#5d8ac1;
	box-shadow:0 5px 0 #43638b;
}
.sns .hatebu a:hover {
	background:#43638b;
}

/* LINE */
.sns  .line a {
	background:#25af00;
	box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
	background:#219900;
}

/* Pocket */
.sns  .pocket a {
	background:#f03e51;
	box-shadow:0 5px 0 #c0392b;
}
.sns  .pocket a:hover {
	background:#c0392b;
}

/* RSS */
.sns  .rss a {
	background:#ffb53c;
	box-shadow:0 5px 0 #e09900;
}
.sns  .rss a:hover {
	background:#e09900;
}

/* Feedly */
.sns  .feedly a {
	background:#87c040;
	box-shadow:0 5px 0 #74a436;
}
.sns  .feedly a:hover {
	background:#74a436;
}

PC部分のCSS

/*--------------------------------------
  780px SNS
--------------------------------------*/
.share{
	padding-bottom:10px;
}
.sns ul {
	margin:0 auto;
	list-style:none;
}
 .sns li {
	width:23%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:75%;
	padding:10px 2px;
}
.sns li:nth-child(4n) {
	margin-right:0;
}

STINGER5でのCSS記述箇所

STINGER5をご利用の初心者の方で、コピペする場所がわからない方は下記を参考にしてください。コピペする場所はstyle.cssです。

@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: stinger5ver20141227
Theme URI: http://wp-fun.com
Description: stinger5
Author: enji
Author URI: https://wp-fun.com
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: flexible-width, custom-header, custom-menu, editor-style,
Version: 20141227
---------------------------------------------------------*/
* {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
	margin: 0px;
	padding: 0px;
}
main, article, aside, header, canvas, details, figcaption, figure, footer, nav, section, summary {
	display: block;
}


～～　略　　～～


↓↓↓元々記載してあったこの部分は消す↓↓↓
/*--------------------------------
SNS　　
---------------------------------*/
.sns li {
	margin: 5px 0;
}
.sns .snsb li {
	float: left;
	margin-right: 10px;
	list-style-type: none;
}
.post .sns .snsb.clearfix {
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}
↑↑↑ここまで↑↑↑

↓↓↓↓↓『スマホ部分のCSSをコピペ』↓↓↓↓↓

/*--------------------------------
SNS
---------------------------------*/
.share{
	width:100%;
}
.share h4{
	font-size:120%; 
	text-align:center;
}

.sns{
	margin:0 auto;
	text-align:center;
	
}
.sns ul {
	list-style:none;

}
.sns li {
	float:left;
	width:48%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:80%;
	position:relative;
	display:block;
	padding:10px;
	color:#fff;
	border-radius:6px;
	text-align:center;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
	-webkit-transform: translate3d(0px, 5px, 1px);
	-moz-transform: translate3d(0px, 5px, 1px);
	transform: translate3d(0px, 5px, 1px);
	box-shadow:none;
}

/* ツイッター */
.sns .twitter a {
	background:#00acee;
	box-shadow:0 5px 0 #0092ca;
}
.sns  .twitter a:hover {
	background:#0092ca;
}

/* Facebook */
.sns  .facebook a {
	background:#3b5998;
	box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
	background:#2c4373;
}

/* グーグル */
.sns .googleplus a {
	background:#db4a39;
	box-shadow:0 5px 0 #ad3a2d;
}
.sns  .googleplus a:hover {
	background:#ad3a2d;
}

/* はてぶ */
.sns  .hatebu a {
	background:#5d8ac1;
	box-shadow:0 5px 0 #43638b;
}
.sns .hatebu a:hover {
	background:#43638b;
}

/* LINE */
.sns  .line a {
	background:#25af00;
	box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
	background:#219900;
}

/* Pocket */
.sns  .pocket a {
	background:#f03e51;
	box-shadow:0 5px 0 #c0392b;
}
.sns  .pocket a:hover {
	background:#c0392b;
}

/* RSS */
.sns  .rss a {
	background:#ffb53c;
	box-shadow:0 5px 0 #e09900;
}
.sns  .rss a:hover {
	background:#e09900;
}

/* Feedly */
.sns  .feedly a {
	background:#87c040;
	box-shadow:0 5px 0 #74a436;
}
.sns  .feedly a:hover {
	background:#74a436;
}


↑↑↑↑↑『スマホ部分のCSSをコピペ』↑↑↑↑↑


～～　略　　～～



/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper {
	max-width: 980px;
	padding: 0 10px;
	margin: 0 auto;
}

～～　略　　～～


/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
aside {
	clear: both;
	float: none;
	width: auto;
	position: static !important;
	;
}
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
#wrapper {
	padding: 0 20px;
}
～～　略　　～～

/*--------------------------------
一覧記事表示部分
---------------------------------*/
～～　略　　～～

/*-- ここまで --*/
}

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
.smanone {
	display: block;
}
.pcnone {
	display: none;
}

～～　略　　～～

/*--------------------------------
ページャー
---------------------------------*/
～～　略　　～～

.pagination a:hover {
	color: #fff;
	background-color: #666666;
}
.pagination .current {
	padding: 6px 9px 5px 9px;
	color: #fff;
	background-color: #CCCCCC;
}

↓↓↓↓↓『PC部分のCSSをコピペ』↓↓↓↓↓

/*--------------------------------------
  780px SNS
--------------------------------------*/
.share{
	padding-bottom:10px;
}
.sns ul {
	margin:0 auto;
	list-style:none;
}
 .sns li {
	width:23%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:75%;
	padding:10px 2px;
}
.sns li:nth-child(4n) {
	margin-right:0;
}

↑↑↑↑↑『PC部分のCSSをコピペ』↑↑↑↑↑


/*-- ここまで --*/　←ここの上にコピペ！！！！！
}

phpコード

single.phpのシェアボタンを設置したいところに以下を設置したいところにおいてください。STINGER5ではsns.phpファイルを全てこれに書き換えです。

2014/12/14　コードを微調整しました。 詳しい変更箇所は別途記事に書きましたのでご確認ください。
[nlink url=”http://shufulife.com/facebook-popup/”]

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>

<div class="share">
<h4>ご購読ありがとうございます</h4>


<?php if(is_mobile()) {  //以下スマホの場合 ?>
<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="https://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton&related="【●ツイッターアカウント名（＠なし）●】"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">
<a href="https://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i>
Facebook&nbsp;<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>

<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i>Google+&nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu">       
<a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><i class="fa fa-hatena"></i>はてブ&nbsp; <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>

<!--LINEボタン-->   
<li class="line">
<a href="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</a>
</li>     

<!--ポケットボタン-->      
<li class="pocket">
<a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><i class="fa fa-get-pocket"></i>Pocket&nbsp; <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss"></i>RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="https://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名（例：shufulife.com)●】%2Ffeed%2F"  target="blank"><i class="fa fa-rss"></i>feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>
</div> 

<?php } else { //以下PCの場合?> 

<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="https://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton&related="【●ツイッターアカウント名（＠なし）●】" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">       
<a href="https://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1000');return false;"><i class="fa fa-facebook"></i>Facebook&nbsp; <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
      
<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><i class="fa fa-google-plus"></i>Google+&nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu"> 
<a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" ><i class="fa fa-hatena"></i>はてブ&nbsp; <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>

 <!--LINEボタン-->      
<li class="line">
<a href="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="blank">LINE</a>
</li>       

<!--ポケットボタン-->      
<li class="pocket">
<a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="blank"><i class="fa fa-get-pocket"></i>Pocket&nbsp; <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" target="blank"><i class="fa fa-rss"></i>RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="https://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名（例：shufulife.com)●】%2Ffeed%2F"  target="blank"><i class="fa fa-rss"></i>feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>  
</div>
<?php } ?>
</div>

ツイッターのvia=●●●●●にご自信のツイッターのアカウントとfeedlyの部分にご自分のドメインを入れる必要がありますのでご注意ください！

2014/11/18追記　プラグイン【SNS Count Cache】のアップデートによりPocketのシェア数（ブックマーク数）が表示されるようになりましたので対応しました

2015/2/3追記　プラグイン【SNS Count Cache】（Version 0.4.0）のアップデートによりシェア数取得するのに使用している関数を変えました。以前の関数も使えるようですが、プラグイン作者様は今回書き換えたものを使用することを推進しています。

2015.9.23追記　Font Awesomeのバージョン4.4よりPocketが追加されたそうです。

Font Awesomeのバージョン4.4のCDNコードはこちら（STINGER5では既存のコードを書き換えます）、Pocketのコードはこちらから確認してください。

2015/12/14追記　Pocketのアイコンフォントに対応しました。Font AwesoneのCDNのヴァージョンが4.4以上でないと表示されませんので、header.phpなどにあるコードを書き換えてください。また、CDNコードを最新のものにしますとグーグル+のアイコンも新ヴァージョンへと切り替わります。

また、feedlyのフォロー数を取得できるようになりましたので対応しました。feedlyなのでサイト全体の購読数を表示します。

Point

PCでの表示は別ウィンドウで小さい小窓が開きます。スマホでは開かないようにしています。

また、カウント数が必要なければツイッター、FB、google+、はてブの【＜?php if(function_exist～～】の部分を削除してください。

シェア数が多い場合はフォントサイズなどで調整してくださいね！

サイトTOPのURLとサイト名を取得するには

上記コードは各記事のタイトル名とパーマリンクを取得するのですが、サイトのトップページURLとサイト名を取得したいときは以下のコードになります。シェア数はTOPページのURLをシェアした場合の数字です。また、記事のシェア数を表示する際にはシェアのないSNSには何も表示しませんが、これは「0」と表示されます。

※STINGER5のSNS-top.phpも同じ要領で記述してください。
[sp-mieru][adsense2][/sp-mieru]

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>

<div class="share">


<?php if(is_mobile()) {  //以下スマホの場合 ?>
<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="https://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton&related="【●ツイッターアカウント名（＠なし）●】"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter( array( post_id => 'home')); ?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">
<a href="https://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i>
Facebook&nbsp;<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(array( post_id => 'home')); ?></a>
</li>

<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i>Google+&nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(array( post_id => 'home')); ?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu">       
<a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><i class="fa fa-hatena"></i>はてブ&nbsp; <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(array( post_id => 'home')); ?></a>
</li>

<!--LINEボタン-->   
<li class="line">
<a href="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</a>
</li>     

<!--ポケットボタン-->      
<li class="pocket">
<a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><i class="fa fa-get-pocket"></i>Pocket&nbsp; <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(array( post_id => 'home')); ?></a></li>

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss"></i>RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="https://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名（例：shufulife.com)●】%2Ffeed%2F"  target="blank"><i class="fa fa-rss"></i>feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>
</div> 

<?php } else { //以下PCの場合?> 

<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="https://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton&related="【●ツイッターアカウント名（＠なし）●】" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(array( post_id => 'home')); ?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">       
<a href="https://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1000');return false;"><i class="fa fa-facebook"></i>Facebook&nbsp; <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(array( post_id => 'home')); ?></a>
</li>
      
<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><i class="fa fa-google-plus"></i>Google+&nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(array( post_id => 'home')); ?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu"> 
<a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" ><i class="fa fa-hatena"></i>はてブ&nbsp; <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(array( post_id => 'home')); ?></a>
</li>

 <!--LINEボタン-->      
<li class="line">
<a href="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="blank">LINE</a>
</li>       

<!--ポケットボタン-->      
<li class="pocket">
<a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="blank"><i class="fa fa-get-pocket"></i>Pocket&nbsp; <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(array( post_id => 'home')); ?></a></li>

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" target="blank"><i class="fa fa-rss"></i>RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="https://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名（例：shufulife.com)●】%2Ffeed%2F"  target="blank"><i class="fa fa-rss"></i>feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>  
</div>
<?php } ?>
</div>

アイコンフォントについて

Font AwesomeのアイコンフォントにはPocket、LINE、feedlyのアイコンはありません。feedlyにはRSSのアイコンフォントを入れています。はてぶはCSSでそれっぽくしているだけです。

細かい所にこだわりたい方は、icomoonというアイコンフォントで必要な分だけ設置する方法があります。 icomoonのくわしい説明は以前ご紹介しています。

icomoonでSVG画像でアイコンフォントを自作できるのですが、こちらのサイトではPocket、feedlyのSVG画像を配布してくださっているのでダウンロードしicomoonでアイコンフォントを自作しましょう。

※LINEに関してはLINE側で提供するアイコン以外の利用を禁止しているようですので、任意でお願いいたします。
ガイドライン｜LINEで送るボタン

まとめ

オリジナルシェアボタンは最近のフラットデザインのサイトに多く取り入れられているので違和感もあまり感じられなくなりました。サイトも軽量になるのでおすすめです。

ちゅんこ

ちゅんこ

日々の生活を送る上で、「いかに手を抜くか」という不真面目なことを真面目に探求している意識低い系主婦です。東京ではない首都圏に極小ペンシルハウスを建築し、夫と娘（小1）と仲睦まじく暮らしています。好きな食べ物は舟和の芋ようかん。

こちらの記事もおすすめです

41 件のコメント

  1. はじめまして。

    wordpress超初心者で、Stinger5で試行錯誤しながらブログを運営しています。

    SNS用のボタンを探している時にこちらのブログにたどり着きました。早速使わせて頂き、素敵なボタンを設置することができました。ありがとうございます。

    ボタンは、トップページと各記事ページに設置したのですが、1か所だけうまく表示ができない部分があり、ずっと悩んでいます。

    スマホ用のトップページなのですが、本来は

    Twitter　Facebook
    Google+　はてブ
    LINE　　 Pocket
    RSS　　　feedly

    という並びでボタンを表示したいのですが、どうしても

    Twitter　Facebook
    Google+　はてブ
    　　　　 LINE　　
    Pocket RSS　　　
    feedly

    と、LINEの前に空欄が出来てしまい、全体で5段になってしまいます。

    スマホを横表示にしても、この関係性は変わりません。

    このような現象が起きる原因で思い当たることがありましたら、お教えください。

    宜しくお願いします。

    返信

    • kenji様

      コードを見ていないのでなんともお答えが難しいのですが、表示が崩れるのはTOPページのみなのでしょうか？
      個別記事でスマホの表示は崩れてはいないのでしょうか？

      TOPと個別記事のコードの違いはPHPの部分だけです。見た目上が変わることはないので、ちょっとよくわかりません。
      すみません。

    • ちゅんこ様

      お返事、ありがとうございます。

      崩れて表示されるのは、TOPページだけで、個別記事のページでは正しく表示されています。

      もう少しあがいてみて、それでも分からない場合は、TOPページのみ表示を無くしてみます。

      ありがとうございました。

    • ちゅんこ様

      お返事、ありがとうございます。

      崩れて表示されるのは、TOPページだけで、個別記事のページでは正しく表示されています。

      TOPページでは、ボタンの幅が少し広く、高さが少し低くなっています。「Twitter」などの文字は全て一回り弱小さくなっています。widthを50%にしてみるとTOPページも個別ページも縦一列に並びます。また、paddingを20pxにしてみると、TOPページも個別ページも厚みが変わりますが、TOPページの方が個別ページと比べると高さが低いままで、並び方に変わりはありませんでした。

      もう少しあがいてみて、それでも分からない場合は、TOPページのみ表示を無くしてみます。

      ありがとうございました。

  2. ちゅんこ様

    初めまして！おしゃれなシェアボタンを探していた所、ちゅんこさんのサイトに辿り着きました。運営してるのはwordpressじゃないのですが、少しカスタマイズしてブログに使用させて頂きました。ありがとうございました！

    返信

    • たっつん様

      コメントありがとうございます！
      少しでもお役に立てたのならこの記事書いてよかったなって思います(≧▽≦)

  3. ちゅんこ様

    迅速なご回答、ありがとうございます。とても助かります。

    .sns li {
    width:12.5%;
    margin:0;
    }
    .sns li a {
    font-size:50%;
    padding:10px 2px;
    }

    で一列になりました。

    ただ、仰るとおり文字を小さくしてしまったので、シェア数がうまく取れていないのを調整をしてから、文字数を減らしてみます。

    ありがとうございました！

    返信

  4. はじめまして、いつも参考にさせて頂いています。
    こちらのボタンを半分のサイズにして、一列に並べたいのですが、
    コードはどう書けば良さそうでしょうか？

    ググりながら色々試行錯誤したのですが、
    私がcssの理解しきれていないようで、
    レイアウトが崩れてしまいます…。

    お手すきの際にご教授頂けると幸いです。

    返信

    • こんちゃそ様

      コメントありがとうございます。

      横一列にするのはPCの部分でよろしいのでしょうか？
      そうであれば、

      見出し→PC部分のCSS
      ここの下記部分の

      .sns li {
      width:23%;
      margin:0 2% 3% 0;
      }
      width:23%;
      の部分を調整してみてください。
      8列ですと、12.5%ですが、右にmarginを2%とってます。
      widthやmargin、フォントサイズを調整しないと８列は厳しいかと思います。
      フォントサイズは下記の部分。

      .sns li a {
      font-size:75%;
      padding:10px 2px;
      }

      よろしくご確認ください。

  5. ちゅんこさん★

    こんばんは。
    こちらの記事を参考にシェアボタン
    カスタマイズさせていただきました。

    簡単でした。本当にありがとうございます。

    ただ、出来上がったアイコンのツイッターだけなぜか別窓ではなく、
    同窓で開いてしまいます。

    なぜだかわかりますでしょうか？

    お手数ですが、
    ご教示いただけますと幸いです。
    よろしくお願いいたします。

    返信

    • suki様

      ツイッターが同窓ですか？
      ツイッターは通常で別窓で開くはずだったのですが、仕様が変わったんでしょうかね？
      FBなどと同様に、

      onclick=”javascript:window.open(this.href, ”, ‘menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600’);return false;

      と付け加えていただくと別窓で開くと思います。

      heightとwidthの数値は任意です。

      RSSはtarget=”blank”を加えていただければ大丈夫だと思います。

      ちなみにこちらのコードはスマホでは同窓で開くようにしています。

      宜しくご確認ください。

  6. 前に質問をさせて頂きましたがその続きです。

    シェア後にフォローを促す機能ですがaタグの属性にこんなコードを入れると実装できるようです。
    data-related=”shufulife”
    ※文字化けしてたらすいません。

    参考サイト：http://nelog.jp/twitter-related-follow

    そこで質問です。上記のコードを使ってフォローを促す機能を実装するにはどうしたら良いのでしょうか。私もいろいろやってみたのですができなかったので質問させていただきます。
    お忙しいところ申し訳ございませんが、よろしくお願いします。

    返信

    • yokudekiru?gakusei様

      確認してはいないのでよくわからないのですが、わいひらさんの記事を読む限りaタグ内に

      &related=ユーザーID

      を挿入するのではないでしょうか？

      当サイトでご紹介しているコードにこのコードは今のトコロ実装する予定はありませんので、具体的な検証は行っておりません。
      どうかご了承ください。

  7. 初めまして。
    スティンガー5でブログを運営している者ですが、ソーシャルボタンのカスタマイズ記事を検索していたところ、こちらにたどり着きました。

    ほとんど問題なく導入でき、大変感謝しております。デザイン的にもいい感じです。
    ただ、パソコンでの表示が、若干スマホの表示よりもアイコンの間が狭くなってしまいます。こちらは仕様でしょうか？
    スマホだと「f Facebook」のような感じなのですが、パソコンだと「fFacebook」のように詰まってしまいます。

    ほか、フェイスブックボタンを「シェア」ではなく、「いいね」に変更することは可能なのでしょうか？

    急なご質問で恐縮ですが、お手すきでお教えいただけますと幸いです。

    返信

    • tarozimakiyoshi様

      コメントありがとうございます。

      FBボタンのアイコンの部分はCSSで特に調整などはしておらず空白（&nbsp;）を入れているだけです。スマホ、PCともにアイコンの後にすぐ文字を入れていて、シェア数の前に空白を入れています。

      こんな感じ「fFacebook空白00」

      フェイスブックは文字数が多いのでアイコンと文字の間に空白を入れると、シェア数が3ケタになった時にカラム落ちします。なのでこんな感じにしています。（※ちなみにシェア数が4ケタ超えたら完全にカラム落ちしますｗｗｗ）

      サイトを拝見したところ、PCとスマホもどちらも同じように見えたのですが…。空白を入れたり、CSSなどで調整してみてください。

      なお、いいねボタンについてはわかりません。

      宜しくお願いします。

    • ご返信いただきまして、ありがとうございます。
      空白での調整というもっともスタンダードな手法が頭から抜けておりました…
      （4桁シェアは今のところ予定がないのでだいじょうぶです笑）

      いろいろ調べた結果、いいね！にするのは難しいようなので、そちらはひとまずあきらめることとしました。

      ありがとうございました。

  8. ご対応いただき大変ありがとうございます
    とてもありがたく、また勉強になりました

    返信

  9. ちゅんこ様

    2度手間になってしまってすみません…
    『サイトのURLとサイト名を取得するには』
    にしたがってコードを書き換えてあるのですが
    シェアボタンをクリックしたときにポップアップする各シェア用のウィンドウには
    トップページに指定したサイトURL＆サイト名のOGPの情報が表示されているのに
    シェア数だけは個別記事のものを拾ってきてしまうようで。。。
    普通に『サイトのURLとサイト名を取得するには』の通りにするだけで
    シェアの数もトップのものになるはずだとすると
    原因として思い当たることがないかな…と思いまして。。。
    たびたびすみません

    返信

    • hiro様

      大変失礼しました。プラグインのアップデートに気が付きませんでした。
      『サイトのURLとサイト名を取得するには』の項目を全部書き換えていますのでご確認ください。

  10. はじめまして
    大変ありがたく使わせていただいています
    こちらの記事を参考にシェア数を表示させているのですが
    トップページに設置したシェアボタンのシェア数に、記事のシェア数が表示されてしまいます
    原因として思い当たりそうなことはありますでしょうか？
    よろしくお願い致します

    返信

    • hiro様

      コメントありがとうございます。
      サイトのトップページのURLのシェア数を表示したい場合には、記事の下の方にある

      『サイトのURLとサイト名を取得するには』

      の項目を参考に、phpのエンコード部分を入れ替えてください。
      宜しくお願いします。

  11. ちゃんこさんのコードを少しカスタマイズして使っています。ありがとうございます。

    突然なんですが、ちゃんこさんのツイッターのボタンは押してツイートした後にフォローを促すようになっています。

    私もそれを実装してみたいと少し試してみたのですが全くダメでした。
    したがって、ちゃんこさんツイートの後にフォローを促す方法を教えていただけませんか。

    返信

    • 記事下にあるツイッターのボタンですよね？
      記事で紹介しているコードを使っていて何か特別なことはしていませんので、フォローを促すのはツイッターの仕様なのでは？

  12. ちゅんこ様

    ごていねいに、ありがとうございました。

    CSSの記述がわかりやすくなりました。
    ためしてみたところ、スマホでも正しく表示されました。

    返信

  13. ちゅんこ様

    すばらしい記事をありがとうございます。

    ひとつ、質問です。
    STINGER5でためしたのですが、スマホの表示がタテ4列、ヨコ2列になります。

    記事内に書いてあるとおり、メディアクエリ部分はコピペしていません。
    なにか、考えられる原因はありますでしょうか？

    アドバイスいただけますと幸いです。

    返信

    • しずく様

      コピペする箇所が違っているようです。
      記事にSTINGER5でのコードをコピペする箇所を追記しておきましたのでご確認ください。

  14. ちゅんこ様

    お返事ありがとうございます！
    ダッシュボードを見てみるとキャッシュがされていないようです。
    シェア自体はできているのですが、カウンターが動かないみたいです。

    ただ色々調べてみたら、ツイッターに関してはアカウントで同じような投稿を何回もしていると、カウンターが動かないような規制？をかけられてしまうという情報を発見したのでもしかしたらそちらで動かないのかもしれません。

    返信

  15. こんにちは。
    SNS Count Cacheを使用して、オリジナルボタンの作成をしたく、ここにたどり着きました！

    問題なく動くようにはなったのですが、
    なぜか『ツイッター』、『はてぶ』だけ何回シェアしても動きません。。。cssはこちらで改変しておりますが、その他コードはちゅんこ様のコードをそのまま使用させていただいております。

    こちらちゅんこさんの方では同じ現象は起きていないでしょうか・・・？
    的外れなコメントでしたら削除してくださいませ・・・。

    返信

    • みぃ様

      シェアしても動かないとのことですが、シェア数が表示されないのですか？
      それともシェア自体が出来ないのですか？

    • ナノ様

      コメントありがとうございます。

      こちらの記事で紹介しているコードはプラグイン「SNS Count Cache」を利用してのものとなりますので、変更はございません。
      今後ともよろしくお願いいたします。

    • しみ様

      コメントありがとうございます。

      LINEボタンのガイドラインの利用条件に

      (2) 設置者は、LINEで送るボタンを外部サイトに設置する場合、専用アイコンを使用しなければなりません。但し、設置者は、専用アイコンの代わりに「LINEで送る」又は「LINE」というテキスト文字を使用することができます。

      とあるので、こちらの記事では「LINE」というテキスト文字のみ設置させていただいています。

      LINEのアイコンを設置する方法も載せていましたので、そちらにはガイドラインに反する旨、追記させていただきます。

      ご指摘くださいましてありがとうございます。

  18. 初めまして！wordpress初級者のシロウと申します。なんとかして、これから立ち上げるサイトを盛り上がらせたいと思いまして、こちらのサイトに行きつきました。

    本記事を参考にさせていただきまして、すべてボタンも入れて、表示もされているのですが、ボタンに表示される色が白ではなく、金色のような感じになっており、ボタンに表示される文字の色を白にしたいと思っております。差し支えなければ、ご回答いただけますと幸いです。

    返信

    • シロウ様

      コメントありがとうございます。
      上記紹介しているコードには
      SNSボタンの色を指す場所（.sns li a ）に白（color:#fff;）を指定してあります。

      違う色が表示されているというのであれば、どこかの色のコードを引き継いでいるのではないでしょうか？

      コードをコピーする場所、コードの抜けなどないかご確認ください。

  19. SNSボタンを変えたくて調べていたらここにたどり着きました。さっそくSTINGER5レディーに導入しましたが、記事内は変わったのですが、TOP画面のSNSボタンはそのままの状態ですがもしかして記事内限定の情報でしたか？もしわかりましたら、TOPの変更も教えて貰えると助かります

    返信

    • たつみ様

      TOP画面のSNSボタンに関しては、テーマファイルのsns-top.phpを変更する必要があります。

      まず、こちらの記事の『phpコード』の部分をsns-top.phpにコピペします。そしてコードの初めの部分を記事項目『サイトのURLとサイト名を取得するには』の部分を参考に変更してください。

      よろしくお願いします。

  20. haruka様

    こちらのコードはSTINGER5デフォルトにコピペした状態では「・」は出ないようになっています。
    「・」が出るということはメディアクエリごとコピペしてはいないでしょうか？style.cssの@media only～などの部分はコピペはしないでください。
    その部分は元々style.cssに記載してあります。

    返信

  21. 初めまして！wordpress初心者です！
    こちらの記事のとおりしたところリスト「・」が出てしまうのですが、どのようにすると消せるのでしょうか？

    返信

コメントを残す

メールアドレスが公開されることはありません。