えじの自由帳

今の自分を書きためるブログ

Wordpress

SNSボタンのデザインがばらばらだったので自作してみた。(Stinger5カスタマイズ)

2014/10/28

cat-wants-share

困ったときは猫に喋らせろというのが僕の家の家訓なんですよ。たぶん。

さて。SNSシェア用のボタンはほとんどのブログが設置しているのではないでしょうか。
ただ、シェアボタンは各SNSが作っているので、デザインだけでなく、大きさまでばらばらだったりしますよね。

僕のブログで使っているWordpressテーマ「Stinger5」のデフォルトのSNSボタンはこんな感じ。

sns-default

うーむ。悪くはないけど。ちょっと思わずカスタマイズしたくなっちゃう感じですね！

これをこんな感じにしてみました。統一感もあるし、スマートフォンで見たときも表示崩れがありません。

外部javascriptを読み込まなくていいので表示速度の向上にも貢献してくれるはず。

snsicons

  • 各SNSのAPIに直接アクセスしてソーシャルカウントを取得する
  • CSSスプライトで画像の読み込みを高速化

みたいなことをやりました。

追記(2014/10/28)

現在はSNS Count Cacheというプラグインを使う方法を行っています。やりかたの解説記事も書いたのでそちらも参考になさってください。

さらなる高速化を。自作SNSボタンをキャッシュしよう
さらなる高速化を。自作SNSボタンをキャッシュしよう
さらなる高速化を。自作SNSボタンをキャッシュしよう

ソーシャルカウントを取得する

ソーシャルカウントはサーバー側でPHPを使って取得することにしました。

各SNSにはそれぞれシェア数とかをカウントするAPIが提供されているので、それを叩いて返ってきたデータをPHPの変数にぶちこんでいます。

<?php
//Twitter
$url = get_permalink();
$json = @file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url='.rawurlencode($url));
$array = json_decode($json,true);
$tw_count = $array['count'];
//facebook
$url = get_permalink();
$json = @file_get_contents('http://graph.facebook.com/?id='.rawurlencode($url));
$array = json_decode($json,true);
if(!isset($array['shares'])){$count = 0;}else{$count = $array['shares'];}
$fb_count = $count;
//google+
$url = get_permalink();
if(isset($_GET['url'])) $url = $_GET['url'];
$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, "https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ" );
curl_setopt( $ch, CURLOPT_POST, 1 );
curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]' );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch, CURLOPT_HTTPHEADER, array( 'Content-type: application/json' ) );
$result = curl_exec( $ch );
curl_close( $ch );
$obj = json_decode( $result, true );
if(!isset($obj[0]['result']['metadata']['globalCounts']['count'])){$count = 0;}else{$count = $obj[0]['result']['metadata']['globalCounts']['count'];}
$gp_count = $count;
//hatena
$url = get_permalink();
$count = @file_get_contents('http://api.b.st-hatena.com/entry.count?url='.rawurlencode($url));
if(!isset($count) || !$count){ $count = 0; }
$hb_count = $count;
//feedly
$feed = '【自分のフィードへのリンク】';
$feed = rawurlencode($feed);
$json = @file_get_contents("http://cloud.feedly.com/v3/feeds/feed%2F{$feed}"); 
$obj = json_decode($json,true);
if(isset($obj['subscribers'])){$count = $obj['subscribers'];}else{$count = 0;}
$fe_count = $count;
?>

これで、それぞれのソーシャルカウントが$tw_count、$fb_count、$gp_count、$hb_count、$fe_countという変数に格納されます。

ソーシャルカウントの取得には次のページを大いに参考にしました。大感謝でございます。

ソーシャルカウントの取得方法まとめ(全9サイト)
ソーシャルカウントの取得方法まとめ(全9サイト)
ブックマーク件数

画像を用意する

CSSスプライトを使用します。

CSSスプライトとは、Webデザインにおける技法の一種で、複数の画像部品を連結して1枚の画像ファイルにまとめ、CSSで表示範囲を指定することによって表示する手法のことである。

http://www.sophia-it.com/content/CSSスプライト

横70px、縦20pxのボタンを各SNSについて作り、縦に並べます。

sns-icons

こんな感じになりました。

これを各ボタンのbackground-imageに表示し、background-positionで表示を制御します。

sprite

表示してみる

ここまでできたら、それを表示してあげましょう。

HTML

表示したい場所に次のコードを書きましょう。(Stinger5だったらsns.phpに書けばOKです。)

