テーマStripeの使い方

はてなブログテーマStripeのカスタマイズ・使い方を説明するブログです。

記事上・下にソーシャルシェアボタンと読者になるボタンを設置する

ソーシャルシェアボタン

FontAwesomeの呼び出し

headに貼り付けて下さい。既にどこかに記述済みの場合は必要ありません。管理画面→設定→詳細設定→「headに要素を追加に」以下のコード記述。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

HTMLコード

記事上・下にソーシャルシェアボタンを設置するには、以下のコードをダッシュボード>デザイン>カスタマイズ>記事>記事下or記事上に追記して下さい。

<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="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}" 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="https://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}"
      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 = 'http://api.b.st-hatena.com/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>

読者になるボタン

はてなIDとブログドメインを(ブログURLからhttps://抜き)ご自分のものに入れ替えて、お好きなところへどうぞ。

<div class="follow-btn" >
<a class="hatena" href="http://blog.hatena.ne.jp/はてなID/ブログドメイン/subscribe" onclick="window.open('http://blog.hatena.ne.jp/はてなID/ブログドメイン/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i> <span class="text-small">読者になる</span></a>
</div>

こちらのコードを記事で紹介するときは同内容のこちらのブログへリンクしてください。
はてなブログの記事上下にレスポンシブなカウント付きシェアボタンをつけるカスタマイズ(修正あり) - Minimal Green