デザインはテーマの方で記述済みです。
FontAwesomeの呼び出し
headに貼り付けて下さい。既にどこかに記述済みの場合は必要ありません。管理画面→設定→詳細設定→「headに要素を追加に」以下のコード記述。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
記事下HTML
<div class="sns-share"> <p>シェアする</p> <ul class="sns-area"> <li> <a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button sns-bookmark sns-link" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"> <i class="blogicon-bookmark lg"></i><span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></a> </li> <li> <a class="sns-facebook sns-link" href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"> <i class="fa fa-facebook-official" ></i><span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span></a> </li> <li> <a class="sns-twitter sns-link" href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank"> <i class="blogicon-twitter lg" ></i><span class="sns-txt">Twitter</span></a> </li> <li> <a class="sns-googleplus sns-link" href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"> <i class="fa fa-google-plus"></i><span class="sns-txt">Google+</span></a> </li> <li> <a class="sns-pocket sns-link" href="http://getpocket.com/edit?url={URLEncodedPermalink}" onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" > <i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a> </li> </ul> </div> <!--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(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(){ getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count'); getFacebookCount('{Permalink}', '.facebook-count'); }); </script>
色違いはこちら。↓
design.syofuso.com