アメブロでzenbackを個別記事の下に表示する方法

  • 投稿 : 2011-05-06
  • 更新 : 2013-11-10
追記:2013/11/10
平均20%+高速化!Zenbackのスクリプトコードが新しくなりました - Zenback ブログ

2013年11月7日16時以降にZenback管理画面から入手したコードでは、以下の方法が使えません。
以下のコードで、zenback_loadyをzenback-widget-loaderに置き換えてみましたが、期待どおりの動作はしませんでした。

アメブロで個別記事の下に表示する方法です。公式ページでは、Amebaブログでのzenback利用方法のようにサイドバーに表示する方法が紹介されています。

しかしながらほかのブログでは、個別記事の下に表示可能です。アメブロでもそのようにする方法が実はあります。まずは、公式ページのようにサイドバーに表示するところまで作業を進めて動作確認をしてください。

そこまでできれば簡単で、フリープラグインにzenbackのブログパーツを張ったと思いますが、その後ろに以下のスクリプト(パーツ)を貼りつけて保存すれば終わりです。

新スキン用の説明

※2011/08頃からの新スキン用
<script>
$(function() {
$("#zenback_loady").insertAfter(".articleText");
});
//個別記事にだけ表示場合 ↓ここから
var url=location.href;
if (url.match(/^.+/entry[-0-9]*.html$/g )) {
;
}else if (url.match(/^.+/entry[-0-9]*.html#cbox$/g )) {
;
}else{
 document.getElementById('zenback_loady').style.display = 'none';
}
//個別記事にだけ表示場合 ↑ここまで
</script>
アメブロの新スキン(デザイン)でjQueryを使う方法 」のようにjQueryを読み込んでいない場合は、この記事に書かれている数行をフリープラグインの上方に入れてください。

記事一覧にもzenbackを表示したい人は、上記の個別記事にだけ表示部分を削除してください。


旧スキン用の説明は以下

<script>
$(function() {
$("#zenback_loady").insertBefore("#comment_module");
});
var url=location.href;
if (url.match(/^.+/entry[-0-9]*.html$/g )) {
;
}else if (url.match(/^.+/entry[-0-9]*.html#cbox$/g )) {
;
}else{
 document.getElementById('zenback_loady').style.display = 'none';
}
</script>
・記事一覧表示ではzenbackは表示されない
・個別記事表示の時に、コメントの上にzenbackの関連記事などが表示される
のような動作になります。

広告の上にしたい場合は、「#comment_module」を「#advertising2」に変更してみてください。

関連記事を表示したいだけなら、LinkWithinの方が良いかもしれません。

スポンサーリンク