シェアボタンの不具合に対する解決策求む
隆大（Ryuta_kanjani8）です！ヾ(´∀｀)ﾉ
皆さん今日はどんな一日だったでしょうか。
タイトル通り当 blogの記事下にあるシェアボタンの不具合に対する解決策を求めています。
解決策がお分かりの方がいらっしゃいましたらどうかご教示願います。
ご覧の通り現在はてなブックマークのシェアボタンのみ取得数がアイコンの真横に表示されてまってるんですよね～。
このシェアボタン、このスキンを作られた方の下記のBlogで配布されていたものを使わせて頂いてるんですけど最初に設置した時は数を取得出来なくて数字がクルクル回っとったんですよ。
それでいろいろ調べて結果的に下記のBlogにて配布されていたものを合体させたところ、数は取得出来るようになったんですけど数字がアイコンの横に表示されるようになってもうて。
合体させたコードとCSSは下記の通りです。
コード
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--シェアボタン-->
<div class="share-button">
<div class="share-inner">
<!--はてブ-->
<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"><br> </i><span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button "><i class="fa fa-facebook-square lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button "><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--ググタス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button "><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button common" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</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>
<!-- フォローボタン -->
<div class="content-inner-follow-buttons" >
<div class="follow-title"><span style="font-size: 8px">フォローする</span></div>
<a class="hatena" href="http://blog.hatena.ne.jp/eight88eighter88/eight88eighter88.hatenadiary.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/eight88eighter88/eight88eighter88.hatenadiary.jp/subscribe', '', 'width=500,height=400'); return false;">
<i class="blogicon-hatenablog lg"></i><br>
<span class="inner-text">Hatena</span>
</a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=Ryuta_kanjani8" target="_blank">
<i class="blogicon-twitter lg"></i><br>
<span class="inner-text">Twitter</span>
</a>
<a class="instagram" href="https://www.instagram.com/ryuta_kanjani8/" target="_blank">
<i class="blogicon-instagram lg"></i><br>
<span class="inner-text">Instagram</span>
</a>
</div>
/* <system section="theme" selected="6653586347155924442"> */
@import url("https://blog.hatena.ne.jp/-/theme/6653586347155924442.css");
/* </system> */
/*記事上・記事下フォローボタン*/
.content-inner-follow-buttons{
margin-top:40px;
width:100%;
}
.content-inner-follow-buttons .follow-title {
width:100%;
color:#666;
margin-bottom:5px;
}
.content-inner-follow-buttons a {
display: inline-block;
width:60px;
text-align: center;
text-decoration: none;
margin:5px;
}
.content-inner-follow-buttons .inner-text {
font-size:13px;
}
.content-inner-follow-buttons .lg, .content-inner-follow-buttons .fa {
padding:15px;
border-radius:5px;
margin:2px auto;
}
.content-inner-follow-buttons .hatena {
color: #38393C;
background: #ffffff;
}
.content-inner-follow-buttons .blogicon-hatenablog {
background: #38393C;
color: #ffffff;
}
.content-inner-follow-buttons .blogicon-hatenablog:hover {
background: #5F6063;
}
.content-inner-follow-buttons .twitter {
color: #55acee;
background: #ffffff;
}
.content-inner-follow-buttons .blogicon-twitter {
background: #55acee;
color: #ffffff;
}
.content-inner-follow-buttons .blogicon-twitter:hover {
background: #89C7F7;
}
.content-inner-follow-buttons .instagram {
color: #3f729b;
background: #ffffff;
}
.content-inner-follow-buttons .blogicon-instagram {
background: #3f729b;
color: #ffffff;
}
.content-inner-follow-buttons .blogicon-instagram:hover {
background: #7AA5C7;
}
/*サイドバーフォローボタン*/
.sidebar-follow-buttons{
width: 100%;
text-align: center;
letter-spacing: -.40em;
}
.sidebar-follow-buttons a {
display: inline-block;
letter-spacing: normal;
position: relative;
width: 47%;
font-size: 18px;
text-align: center;
text-decoration: none;
padding:6% 0;
margin:1%;
overflow: hidden;
z-index:2;
}
.sidebar-follow-buttons a:hover {
color:#fff;
transition: all .3s;
}
.sidebar-follow-buttons a:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:-100%;
left:0;
z-index:-1;
transition: 0.2s;
}
.sidebar-follow-buttons .inner-text {
font-size:16px;
padding-left:5px;
}
.sidebar-follow-buttons .hatena {
color: #38393C;
border: 1px solid #38393C;
background: #ffffff;
}
.sidebar-follow-buttons .hatena:hover:after {
top:0;
background:#38393C;
}
.sidebar-follow-buttons .twitter {
color: #55acee;
border: 1px solid #55acee;
background: #ffffff;
}
.sidebar-follow-buttons .twitter:hover:after {
top:0;
background:#55acee;
}
.sidebar-follow-buttons .instagram {
color: #3f729b;
border: 1px solid #3f729b;
background: #ffffff;
}
.sidebar-follow-buttons .instagram:hover:after {
top:0;
background:#3f729b;
}
あとFontAwesomeの呼び出しの呼び出しとして設定→詳細設定→headに要素を追加の部分に下記内容を書き込んでいます。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
弄ったのは以上です。
希望としては現在はてなブックマークのアイコンの真横に表示されてしまっている取得数をフェイスブックのアイコンと同じように下に表示されるようにするか、取得数を表示しないようにするか、似たようなデザインのシェアボタンに変更したいです。
何か解決策をご存知の方がいらっしゃいましたらご教示願います。
よろしくお願い致します。
