AmebloEnjoyMethod

アメブロカスタマイズ情報やhtmlやcss、jQuery等やライフハック記事をお届けしています。


テーマ:

見出し画像

2011/11/18日更新

現在は下記の方法でアメブロ下部に表示できますが、このブログでは外しています。
現在はこのページだけ動作させています。

前ブログにzenbackをアメブロの記事下部に設置する方法を書いたのですが
前ブログを排除したので書き直しました。
それに伴い、個別記事ページでのみ表示させる方法等も書きました。

zenbackとは?

zenbackとは、シックス・アパート社が提供するブログパーツです。

以下のような機能があります。

・その記事をソーシャルサービスなどにポストするボタン
・その記事に関係する自分のブログ記事
・その記事に関係する他のzenbackユーザーのブログ記事(関連リンク)
・その記事についての最新のTwitterのつぶやき
・その記事についてのはてなブックマーク


ページ下部に関連記事を表示する事で、平均ページビューの向上に繋がります。
最近ではzenbackキーワードという機能も追加されました。

また表示させる部分も選択して選べるので、使い勝手がいいブログパーツです。
このブログではソーシャルサービスのボタンを取り外しています。

実際の表示はサンプル画像をご覧ください。
zenbackサンプル画像

zenbackをアメブロの記事下部に設置する方法

zenbackに登録した後に、配布されるコードをフリープラグインに貼り付ける。
zenbackサンプル画像

そしてzenbackを記事下に表示させる為に、以下のコードを記述します。

■旧スキンの場合↓
$(document).ready(function(){
$("#zenback_loady").insertBefore("div.foot");
});


■新スキンの場合↓(表示位置は記事下広告の上)
$(document).ready(function(){
$("#zenback_loady").insertBefore("#advertising2");
});


指定セレクタを変えれば、任意の位置に変更できます。

以下は2011/11/18日現在の”CSS編集用デザイン”での例です。
■記事下広告の下
$(document).ready(function(){
$("#zenback_loady").insertAfter("#advertising2");
});


■記事下部、フッター領域(コメント、ペタ等のリンク)の上
$(document).ready(function(){
$("#zenback_loady").insertBefore("div.skinArticleHeader");
});


■記事下部、フッター領域の下
$(document).ready(function(){
$("#zenback_loady").insertAfter("div.skinArticleHeader");
});



個別記事ページでのみzenbackを表示させる。

上記の方法では、TOPに複数記事を表示させている場合や、テーマ一覧、記事一覧ページにも表示されてしまいます。

それだと見栄えが良くないので、個別記事ページのみで表示させる記述を書きました。

配布されるコード
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//ameblo.jp/amebloger-s/&nsid=90486573392512725%3A%3A92817883788256014&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->


上記はこのブログに配布されたコードです。


個別記事ページのみに表示

<!-- X:S ZenBackWidget -->
<script type="text/javascript">
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/amebloger-s/&nsid=90486573392512725%3A%3A92817883788256014&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
}
</script>
<!-- X:E ZenBackWidget -->
<script>
$(document).ready(function(){
$("#zenback_loady").insertAfter("div.honbun");
});
</script>
<!-- X:E ZenBackWidget -->


赤文字部分を配布されたコードに付け足すだけです。

if文と正規表現を近頃ようやく覚えてきたので、これで他にも色々出来そうな気がします。

zenbackであなたのブログに全てのフィードバックを。

AD
いいね!した人  |  コメント(7)  |  リブログ(0)

ameblogerさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。