【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む（完成）

CSS

以下のコードをカスタマイズ > デザインCSSに入れてください。

.social-buttons ul {
padding: 0;
margin: 0;
}
.social-buttons ul li {
display: inline-block;
margin: 0;
padding: 0;
list-style-type: none;
width: 15%;
border-radius: 3px;
vertical-align: text-top;
}
.social-buttons ul li a {
width: 100%;
display: inline-block;
color: #fff;
text-decoration: none;
position: relative;
text-align: center;
}
.social-buttons ul li a span.share-count {
display: inline-block;
width: 100%;
color: #000;
background: #fff;
line-height: 2rem;
border-radius: 3px 3px 0 0;
opacity: 1;
-webkit-transition: opacity 0.4s, transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.social-buttons ul li a i {
padding: 0 5px;
}
.social-buttons ul li a i.blogicon-plus {
color: #dd5144;
}
.social-buttons ul li a svg {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
.social-buttons ul li a svg path {
fill: #fff;
}
.social-buttons ul li a span.share-label {
font-size: .7rem;
}
.social-buttons ul li a:hover span.share-count {
opacity: 0.8;
}
.social-buttons ul li.hatena {
background: #00a4de;
border: solid 1px #00a4de;
}
.social-buttons ul li.facebook {
background: #3e59a5;
border: solid 1px #3e59a5;
}
.social-buttons ul li.twitter {
background: #1b95e0;
border: solid 1px #1b95e0;
}
.social-buttons ul li.googleplus {
background: #dd5144;
border: solid 1px #dd5144;
}
@media (max-width: 767px) {
.social-buttons ul li a span.share-label {
display: none;
}
}

これで完了です。

このサイトの場合はいろいろ DOM 操作をやっていますのでもともとやや重めですが、このソーシャルボタンに変更したら、８秒くらいかかっていた読み込みが４秒くらいになりました。

以下は、Javascript の圧縮前のソースです。

Javascript 可読版

/*--------------------------------------------------------------------------*
 *
 *  はてなブログ用ソーシャルボタン
 *
 *  Copyright (c) 2016 IMUZA.com http://www.imuza.com
 *  Released under the MIT license
 *  http://opensource.org/licenses/mit-license.php
 *  
 *--------------------------------------------------------------------------*/
(function(){
var getGoogleShareCount = function(obj, callback) {
var url = 'https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var obj = JSON.parse(xhr.responseText);
callback(obj.result.metadata.globalCounts.count);
} else {
callback(0);
}
};
xhr.open('post', url, true);
xhr.setRequestHeader( 'Content-Type', 'application/json' );
xhr.send(JSON.stringify(obj));
};
var getCountByJSONP = function(url, count, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
var callbackName = 'ExternalCallback_' + count;
window[callbackName] = function (data){
if(script.parentNode){
script.parentNode.removeChild(script);
}
try{
delete window[callbackName];
}catch(e){
window[callbackName] = null;
}
callback(data);
};
script.src = url + '&callback=' + callbackName;
document.body.appendChild(script);
};
var getFbShareCount = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var obj1 = JSON.parse(xhr.responseText),
obj2 = 'share' in obj1 ? obj1.share : {},
count = 'share_count' in obj2 ? obj2.share_count : 0;
callback(count);
} else {
callback(0);
}
};
xhr.send(null);
};
var count = 0;
var tmpl = document.getElementById('tmplShareButtons');
tmpl.removeAttribute('id');
//（2016/9/6）修正
// about ページで、記事ではない article を取得をしないようにクラス名に変更
//  var articles = document.getElementsByTagName('article');
var articles = document.getElementsByClassName('hentry');
Array.prototype.forEach.call(articles, function(article) {
var bm = article.getElementsByClassName('bookmark')[0];
var permalink = bm.getAttribute('href');
var title = bm.innerHTML;
var clone = tmpl.cloneNode(true);
var hatenaButton = clone.getElementsByClassName('hatena-bookmark-button')[0];
hatenaButton.setAttribute('href', 'http://b.hatena.ne.jp/entry/' + permalink);
hatenaButton.setAttribute('data-hatena-bookmark-title', title);    
var url = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(permalink);
getCountByJSONP(url, count, function(data) {
hatenaButton.getElementsByClassName('hatena-bookmark-count')[0].innerHTML = data;
});
count++;
var facebookButton = clone.getElementsByClassName('facebook-share-button')[0];
facebookButton.addEventListener('click', function() {
FB.ui({
method: 'share',
href: permalink,
}, function(response){});
});
var url = 'https://graph.facebook.com/?id=' + encodeURIComponent(permalink);
getFbShareCount(url ,function(data) {
facebookButton.getElementsByClassName('facebook-count')[0].innerHTML = data;
});
var twitterButton = clone.getElementsByClassName('twitter-button')[0];
twitterButton.setAttribute('href', 'http://twitter.com/intent/tweet?url=' + encodeURIComponent(permalink) + '&text=' + title);
var url = 'http://jsoon.digitiminimi.com/twitter/count.json?url=' + encodeURIComponent(permalink);
getCountByJSONP(url, count, function(data) {
twitterButton.getElementsByClassName('twitter-count')[0].innerHTML = data.count;
});
count++;
var googleButton = clone.getElementsByClassName('googleplus-button')[0];
var w = 500, h = 500, x = (window.screen.width - w ) / 2, y = (window.screen.height - h) / 2;
googleButton.setAttribute('href', "javascript:void(window.open('https://plus.google.com/share?url=" + encodeURIComponent(permalink) + "', '_blank', 'width=" + w + ",height=" + h + ",left=" + x + ",top=" + y + "'))");
var obj = {
"method":"pos.plusones.get",
"id":"p",
"params":{
"nolog":true,
"id":permalink,
"source":"widget",
"userId":"@viewer",
"groupId":"@self"
},
"jsonrpc":"2.0",
"key":"p",
"apiVersion":"v1"
};
getGoogleShareCount(obj, function(data) {
googleButton.getElementsByClassName('googleplus-count')[0].innerHTML = data;
});
article.getElementsByClassName('social-buttons')[0].appendChild(clone);
});
tmpl.parentNode.removeChild(tmpl);
})();