このブログと同じシェアボタンを設置するには、以下のコードを管理画面>デザイン>カスタマイズ>記事>記事下に追加して下さい。
またFontAwesomeを導入してない方は導入して下さい。
追記:FontAwesome 5 、GooglePlusの削除、LINEボタンの追加をしました。
FontAwesomeの呼び出し
headに貼り付けて下さい。既にどこかに記述済みの場合は必要ありません。管理画面→設定→詳細設定→「headに要素を追加に」以下のコード記述。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
記事上または記事下に貼るコード
<div class="sns-share"> <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="fa fa-twitter"></i></a> </li> <li> <a class="sns-line sns-link" href="https://social-plugins.line.me/lineit/share?url={URLEncodedPermalink}" target="_blank"> <i class="fab fa-line"></i></a> </li> <li> <a class="sns-pocket sns-link" href="http://getpocket.com/edit?url={URLEncodedPermalink}" onclick="" > <i class="blogicon-chevron-down"></i></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>