【STINGER5カスタマイズ】オリジナルソーシャルボタン(シェア数あり)を設置したよ

 2014/09/11

sns

いつもおなじみのSTINGERデフォルトのSNSのボタン。しかし、シェアの少ないわたしのブログではシェア数ゼロが目立ちます。。。(泣)。

とても悲しくなったので、デフォルトをカスタマイズしてみました。STINGER5をお使いの方ならで、ほとんどコピペで同じのができるので参考にしてみてください。

スポンサーリンク

スマホではLINE、PCではgoogle+に切り替え、さらにシェア数表示ありのSNSボタン

わたしオリジナルSNSボタンは、先日ゆめぴょんさんの記事【WordPress】ソーシャルボタンの自作設置方法!3種のシェア数つきSNSアイコン公開を全面的に参考の上、作成しました!もう足を向けて寝られません。(どちらにお住まいか存じ上げませんが…。)

完成イメージはこちら

コンテンツ部分にツイッター、フェイスブック、グーグル+、はてブが横に4つ並びます。シェア数はプラグインで取得しています。アイコン部分はFont Awesomeのアイコンフォントです。はてブはCSSでそれっぽくしているだけです。

sns2

スマホでの表示はgoogle+をなくし、LINEを付け足しました。LINEはシェア数を表示しません。またLINEは画像です。

sns3

そして、シェアがない場合は数字は表示されません。「はぁ?初めからシェア数なんてないデザインなんだけど!なに?」って感じで自然です。

sns1

それでは設置の説明です。

プラグインSNS Count Cacheをインストール

SNS Count Cacheはシェア数を取得するプラグインです。プラグインについての説明は割愛させていただきますが、これまたゆめぴょんさんの記事にとても詳しいご説明がございます。

シェア数を高速表示!WordPressプラグインSNS Count CacheのDBキャッシュはAPIより速い

このプラグインを新規追加→【SNS Count Cache】で検索→インストール後に有効化をして、しばらくするとシェア数が取得されるようになります。

sns.phpを書き換え

以下をsns.phpにすべて上書きします。

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>
<?php if(is_mobile()) { ?>
<div class="sns">
<ul class="snsb clearfix">
<li> 
<!--ツイートボタン-->
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton"><i class="fa fa-twitter-square" style="color:#00acee"></i>ツイッター<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>
<li>
<!--Facebookいいね!/シェアボタン-->
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook-square" style="color:#4561b0"></i>
Facebook <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
<li>
<!--LINEボタン-->
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">
<span class="line">LINE</span></a>
</li>
<li> 
<!--はてブボタン-->
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><i class="fa fa-hatena"  style="color:#00a4de"></i>はてブ <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>
</ul>
</div>
<?php } else { ?>
<div class="sns">  
<ul class="snsb clearfix">
<li> 
<!--ツイートボタン-->
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton"><i class="fa fa-twitter-square" style="color:#00acee"></i>ツイッター<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>
<li>
<!--Facebookいいね!/シェアボタン-->
<a href="http://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=300,width=600');return false;"><i class="fa fa-facebook-square" style="color:#4561b0"></i>Facebook <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
<li>
<!--Google+1ボタン-->
<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-square" style="color:#dd4b30"></i>Google+<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>
<li> 
<!--はてブボタン-->
<a href="http://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"  style="color:#00a4de"></i>はてブ <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>
</ul>
</div>    
<?php } ?>    

sns-top.phpを書き換え

以下をsns-top.phpにすべて上書きします。

<?php
$url_encode=urlencode(get_home_url());
$title_encode=urlencode(get_bloginfo('name'));
?>
<?php if(is_mobile()) { ?>
<div class="sns">
<ul class="snsb clearfix">
<li> 
<!--ツイートボタン-->
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton"><i class="fa fa-twitter-square" style="color:#00acee"></i>ツイッター<?php if(function_exists('get_scc_twitter')) echo (get_scc_twitter()==0)?'':get_scc_twitter(); ?></a>
</li>
<li>
<!--Facebookいいね!/シェアボタン-->
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook-square" style="color:#4561b0"></i>
Facebook <?php if(function_exists('get_scc_facebook')) echo (get_scc_facebook()==0)?'':get_scc_facebook(); ?></a>
</li>
<li>
<!--LINEボタン-->
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">
<span class="line">line</span></a>
</li>
<li> 
<!--はてブボタン-->
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><i class="fa fa-hatena"  style="color:#00a4de"></i>はてブ <?php if(function_exists('get_scc_hatebu')) echo (get_scc_hatebu()==0)?'':get_scc_hatebu(); ?></a>
</li>
</ul>
</div>
<?php } else { ?>
<div class="sns">  
<ul class="snsb clearfix">
<li> 
<!--ツイートボタン-->
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton"><i class="fa fa-twitter-square" style="color:#00acee"></i>ツイッター<?php if(function_exists('get_scc_twitter')) echo (get_scc_twitter()==0)?'':get_scc_twitter(); ?></a>
</li>
<li>
<!--Facebookいいね!/シェアボタン-->
<a href="http://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=300,width=600');return false;"><i class="fa fa-facebook-square" style="color:#4561b0"></i>Facebook <?php if(function_exists('get_scc_facebook')) echo (get_scc_facebook()==0)?'':get_scc_facebook(); ?></a>
</li>
<li>
<!--Google+1ボタン-->
<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-square" style="color:#dd4b30"></i>Google+<?php if(function_exists('get_scc_gplus')) echo (get_scc_gplus()==0)?'':get_scc_gplus(); ?></a>
</li>
<li> 
<!--はてブボタン-->
<a href="http://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"  style="color:#00a4de"></i>はてブ <?php if(function_exists('get_scc_hatebu')) echo (get_scc_hatebu()==0)?'':get_scc_hatebu(); ?></a>
</li>
</ul>
</div>    
<?php } ?>    
POINT

