シェアボタン用のcssも埋め込み済みです。
シェアボタンの設置
シェアボタン用のcssを埋め込み済みなので、下記の手順でシェアボタンを設置できます（Google+はサービス停止なのでオミットしてあります）。
Facebookのシェア数表示について
2019年4月のFacebook仕様変更により、Facebookのシェア数は開発者向けFacebookでアクセストークンを取得しなくてはならなくなったので、ひとまずカウント表示を廃止にしました。
Facebookのシェア数表示をしたい場合は下記の記事を参照してください。
headにjQueryとFont Awesomeを設置
headでjQueryとFont Awesome5のコードを書き込みます。
ダッシュボードの設定→詳細→「headに要素を追加」に下記コードをペースト
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
記事にシェアボタンの設置
下記コードをカスタマイズ→記事の記事上や記事下、あるいは両方に設定
<!--シェアボタン-->
<div class="share-flat">
<p>この記事をシェアする</p>
<div class="share-flat-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-cog 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="blogicon-facebook lg"></i><br><span class="small-text">Facebook</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>
<!--Pocket-->
<a href="https://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fab fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
<!--LINE-->
<a href="https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button" target="_blank"><i class="fab fa-line"></i><br><span class="small-text">LINE</span></a>
</div>
<!--Twitterエゴサボタン-->
<a href="https://twitter.com/search?f=tweets&vertical=default&q={URLEncodedPermalink}" class="twitter-search" target="_blank"><i class="blogicon-twitter lg"></i><span class="share-text">この記事に関するツイート</span></a>
</div>
記事下にコードを追加
シェア数取得用の下記コードをカスタマイズ→記事の記事下に追加
<script>
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
jQuery.ajax({
url:'https://b.hatena.ne.jp/entry.count?callback=?',dataType:'jsonp',data:{url:url},
success:function(res){jQuery( selcter ).text( res || 0 );},
error:function(){jQuery( selcter ).text('0');}
});
}
$(function(){
get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>
以上です。
