Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

はてなブログの記事上下にレスポンシブなカウント付きシェアボタンをつけるカスタマイズ(修正あり)

f:id:syofuso:20170307135814p:plain
このシェアボタンはid:hiroseyonakaさんのコードを参考にしています。ありがとうございました。

こんな感じのデザイン

f:id:syofuso:20160806153638j:plain
はてなブックマーク、Facebook、Twitter、Google+のソーシャルシェアボタンです。
レスポンシブでスマートフォンだとカウント、テキストなしでロゴのみです。
f:id:syofuso:20160806154335j:plain

FontAwesomeの呼び出し

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

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

GoogleplusのアイコンはFont Awesomeを使用しています。その他ははてなブログのブログアイコンです。(はてなブログアイコンでFacebookアイコンは使えなくなりました。)

記事上か下に貼り付けるHTMLコード

ダッシュボード>デザイン>カスタマイズ>記事下に貼り付けて下さい。jQueryを既に使って記述済みの場合はjQueryの呼び出しは(1,2行)必要ありません。
(フッタに貼ると上手くいきません。記事下に貼り付けて下さい。)
以前のコードから修正しています。以前のコードを使っていた方(2016/08/21以前)は「result.shares」を「result.share.share_count」に変更してください。

[追記]9/14「ぐるぐる回る」不具合修正しました。

↓↓修正済みコード↓↓

<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" aria-hidden="true"></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 = '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>

このコードはshun (id:shun_prog0929)さんのコードを参考にさせていただきました。ありがとうございました。
コピペ一発!はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ! - いつ俺〜いつから俺ができないと錯覚していた?〜

twitterのシェア数をカウントしたい場合はwww.hiroseyonaka.comの記事を参考にして下さい。

デザインを決めるCSS

※私の制作したテーマ「Minimal Green」と「stripe」ではCSS記述済ですので以下は必要ありません。
ダッシュボード>デザイン>カスタマイズ>デザインCSSへ追記して下さい。

/* レスポンシブシェアボタン */
.sns-header, .sns-footer {
	padding: 0;
}
.sns-area {
	margin: 10px auto;
	padding: 0;
	overflow: hidden;
	table-layout: fixed;
	display: table;
	width: 100%;
}
.sns-area li {
	list-style-type: none;
	display: table-cell;
	vertical-align: middle;
}
.sns-area li:last-child {
	margin-right: 0
}
.sns-link {
	position: relative;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	overflow: hidden;
	height: 42px;
	line-height: 42px;
}
.sns-link::after {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background-color: rgba(255, 255, 255, .3);
	border-radius: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.sns-link:hover {
	text-decoration: none;
}
a.sns-link:hover {
	color: #fff;
}
.sns-link:hover::after {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	50% {
		opacity: 1;
	}
	100% {
		width: 300px;
		height: 300px;
	}
}
@keyframes circle {
	50% {
		opacity: 1;
	}
	100% {
		width: 300px;
		height: 300px;
	}
}
.sns-twitter {
	color: #fff;
	background: #55acee;
}
.sns-facebook {
	color: #fff;
	background: #3a5795;
}
.sns-bookmark {
	color: #fff;
	background: #00A5DE;
}
.sns-googleplus {
	color: #fff;
	background: #db4a39;
}
.sns-pocket {
	color: #fff;
	background: #EE4256;
}
.fa-twitter, .blogicon-facebook, .blogicon-bookmark, .fa-google-plus, .blogicon-chevron-down, .fa-facebook-official {
	margin-right: 5px;
}
.share-text {
	padding-left: 4px;
}
@media only screen and (max-width: 767px) {
	.share-text, .sns-txt {
		display: none;
	}
	.blogicon-twitter, .blogicon-bookmark, .fa-google-plus, .blogicon-chevron-down, .fa-facebook-official {
		margin-right: 0;
	}
}

以上です。

スマートフォン版のコード

上記のコードもレスポンシブ対応してるのでスマートフォン版も同じように貼ってもらって良いのですが若干調整が必要なので、スマートフォン版用のコード用意しました。

<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" aria-hidden="true"></i></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></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></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>
<style>
/* スマートフォン版シェアボタン */
.sns-header, .sns-footer {
	padding: 0;
}
.sns-area {
	margin: 10px auto;
	padding: 0;
	overflow: hidden;
	table-layout: fixed;
	display: table;
	width: 100%;
}
.sns-area li {
	list-style-type: none;
	display: table-cell;
	vertical-align: middle;
}
.sns-area li:last-child {
	margin-right: 0
}
.sns-link {
	position: relative;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	overflow: hidden;
	height: 42px;
	line-height: 42px;
}
.sns-link::after {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background-color: rgba(255, 255, 255, .3);
	border-radius: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.sns-link:hover {
	text-decoration: none;
}
a.sns-link:hover {
	color: #fff;
}
.sns-link:hover::after {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	50% {
		opacity: 1;
	}
	100% {
		width: 300px;
		height: 300px;
	}
}
@keyframes circle {
	50% {
		opacity: 1;
	}
	100% {
		width: 300px;
		height: 300px;
	}
}
.sns-twitter {
	color: #fff;
	background: #55acee;
}
.sns-facebook {
	color: #fff;
	background: #3a5795;
}
.sns-bookmark {
	color: #fff;
	background: #00A5DE;
}
.sns-googleplus {
	color: #fff;
	background: #db4a39;
}
.sns-pocket {
	color: #fff;
	background: #EE4256;
}
.blogicon-bookmark, .fa-facebook-official {
	margin-right: 5px;
}
.share-text {
	padding-left: 4px;
}
</style>

↑をデザイン→カスタマイズ→スマートフォン→記事上・記事下に貼ってください。記事上下両方に貼る場合はscript部分はどちら一方だけでOKです。

ガーリーデザインのシェアボタン

このブログで使ってるちょっとガーリーなデザインのシェアボタンはこちら↓。
design.syofuso.com


読者になるボタンの設置はこちら↓。
カテゴリーの数が多くてデザインが崩れる場合の対処と読者になるボタンの設置 - Minimal Green

 カスタマイズ目次

  • グローバルメニュー
  • シェアボタン
  • 囲み枠
  • ガーリーデザイン
  • ヘッダー周り
  • フッター周り

 はてなブログテーマ制作

 有料カスタマイズサービス

有料にてはてなブログ・アメブロ・WordPressカスタマイズ・制作承っております。

 最新記事