アイコン部分はSTINGER5にデフォルトで入っているアイコンフォントFont Awesome を使っています。好みのモノをご自身でチョイスし、faのところを書き換えてください。

スマホへの切り替えはis_mobileでやってます。

style.cssへの追記

まず、以下の部分を見つけます。

/*--------------------------------
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;
}

このSNSの部分を下記のコードに全て書き換えます。

/*--------------------------------
SNS
---------------------------------*/
.post .sns .snsb.clearfix {
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
.sns ul{
margin:20px 0;
list-style: none;
width:100%;
}
.sns li{
text-align:center;
float:left;
width:47%;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
padding:5px 2px;
margin:5px 2px 5px 0px;
}
.sns li:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
background-color:#f6f6f6;
}.sns li a{
font:12px;
color:#666666;
text-decoration:none;	
}
/* Font Awesome hatena bookmark */
.fa-hatena:before {
content: "B!";
font-family: Verdana;
font-weight: bold
}
.line:before {
content: url(images/line.png);
margin-right:5px;
margin-left:-5px;
text-align:center;	  
}

そして、

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {

この部分の2つ出てくる内、下の方のに以下のコードを追記

/*--------------------------------------
780px SNS
--------------------------------------*/
.sns li{
text-align:center;
float:left;
width:22%;
padding:8px 5px;
margin:10px 2px 20px 2px;
}

LINEボタンの画像について

LINEのみアイコンが画像なのはLINEの「LINEで送るボタン」利用ガイドラインにこのような記載があるためです。

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

(3) 設置者は、専用アイコンの変更や改変を行なってはなりません。

ですので下記サイトからラインの画像をダウンロードし、高さ16px、横16pxに編集してください。再配布も禁止のようなのでこちらのサイトにダウンロード用の画像は用意できませんでした。

MEMO

画像編集ソフトなどお持ちでなければ、メディアにアップロードし、そこで画像サイズを編集し、cssの.lineの部分に画像の絶対パスを記載しておけば大丈夫です。

16pxに編集したLINEボタンの画像はテーマのなかの【imagesファイル】に入れておいてください。(ファビコン画像とか入っているファイルです。)

LINEボタンが必要なければ

スマホ表示ではgoogle+をやめてLINEにしています。もしgoogle+の方がよければsns.phpとsns-top.phpそれぞれのLINEのところのliタグの中身を下記に変えればOKです。

  <a href="https://plus.google.com/share?url=<?php echo $url_encode;?>"><i class="fa fa-google-plus-square" style="color:#dd4b30"></i>Google+<?php if(function_exists('get_scc_gplus')) echo (get_scc_gplus()==0)?'':get_scc_gplus(); ?></a>

また、ボタンの色や形などのカスタマイズは下記のサイトがおすすめです。

http://www.bestcssbuttongenerator.com/

以上で完了です!記事数の多いサイトですと、シェア数を表示するのに少し時間がかかるかもしれません。

まとめ

見た目のデザインはどこか忘れてしまったのですが女性用の大手通販のサイトのマネです。たしか。フェリシモか、ベルメゾンか、どこか。(~_~;)

追記:現在はまたデザインを変えています。RSSボタンなどを追加したものにしました。またコードなどは後日エントリーにしたいと思います。<(_ _)>

今後もボタンを追加したり、もう少しデザインを目立たせたりいろいろ改変していきたいと思います。

それでは、100日チャレンジ8日目のちゅんこ@shufulifeがお送りしました!

STNGER5

Please comment!

  

2件のコメント

  • commu 2015年4月5日 5:17

    いつも参考にさせていただいています。
    質問なのですが、

    ツイートボタンを別ウィンドウで開きたい場合は、どのように記述すればよいでしょうか?

    お忙しいところかとは思いますが、よろしければお教え願います。

    • ちゅんこ 2015年4月6日 15:01

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

      ツイートボタン(ツイッターのボタン)は onclick=”javascript:window.~などと記載しなくとも勝手に別窓で開くはずです。
      (ツイッターの仕様が変わっていたらすいません)
      なのでこのコードにはFB、G+、ハテナのみ別窓で開くように記載しています。(モバイル以外)

      よろしくご確認願います。

Messege




1件のトラックバック

  • 2015年1月20日
    wordpress|記事下にSNSシェアボタンを簡単に設置するプラグイン「WP Social Bookmarking Light」 | 副業のネットビジネスで稼ぐmaikoママ*LOG

    […] ⇒【STINGER5カスタマイズ】オリジナルソーシャルボタン(シェア数あり)を設置したよ! […]