スマホ画面のSNSシェアボタンをカスタマイズする方法【はてなブログカスタマイズ忘備録（４）】

f:id:b204638:20180407015137j:plain

今回は、はてなブログでスマホ画面のSNSシェアボタンをカスタマイズする方法についてまとめてみます。

カスタマイズ環境
スマホ画面のSNSシェアボタンをカスタマイズする

カスタマイズ環境

使用テーマ	Brooklyn
はてなブログ	はてなブログPro

上記は、私のカスタマイズ環境です。

今回のカスタマイズは「Brooklyn」をレスポンシブで使用しない際に「モノトーンのシェアボタン」をスマホに反映する方法がわからなかったので、その代わりにスマホに導入する方法を試してみたものです。

そのため「Brooklyn」以外の環境でも導入できると思います。（でも、他の環境では未確認です。）

スマホ画面のSNSシェアボタンをカスタマイズする

今回は、shun (id:shun_prog0929)さんの以下のサイトを参考に、おしゃれなSNSボタンのスマホ版を導入させていただきました。

コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜

ここからは、私が行った導入手順を順番に整理してみます。

（１）WEBアイコンフォント「Font Awesome」のコードを貼る

はじめにSNSアイコンの画像の紐付けるためのコードを貼ります。（これをしないと「Google+とPocketのアイコン画像が表示されない」とのこと。）

実は、PCと同じくスマホでもSNSボタンは「はてなブックマーク」「Facebook」「Twitter」の３つだけを設置する予定なので、もしかしたら今回は記載しなくても良いのかもしれませんが、「いつか設置するかもしれない」と考え、念のためコードを貼っておくことにしました。

〈貼り付けるコード〉 ※2017/5/8現在

<!-- WEBアイコンフォント「Font Awesome」 -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

〈貼り付ける場所〉

ダッシュボードの「設定」＞「詳細設定」＞「headに要素を追加」

（２）「スマホ版シェア数を数えるJQueryコード」を貼る

次はシェア数を数えるコードを貼ります。

〈貼り付けるコード〉

<!-- スマホ版シェア数を数えるJQueryコード -->
<!--JQueryを使用-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--シェア数の取得-->
<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
 entryUrl = 'https://b.hatena.ne.jp/entry.count?url=' + encodeURIComponent(entryUrl)
 $.ajax({
 url:entryUrl,
 dataType:'jsonp',
 }).then(
 function(result){ $(selcter).text(result || 0); },
 function(){ $(selcter).text('0'); }
 );
}
//Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
 entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
 $.ajax({
 url:entryUrl,
 dataType:'jsonp'
 }).then(
 function(result){
 if(result.share && result.share.share_count) {
 $(selcter).text(result.share.share_count);
 } else {
 $(selcter).text('0');
 }
 },
 function(){ $(selcter).text('0'); }
 );
}
$(function(){
 getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
 getFacebookCount('{Permalink}', '.facebook-count');
});
</script>
<!-- スマホ版シェア数を数えるJQueryコード ここまで-->

〈貼り付ける場所〉

ダッシュボードの「デザイン」＞「スマートフォン」＞「記事」＞「記事下」

（３）「スマホ版シェアボタンのHTMLコード」を貼る

続いて、SNSシェアボタンを設置する位置に「スマホ版シェアボタンのHTMLコード」を貼ります。今回は「記事下」に設置するので、先程のコードに続けて「記事下」に貼り付けます。

またPCサイトと同じく「はてなブックマーク」「Facebook」「Twitter」の３つ以外のコードは削除してみました。

〈貼り付けるコード〉

<!--スマホ版シェアボタンのHTMLコード-->
<div class="share-buttons">
<span style="font-size: 8px">シェアする</span>
<div class="inner">
<!--はてなブックマーク-->
<a href="https://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> <div class="share-count-box"><span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div><br> <span class="share-text">Bookmark!</span></a>
<!--Facebook-->
<a href="https://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;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <div class="share-count-box"><span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span></div><br><span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TWwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a>
</div>
</div>
<!-- スマホ版シェアボタンのHTMLコード ここまで-->

〈貼り付ける場所〉

ダッシュボードの「デザイン」＞「スマートフォン」＞「記事」＞「記事下」

（４）「スマホ版デザインを決めるCSSコード」を貼る

最後に「スマホ版デザインを決めるCSSコード」を記事下に貼り付けます。デザインを決めるコードは２種類ありますが、今回は「スマホ版色付きのボックス」を利用してみます。

また、設置する際に、他のボタンと合わせてSNSシェアボタンも左揃えで表示しようと思いコードの「text-align: center;」部分を削除しました。

〈貼り付けるコード〉

<!-- スマホ版デザインを決めるCSSコード-->
<style type=text/css>
/*share-botton*/
.share-buttons{
 margin-bottom: 10px;
 text-align: center;
}
.share-buttons .inner a {
 position: relative;
 display: inline-block;
 width: 17%;
 height: 45px;
 line-height: 25px;
 font-size: 16px;
 text-align: center;
 color: #ffffff;
 text-decoration: none;
 padding:2px;
}
.share-buttons .inner .share-text{
 font-size: 8px;
}
.share-count-box {
 height:1.33333em;
 display:inline-block;
 text-align:center;
}
.share-buttons .inner .hatena-bookmark-button{
 background: #008fde;
}
.share-buttons .inner .facebook-button{
 background: #305097;
}
.share-buttons .inner .twitter-button{
 background: #55acee;
}
.share-buttons .inner .googleplus-button{
 background: #db4a39;
}
.share-buttons .inner .pocket-button{
 background: #ee4256;
}
</style>
<!-- スマホ版デザインを決めるCSSコード ここまで-->