Loading...

アーカイブページにはてなブックマーク数を表示するようにするカスタマイズ - はてなブログカスタマイズ

f:id:nasust:20170112172551j:plain



こんにちはnasustです。

今回は、アーカイブページに、はてなブックマーク数を表示するカスタマイズです。

f:id:nasust:20170112153912j:plain

はてなブックマーク数が付くことで記事の注目度がアップします。

JQuery

JQueryが必要です。JQueryを導入していない場合は以下のhtmlをヘッダに入力してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

既に他のカスタマイズなどで導入済みである場合は必要ありません。

CSS

.archive-entry .archive-bookmark-count .low-count{
    color:#F07171;
}

.archive-entry .archive-bookmark-count .high-count{
    color:#FF0000;
}

JavaScript

以下のJavaScriptをフッターに入力します。

<script>
$(function(){
    var hrefList = [];
    var archiveEntries = $(".archive-entry");
    archiveEntries.each(function(){
        var archiveEntry = $(this)
        var entryTitleLink = archiveEntry.find(".entry-title-link");
        var href = entryTitleLink.attr("href")
        hrefList.push(href);
    })
    
    var uris = ""
    for( var i = 0 ; i < hrefList.length ; i++ ){
        uris += "url=" +  encodeURIComponent( hrefList[i] ) + "&"
    }
    
    $.getJSON("http://api.b.st-hatena.com/entry.counts?" + uris + "callback=?" , function( json ){
        
        archiveEntries.each(function(){
            var archiveEntry = $(this)
            var entryTitleLink = archiveEntry.find(".entry-title-link");
            var href = entryTitleLink.attr("href")
            
            var count = json[href];
            
            if(count > 0){
                var html = "<div class='archive-bookmark-count'>"
                if( count < 10 ){
                    html += "<span class='low-count'>"
                }else{
                    html += "<span class='high-count'>"
                }
                
                html += "<span class='num'>"
                html += count;
                html += "</span>"
                
                html += " USERS";
                
                html += "</span>"
                html += "</div>"
                
                entryTitleLink.before( html );
            }
            
        });
        
    });
});
</script>

最後に

アーカイブページにはてなブックマーク数があると、注目されている記事が分かりやすくて良い感じです。

テーマによっては、デフォルトでブックマーク数が表示されないようです。 自分のブログで使用している「 Report 」テーマでは表示されないようです。