zenbackをアメブロの記事下の挿入する

zenbackはMovableTypeで有名なSixApartが提供しているWEBサービスです。

主要なソーシャルネットサービスを網羅しているのでこれを貼り付けておけば不自由しません。

ガイドページにアメブロの設置方法も解説してますがこの方法だとサイドに表示されちゃいます。

個別ページの記事下だけに表示させる方法を解説します。

アカウントの登録は簡単なのでさくっとやってください。

登録するとブログ用のスクリプトが取得できます。

<script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//ameblo.jp/webmemorandum/&nsid=91015418352779472%3A%3A109536089353546972&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script>

これが当ブログのタグ。

必要なのはこの部分です。

document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//ameblo.jp/webmemorandum/&nsid=91015418352779472%3A%3A109536089353546972&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));

これを修正します。

<script>
var url=location.href;
if (url.match(/^.+\/entry[\-0-9]*\.html$/g ) || url.match(/^.+\/entry[\-0-9]*\.html\#cbox$/g)){
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//ameblo.jp/webmemorandum/&nsid=91015418352779472%3A%3A109536089353546972&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
$('.articleExLinkArea').remove();
}

$(function(){
$('#zenback_loady').appendTo('div.skinArticleBody');
});
</script>

var url=location.href;
if (url.match(/^.+\/entry[\-0-9]*\.html$/g ) || url.match(/^.+\/entry[\-0-9]*\.html\#cbox$/g)){

}

個別記事でだけzenbackを表示させます。これは他にも応用が効きますね。JQueryを使ってます。

あと、ここでアメブロデフォルトのソーシャルボタンを消去してます（マイページの設定でソーシャルボタンを非表示設定にしている場合は必要ありません）。

$(function(){
$('#zenback_loady').appendTo('div.skinArticleBody');
});

zenbackを記事下に挿入（「#zenback_loady」を「div.skinArticleBody」要素の最後に移動です（.appendTo））

わずか数行でコレだけの機能が実現できます。欠点は動作がちょっと重いこと

アメブロ解体新書

Amebaブログウォッチング・・・

zenbackをアメブロの記事下の挿入する