<div class="sns">
<ul class="snsbox">
<li><span class="sns-count"><?php echo $tw_count; ?></span><a href='https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=< ?php echo get_the_title(); ?>' target="_blank"><span class="sns-icon twitter">twitter</span></a></li>
<li><span class="sns-count"><?php echo $fb_count; ?></span><a href='https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>' target="_blank"><span class="sns-icon facebook">facebook</span></a></li>
<li><span class="sns-count"><?php echo $gp_count; ?></span><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"><span class="sns-icon gplus">google+</span></a></li>
<li><span class="sns-count"><?php echo $hb_count; ?></span><a href='http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=< ?php echo get_the_title(); ?>' target="_blank""><span class="sns-icon hatebu">はてなブックマーク</span></a></li>
<li><span class="sns-count"><?php echo $fe_count; ?></span><a href='http://cloud.feedly.com/#subscription%2Ffeed%2F【自分のフィードへのリンク】' target="_blank"><span class="sns-icon feedly">feedly</span></a></li>
</ul>
</div>

<ul class="snsbox"></ul>の中にli要素として各SNSのカウントとアイコンを表示させます。

アイコンはCSSスプライトを使って表示するので<img />タグは使っていません。

CSS

style.cssに次のコードを書き加えてください。

Stinger5の場合、レスポンシブデザインを採用しているので、

@media only screen and (max-width:780px) {

のより前に書き加えてあげるのが良さそうです。

.snsbox{
overflow:hidden;
}
.snsbox li{
margin: 0 5px 5px 0;
float: left;
list-style:none;
}
.sns-icon {
display: block;
width: 70px;
height: 20px;
text-indent: -9999px;
background: url('【アップロードした画像のURL】') no-repeat;
}
.facebook { background-position: 0 -80px; }
.twitter { background-position: 0 -60px; }
.gplus { background-position: 0 -20px; }
.hatebu { background-position: 0 -40px; }
.feedly { background-position: 0 0; }
.sns-count {
position: relative;
display: block;
width: 68px;
margin-bottom: 7px;
padding: 3px 0;
text-align: center;
border: 1px solid #aaa;
border-radius: 3px;
background: #fff;
}
.sns-count:after, .sns-count:before {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
content: ' ';
pointer-events: none;
border: solid transparent;
}
.sns-count:after {
margin-left: -5px;
border-width: 5px;
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
}
.sns-count:before {
margin-left: -6px;
border-width: 6px;
border-color: rgba(170, 170, 170, 0);
border-top-color: #aaa;
}

やってること

.sns-icon {
display: block;
width: 70px;
height: 20px;
text-indent: -9999px;
background: url('【アップロードした画像のURL】') no-repeat;
}
.facebook { background-position: 0 -80px; }
.twitter { background-position: 0 -60px; }
.gplus { background-position: 0 -20px; }
.hatebu { background-position: 0 -40px; }
.feedly { background-position: 0 0; }

ここが今回のキモ、CSSスプライトです。span要素に背景画像を設定し、background-positionで表示を制御しています。

.sns-count {
position: relative;
display: block;
width: 68px;
margin-bottom: 7px;
padding: 3px 0;
text-align: center;
border: 1px solid #aaa;
border-radius: 3px;
background: #fff;
}
.sns-count:after, .sns-count:before {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
content: ' ';
pointer-events: none;
border: solid transparent;
}
.sns-count:after {
margin-left: -5px;
border-width: 5px;
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
}
.sns-count:before {
margin-left: -6px;
border-width: 6px;
border-color: rgba(170, 170, 170, 0);
border-top-color: #aaa;
}

こっちはカウントの上につける吹き出し。

吹き出しの作成にはCSS Arrow Please!というサービスを使いました。

cssarrowplease
cssarrowplease
ブックマーク件数

これで完成。

ボタンの並び順はTwitter、Facebook、Google+、はてブ、Feedlyにしました。

見た目はこんな感じになっていると思います。

snsicons

動作を確認したい人はちょっと下にスクロールするとホンモノが置いてあるので存分に試してください！

あと、ソースコードと画像をまとめたZipを置いておくので適当に使ってやってくださいな。

sns-button.zip

今回はSNSボタンをカスタマイズしてみました。CSSスプライトの勉強にもなって良かったです。

さらに高速化したい方はアイコンのところだけを画像にして「フォロー」とかの文字はHTMLで書くのが良さそうです。

それでは！

2014年9月12日訂正

キャリコさんのブログ上にて、<?php ?>となるべきところが< ?php ?>となっていて動かないというご指摘をいただきました。

該当部分のコードを修正しました。キャリコさんありがとうございます。

 Wordpress