【備忘】Brooklynのテーマのシェアボタンを簡単につける
久しぶりにデザインをイジッてみました。
ずっと触りたかったシェアボタンを変えたかったんです。まだシェアされた事ないくらい歴史の浅いブログですが。。。
公式。Brooklynのテーマにシェアボタンを追加
この赤い四角で囲っているやつです。
よく読まれている記事のシェアボタンはいろんな人に押されていて、シェア数が数100とかになっています。羨ましい。
コピペさせて頂いたコードはこのサイトに載っていました。
とても簡単でわかりやすく書いて頂いていたので感謝感謝。
Brooklynを作った方の記事なので、信頼も抜群ですね。
このデザイン本当にシュッとしてて好きで、はてなブログを開始した時から使わせて頂いています。感謝感謝。
読んでそのままコピーしただけで、今のモノクロのシェアボタンにできました。
簡単にカッコいいシェアボタンが付けれて大満足です。
参考までに、僕の今のコードを貼っておきます。
「ダッシュボード」→「カスタム」→「記事」→「記事下」のコードは今こんな感じになりました。
<!--ブルックリンのシェアボタン-->
<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/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-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><!-- シェアボタン数のカウント -->
<script>
//Facebookのシェア数を取得
function countFacebook(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 countHatebu(url, selector) {
$.ajax({
url:'http://api.b.st-hatena.com/entry.count?callback=?',
dataType:'jsonp',
data:{
url:url
}
}).done(function(res){
$(selector).text( res || 0 );
}).fail(function(){
$(selector).text('0');
});
}
$(function(){
countFacebook('{Permalink}', '.facebook-count');
countHatebu('{Permalink}', '.hatebu-count');
});
</script><!--記事下に関連記事-->
<div id="relateArticle"></div><script>
var timer = setInterval(function() {
if (typeof jQuery != 'undefined') {
$("#relateArticle").html($(".hatena-module-related-entries").html());
clearInterval(timer);
}
}, 1000)
</script>
一番下の部分は記事下に関連記事を載せるためのコードなので無視して下さいね。
<!--記事下に関連記事-->
<div id="relateArticle"></div><script>
var timer = setInterval(function() {
if (typeof jQuery != 'undefined') {
$("#relateArticle").html($(".hatena-module-related-entries").html());
clearInterval(timer);
}
}, 1000)
</script>
