2009年12月17日

新・web拍手された記事をわかるようにしてみた

 12月11日にweb拍手がバージョンアップしてから、クリックされた記事タイトルが送られてこなくなっていたので拍手ボタンを設置し直しました。 旧バージョンの設置タグから変ったのは次の3点。
  • formにenctype="multipart/form-data"が付いた。
  • actionのURLが変った。
  • 一言メッセージが"mesbody"から"message_body"に変った。
他にも新バージョンのweb拍手は2回目以降の拍手を分けてカウントするための隠しフィールドが追加されています。

<!-- 新Web拍手 -->
<form enctype="multipart/form-data" action="http://clap.webclap.com/clap.php?id==xxxxxxx" method="post">
<input value="送信" name="name" type="submit"/>
<input id="message_body" name="message_body" type="hidden"/></form>

<!-- 新Web拍手にページタイトルを挿入 -->
<script type="text/javascript"><!--
mesbody = document.getElementById("message_body");
mesbody.value = document.title;
// --></script>



 ちなみにブログのテンプレートを変えた際に拍手ボタンを普通のテキストリンク(ページ下部)に変えたのですけど、ここからもPOSTリクエストで記事タイトルを送信できるようにしてみました。

<!-- テキストリンクからPOST -->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type="text/javascript"><!--
$(document).ready(function() {
webclap = $('.LinkList a[href^="http://clap.webclap.com/clap.php?id="]');

newclap = $("<span>" + webclap.text() + "</span>");
newclap.css('color', webclap.css('color'));
newclap.css('font-weight', webclap.css('font-weight'));
newclap.css('cursor', 'pointer');
newclap.css('alt', webclap.text());

newclap.hover(function(){
newclap.css('text-decoration', 'underline');
}, function(){
newclap.css('text-decoration', 'none');
});

newclap.append('<form id="webclap" action="' + webclap.attr('href')
+ '" style="display:none;" target="_blank" method="post" enctype="multipart/form-data">'
+ '<input type="text" name="message_body" id="message_body" /></form>');

newclap.click(function(){
$('#webclap input[name="message_body"]').val(document.title);
$('#webclap').submit();
});

webclap.replaceWith(newclap);
});
// --></script>


ここではJQueryを使っていますが、基本方針は以下の通り。
  • Web拍手にリンクしているAタグを探す。
  • AタグをSPANタグに置き換え、見えないFORMを挿入する。
  • SPANタグのonclickイベントでFORMデータを送信する。
JavaScriptが動作しない環境ではただのテキストリンクのままとなります。

【関連記事】

0 件のコメント:

コメントを投稿