デザインテーマ「Brooklyn」でSNSシェアボタンをカスタマイズする方法【はてなブログ カスタマイズ忘備録（３）】

 今回は、はてなブログのデザインテーマ「Brooklyn」でSNSシェアボタンをカスタマイズする方法についてまとめてみます。 

 カスタマイズ環境 

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

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

今回は「Brooklyn」の作者様のシェアボタンを導入します。（他の環境でできるかどうかは試していないのでわかりませんが、たぶんボタンデザインがブログテーマをコードを参照しているので難しいような気がします。）

デザインテーマ「Brooklyn」でSNSシェアボタンをカスタマイズする

今回は、作者シロマティさんの以下のサイトを参考に「モノトーンのシェアボタン」を導入させていただきました。

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE

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

（１）「モノトーンのシェアボタン」のコードを貼る

はてなブログ公式 (デフォルト) の各プラグインは「別ページのデータを読み込む」ようなことをしているものが多く、それが「WordPressサイト」に比べ「はてなブログ」の表示が遅い要因になっているという話もあります。

「SNSのシェアボタン」についても表示が遅くなる要因の１つと考えられるので、今回は「はてなブックマーク」「Facebook」「Twitter」の３つだけを置くことにし、他のコードは削除してみました。

 私の場合、次のようにコードを削除しました。 

<!-- モノトーンのシェアボタン -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--シェアボタン-->
<div class="share-button">
 <div class="share-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><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
 <!--Facebook-->
 <a href="https://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="fa fa-facebook-square lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
 <!--Twitter-->
 <a href="https://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>
 </div>
</div>
<!-- モノトーンのシェアボタン ここまで-->

このコードは「SNSのシェアボタン」を表示する位置に貼ります。通常は「記事下」か「記事上」もしくは両方に貼るようです。

今回は「記事下」に貼ることにしました。

ダッシュボードの「 デザイン」＞「カスタマイズ」＞「記事」＞「記事下」

（２） シェアボタン数をカウントするコードを貼る

このコードを貼ることで「はてブ数」や「Facebookのシェア数」をカウントし表示できるようになるようです。

<!-- シェアボタン数のカウント -->
<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:'https://b.hatena.ne.jp/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>
<!-- シェアボタン数のカウント ここまで-->

このコードは「記事下」に貼っていれば「記事上」には貼らなくても良いとのことなので、「モノトーンのシェアボタン」のコードに続けて「記事下」に貼りました。

ダッシュボードの「 デザイン」＞「カスタマイズ」＞「記事」＞「記事下」

また、このコードの一番上に記述されている

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

 の部分は「Brooklyn」のグローバルメニューを導入している場合、同じコードがすでに記述されており、重複するとページの読み込みが遅くなるとのこと。

私は先に「Brooklyn」のグローバルメニューを導入していたため削除しました。

これで記事ページに新しいSNSシェアボタンが表示されます。

（３）動作確認

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

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

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

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

---

 以上で、「Brooklyn」でのSNSシェアボタンのカスタマイズは完了です。

「Brooklyn」と同じ白と黒を基調としたシンプルなアイコンのSNSシェアボタンを設置することができました。

しかし「Brooklyn」をレスポンシブで使用していない状態で、デフォルトのSNSボタンの表示をオフしたことで、スマホサイトでSNSボタンが表示されなくなってしまいました。

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