アメブロではデフォルトで各エントリー下部にいいね！ボタンやツイッターボタンなどが設置されていますが、ツイート数が表示される公式ツイッターボタンや、はてブ数が表示される公式はてブボタンを増設しているブログも多いかと思います。
その際にできるちょっとした工夫をご紹介しようと思います。
●ツイッターボタンにハッシュタグをあらかじめつけておく
公式ツイッターボタンはデフォルトですと、ページタイトル、ページURL、情報経路(via※デフォルトは自分のツイッターID)がツイートされるようにできています。ここに『#ameba』や『#ameblo』などのハッシュタグを初期設定に追加すれば、アメブロユーザーにそのツイートを気づいてもらえる可能性が増えると思います。
●ページ全体を読み込み後にソーシャルボタンを読み込む
ソーシャルボタンは便利なのですが、読み込みに時間がかかることもしばしば。ページ内に複数設置する場合、特にトップページなど複数の記事に対して設置する場合は、ソーシャルボタンのせいで読み込みが大幅に遅くなることもあります。
その対策として、ページの読み込みを終えたあとでソーシャルボタンを読み込む、という方法があります。
これで、ページ自体の読み込みが重くなることは回避することができます。
●コードを書いてみる
では、上記二つの工夫をまとめて、ツイッターボタンとはてぶボタンを各記事末に設置するコードを書いてみます。(function($){
var entryFlag = (location.href.search('entry') !== -1);
$('.skinArticle').each(function(){
var twtHTML = '<a href="https://twitter.com/share" class="twitter-share-button"'+(entryFlag?' data-text="'+$('h1:eq(0)',this).text().replace(/\n/g,'')+' #ameblo #ameba"':' data-url="'+$('a.skinArticleTitle:eq(0)',this).attr('href')+'" data-text="'+$('h1:eq(0)',this).text().replace(/\n/g,'')+' #ameblo #ameba"')+' data-count="horizontal" data-lang="ja"></a>';
var hbmHTML = ' <a href="http://b.hatena.ne.jp/entry/'+(entryFlag?location.href.split('.html')[0]+'.html':$('a.skinArticleTitle:eq(0)',this).attr('href'))+'" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>';
$('a.tweetBtn',this).after(twtHTML+hbmHTML).remove();
});
/*ページが読み込まれてからスクリプトを実行*/
window.onload = function (){
$.getScript('http://b.st-hatena.com/js/bookmark_button.js',function (){
$.getScript('http://platform.twitter.com/widgets.js');
});
};
}(jQuery));
※jQueryに依存しています。是非、お試しを！
●追記：アメブロの広告配信サーバが重すぎるので対策
window.onloadする上で厄介なのがアメブロの広告サーバだということに気がつきました。読み込みに酷いときでは10秒近くかかってしまうのですが、あれが読み込み終わらないとwindow.onloadが実行されないのです。
そこで、setTimeoutで起動するバージョンも書いてみました。
当ブログではこちらを現在使用しております。
(function($){
var entryFlag = (location.href.search('entry') !== -1);
$('.skinArticle').each(function(){
var twtHTML = '<a href="https://twitter.com/share" class="twitter-share-button"'+(entryFlag?' data-text="'+$('h1:eq(0)',this).text().replace(/\n/g,'')+' #ameblo #ameba"':' data-url="'+$('a.skinArticleTitle:eq(0)',this).attr('href')+'" data-text="'+$('h1:eq(0)',this).text().replace(/\n/g,'')+' #ameblo #ameba"')+' data-count="horizontal" data-lang="ja"></a>';
var hbmHTML = ' <a href="http://b.hatena.ne.jp/entry/'+(entryFlag?location.href.split('.html')[0]+'.html':$('a.skinArticleTitle:eq(0)',this).attr('href'))+'" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>';
$('a.tweetBtn',this).after(twtHTML+hbmHTML).remove();
});
/*1.5秒待ってからスクリプトを実行*/
window.setTimeout(function (){
$.getScript('http://b.st-hatena.com/js/bookmark_button.js',function (){
$.getScript('http://platform.twitter.com/widgets.js');
});
},1500);
}(jQuery));
※jQueryに依存しています。google+1ボタンもセットにしたコードも置いておきます。
(function($){
var entryFlag = (location.href.search('entry') !== -1);
$('.skinArticle').each(function(){
var twtHTML = '<a href="https://twitter.com/share" class="twitter-share-button"'+(entryFlag?' data-text="'+$('h1:eq(0)',this).text().replace(/\n/g,'')+' #ameblo #ameba"':' data-url="'+$('a.skinArticleTitle:eq(0)',this).attr('href')+'" data-text="'+$('h1:eq(0)',this).text().replace(/\n/g,'')+' #ameblo #ameba"')+' data-count="horizontal" data-lang="ja"></a>';
var hbmHTML = ' <a href="http://b.hatena.ne.jp/entry/'+(entryFlag?location.href.split('.html')[0]+'.html':$('a.skinArticleTitle:eq(0)',this).attr('href'))+'" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>';
$('a.tweetBtn',this).after(twtHTML+hbmHTML+'<span style="margin-left:20px;"><g:plusone href="'+$('a.skinArticleTitle:eq(0)',this).attr('href')+'"></g:plusone></span>').remove();
});
/**1.5秒待ってからスクリプトを実行*/
window.setTimeout(function (){
$.getScript('http://b.st-hatena.com/js/bookmark_button.js',function (){
$.getScript('http://platform.twitter.com/widgets.js',function (){
window.___gcfg = {lang: 'ja'};
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
});
});
},1500);
}(jQuery));
※jQueryに依存しています。●追記2：ハッシュタグ
ハッシュタグは実は末尾に付けないと意味がないことが判明。さすがツイッター初心者！お恥ずかしながらしりませんでした。。。
で、タイミングよく公式ボタンにハッシュタグがサポートされていたので、以下のように変えてみましょう。
(function($){
var entryFlag = (location.href.search('entry') !== -1);
$('.skinArticle').each(function(){
var twtHTML = '<a href="https://twitter.com/share" class="twitter-share-button"'+(entryFlag?' data-text="'+$('h1:eq(0)',this).text().replace(/\n/g,'')+'"':' data-url="'+$('a.skinArticleTitle:eq(0)',this).attr('href')+'" data-text="'+$('h1:eq(0)',this).text().replace(/\n/g,'')+'"')+' data-count="horizontal" data-lang="ja" data-hashtags="ameblo"></a>';
var hbmHTML = ' <a href="http://b.hatena.ne.jp/entry/'+(entryFlag?location.href.split('.html')[0]+'.html':$('a.skinArticleTitle:eq(0)',this).attr('href'))+'" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>';
$('a.tweetBtn',this).after(twtHTML+hbmHTML).remove();
});
/*1.5秒待ってからスクリプトを実行*/
window.setTimeout(function (){
$.getScript('http://b.st-hatena.com/js/bookmark_button.js',function (){
$.getScript('http://platform.twitter.com/widgets.js');
});
},1500);
}(jQuery));
※jQueryに依存しています。google+1ボタン込みは以下のように。
(function($){
var entryFlag = (location.href.search('entry') !== -1);
$('.skinArticle').each(function(){
var twtHTML = '<a href="https://twitter.com/share" class="twitter-share-button"'+(entryFlag?' data-text="'+$('h1:eq(0)',this).text().replace(/\n/g,'')+'"':' data-url="'+$('a.skinArticleTitle:eq(0)',this).attr('href')+'" data-text="'+$('h1:eq(0)',this).text().replace(/\n/g,'')+'"')+' data-count="horizontal" data-lang="ja" data-hashtags="ameblo"></a>';
var hbmHTML = ' <a href="http://b.hatena.ne.jp/entry/'+(entryFlag?location.href.split('.html')[0]+'.html':$('a.skinArticleTitle:eq(0)',this).attr('href'))+'" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>';
$('a.tweetBtn',this).after(twtHTML+hbmHTML+'<span style="margin-left:20px;"><g:plusone href="'+$('a.skinArticleTitle:eq(0)',this).attr('href')+'"></g:plusone></span>').remove();
});
/**1.5秒待ってからスクリプトを実行*/
window.setTimeout(function (){
$.getScript('http://b.st-hatena.com/js/bookmark_button.js',function (){
$.getScript('http://platform.twitter.com/widgets.js',function (){
window.___gcfg = {lang: 'ja'};
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
});
});
},1500);
}(jQuery));
※jQueryに依存しています。