【はてなブログ レスポンシブ対応】主張しすぎないフラットなシェアボタンを公開する

こんにちは、YUTOです。

当ブログで使用しているシェアボタンをちょこっとカスタマイズしたので公開しておきます。

jQueryの記入

まずこちらを入力していきます。

フッター

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.entry-header').after($('.sns-header'));
$('.entry-footer').before($('.sns-footer'));
});
</script>

記事下

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Twitterのシェア数を取得
function get_social_count_twitter(url, selcter) {
jQuery.ajax({
url:'https://jsoon.digitiminimi.com/twitter/count.json',
dataType:'jsonp',
data:{
url:url
},
success:function(res){
jQuery( selcter ).text( res.count || 0 );
},
error:function(){
jQuery( selcter ).text('0');
}
});
}
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
jQuery.ajax({
url:'https://graph.facebook.com/',
dataType:'jsonp',
data:{
id:url
},
success:function(res){
jQuery( selcter ).text( res.share.share_count || 0 );
},
error:function(){
jQuery( selcter ).text('0');
}
});
}
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
jQuery.ajax({
url:'http://api.b.st-hatena.com/entry.count?callback=?',
dataType:'jsonp',
data:{
url:url
},
success:function(res){
jQuery( selcter ).text( res || 0 );
},
error:function(){
jQuery( selcter ).text('0');
}
});
}
jQuery(function(){
get_social_count_twitter('{Permalink}', '.twitter-count');
get_social_count_facebook('{Permalink}', '.facebook-count');
get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>

HTMLの入力

そうしたら続いてシェアボタンを表示させたい箇所に以下のコードを入力していきます。

記事上

<div class="sns-header">
<ul class="sns-area">
<li>
<a
href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}"
class="hatena-bookmark-button sns-bookmark sns-link"
data-hatena-bookmark-title="{Title}"
data-hatena-bookmark-layout="simple"
title="このエントリーをはてなブックマークに追加">
<span class="hatebu-count small-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="twitter-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</li>
<li>
<a class="sns-facebook sns-link"
href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" 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"></i></a>
</li>
<li>
<a
class="sns-pocket sns-link"
href="http://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></a>
</li>
</ul>
</div>

記事下

上で追加したjQueryコードのすぐ下に記入します。

<div class="sns-footer">
<ul class="sns-area">
<li>
<a
href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}"
class="hatena-bookmark-button sns-bookmark sns-link"
data-hatena-bookmark-title="{Title}"
data-hatena-bookmark-layout="simple"
title="このエントリーをはてなブックマークに追加">
<span class="hatebu-count small-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="twitter-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</li>
<li>
<a class="sns-facebook sns-link"
href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" 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"></i></a>
</li>
<li>
<a
class="sns-pocket sns-link"
href="http://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></a>
</li>
</ul>
</div>

CSSの入力

最後にこちらをデザインCSSに貼り付け。 

.sns-header, .sns-footer {
padding: 0px;
}
.sns-area {
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: #000;
text-align: center;
text-decoration: none;
outline: none;
overflow: hidden;
height: 32px;
line-height: 32px;
}
.sns-link:hover {
text-decoration: none;
opacity: 0.8;
color:#dcdcdc;
}
.sns-twitter {
border: 2px solid #55ACEE;
}
.sns-facebook {
border: 2px solid #16528e;
}
.sns-bookmark {
border: 2px solid #0082c8;
}
.sns-pocket {
border: 2px solid #e8846b;
}
.hatena-bookmark-button::before {
content: "B!";
font-weight: bold;
font-size: 1em;
padding-right: 0.3em;
}
.lg[class*="blogicon-twitter"] {
padding-right: 0.5em;
margin-right: 0px;
}

Twitterのシェア数を取得

http://jsoon.digitiminimi.com/からcount.jsoonに登録し、Twitterの連携をしてシェア数を表示できるようにします。

終わり

これで恐らく当ブログのような表示になるかと思います。

スマホ表示

f:id:ytter3:20170811165826j:plain

PC表示

f:id:ytter3:20170811165908p:plain

ではっ