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

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

 カスタマイズ環境

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

今回のカスタマイズは「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コード ここまで-->

〈貼り付ける場所〉

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

（５）動作確認

設置したSNSボタンがちゃんと機能するか動作確認します。

（６）はてなブログ公式 (デフォルト)のSNSボタンをオフにする

新しいSNSボタンが機能するのを確認できたら、デフォルトのSNSボタンの表示をオフにします。（両方表示することもできますが、ページの表示速度が遅くなる原因になるようです。）

ダッシュボードの「 デザイン」＞「カスタマイズ」＞「記事」＞「ソーシャルパーツ」で該当のSNSボタンのチェックを外します。

---

以上で、スマホ画面へのSNSシェアボタン設置は完了です。

おしゃれなSNSボタンを設置することができました。

次回は、デザインテーマ「Brooklyn」で読者登録ボタンをカスタマイズする方法についてまとめてみます。