はてなブログのSNSシェアボタンをカスタマイズ

「はてなブログSNSシェアボタンカスタマイズ」イメージ

オシャレで目に留まる、SNSシェアボタンをカスタマイズする方法です。

SNSシェアボタンのイメージ図
共通部分
- コード①
選択部分（PC）
選択部分（スマホ）

SNSシェアボタンのイメージ図

オシャレで目に留まる、SNSシェアボタンをカスタマイズする方法です。
以下のようなボタンの設置で、スマホにはラインも表示されます。

PC画面

f:id:lifespirit:20161026032720p:plain

スマホ画面

f:id:lifespirit:20161026032731p:plain

共通部分

コード①

シェアボタンにアイコンを表示させるための設定をします。

GoogleプラスとPocketのアイコンは、はてな標準では使えないので、「Font Awesome Icons」から取得をします。

コード

これをコピーして以下のように、「設定」→「詳細設定」をクリックし、

f:id:lifespirit:20161026010158p:plain

詳細設定の「headに要素を追加」に、ペーストします。

f:id:lifespirit:20161026011140p:plain

選択部分（PC）

コード②jQuery

シェア数をカウントする設定をします。

コード

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> //Facebookのシェア数を取得 function countFacebook(url, selector) { $.ajax({ url:'https://graph.facebook.com/', dataType:'jsonp', data:{ id:url } }).done(function(res){ if ( res.share && res.share.share_count ) { $( selector ).text( res.share.share_count ); } else { $( selector ).text( 0 ); } }).fail(function(){ $(selector).text('0'); }); } //はてなブックマークではてブ数を取得 function countHatebu(url, selector) { $.ajax({ url:'http://api.b.st-hatena.com/entry.count?callback=?', dataType:'jsonp', data:{ url:url } }).done(function(res){ $(selector).text( res || 0 ); }).fail(function(){ $(selector).text('0'); }); } $(function(){ countFacebook('{Permalink}', '.facebook-count'); countHatebu('{Permalink}', '.hatebu-count'); }); </script></textarea></form>

これをコピーして以下のように、「デザイン」→「カスタマイズ」→「記事」をクリックし、

f:id:lifespirit:20161026015436p:plain

「記事下」にペーストします。

f:id:lifespirit:20161026015841p:plain

コード③HTML

以下のコードを表示させたい場所「記事上」、もしくは「記事下」、もしくはその両方にペーストして下さい。サイドバーやフッターなどには設置できません。
記事上に表示させたい場合は「デザイン」→「カスタマイズ」→「記事」→「記事上」
記事下に表示させたい場合は「デザイン」→「カスタマイズ」→「記事」→「記事下」

※記事下に表示させる場合、コード②jQueryより上にペーストして下さい。

コード

<div class="share-flat"> <span style="font-size: 8px">シェアする</span> <div class="share-flat-inner">  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>  <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" ><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>  <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google+</span></a>  <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a> </div> </div>

コード④CSS

CSSで装飾する設定をします。

コード

/*シェアボタン*/ .share-flat{ margin-bottom: 10px; text-align: center; } .share-flat-inner a { position: relative; display: inline-block; width: 18%; height: 40px; line-height: 20px; border-radius: 5px; font-size: 16px; text-align: center; color: #ffffff; text-decoration: none; } .share-flat .small-text{ font-size: 10px; } .share-flat .hatena-bookmark-button{ background: #00A4DE; } .share-flat .twitter-button{ background: #55ACEE; } .share-flat .googleplus-button{ background: #C53727; } .share-flat .facebook-button{ background: #405BA7; } .share-flat .pocket-button{ background: #EE4256; } .share-flat a:hover{ opacity: 0.6; }

これをコピーして、「デザインCSS」にペーストします。

f:id:lifespirit:20161026022150p:plain

完成したSNSボタン

f:id:lifespirit:20161026032720p:plain

選択部分（スマホ）

コード②jQuery

「デザイン」→「スマートフォン」→「記事」をクリックし、

f:id:lifespirit:20161026031613p:plain

「記事下」に

選択部分（PC）コード②jQueryのコードをペーストします。

コード③HTML

ラインのHTMLが追加されています。

記事上に表示させたい場合は「デザイン」→「スマートフォン」→「記事上」

※記事下に表示させたい場合はコード②jQueryより上にペーストして下さい。「デザイン」→「スマートフォン」→「記事下」

コード

<div class="share-flat"> <span style="font-size: 8px">シェアする</span> <div class="share-flat-inner">  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>  <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>  <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>  <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>  <a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" /><br><span class="small-text">Line</span> </a> </div> </div>