[解決済み] Tumblrのクイックいいね！ボタンが機能しない

質問

2013年4月、EDIT。 旧コードは不要になりました。代わりにTumblrの新しいショートコードを使って'like'と'reblog'ボタンを押してください。

http://developers.tumblr.com/post/49193689915/attn-fantastic-theme-developers-tumblr-users-can

古いコードです。

私は @ThinkingStiff さんのコードを使っています ( https://stackoverflow.com/a/9048446/351320 ).

以下はライブの例です。 http://themelab01.tumblr.com/

私のhtmlコードです。

    {block:Posts}
        {block:Text}
            <li id="{PostID}" class="post text">
                {block:Title}
                    <h3><a href="{Permalink}">{Title}</a></h3>
                {/block:Title}

                {Body}
            </li>
            <a href="{ReblogURL}" class="reblog">reblog</a>
            <a href="#" class="like">like</a>
        {/block:Text}

css

#like-it {
    display: none;
}
.liked, .like:hover {

    color: red !important;
}

js

$(document).on('click', '.like', function (event) {

    event.preventDefault();

    var command = $(this).hasClass('liked') ? 'unlike' : 'like',
        post = $(this).closest('.post'),
        oauth = post.find('.reblog').attr('href').slice(-8),
        id = post.attr('id'),
        likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;

    $('#like-it').attr('src', likeUrl);
    $(this).toggleClass('liked');

});

で、空のiframeはページの一番下にあります。しかし、これはうまくいきません。いいね！」をクリックすると、ダッシュボードで「いいね！」された投稿の数が増えますが（"Liked n. postsと書かれているところ）、その投稿は「いいね！」ページに現れず、テキストは赤いままのはずですがそうではありません。何を見落としているのでしょうか？

解決方法を教えてください。

最近、コードを更新して、カット＆ペーストでできるようにしました。これにより、jQueryとpost IDの2つの領域が不要になり、人々がいつも困っていることがなくなりました。

チュートリアルはこちらです。 http://like-button.tumblr.com

以下のコードブロックを、テーマの直前にカット＆ペーストしてください。 </head> . これにより、各投稿にTumblrのデフォルトのグレーのハートのようないいね！ボタンが表示されるようになります。ボタンにカーソルを合わせると赤くなり、クリックすると赤くなります。もう一度クリックすると、また灰色になり、いいね！が削除されます。

<style>
.my-like {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABH0lEQVQ4y62T30vCUBiGv/9YuhBLkCA08FdogRFFYFEUhhZNCCQoSESiIOii68pl5qV6s8Eb7+SMHXNs6S7ejZ3zvA+ccT4BICofvS88dJ7w8vqG8WQC754K17lPjrx3z3l8D4YoVaqIrWbcJNbzaHefNZjfXPdy5b0jsO/IRqMxUpmSBnhz2bx1QL79GPbpEePmzhdSyW8fBDL0SK68HwiGCT2S3NiKREaPzP7QRRNPZSHpwm4kMnqkYbQikdEjZv8HK2ubS4nY75mD6WU8qzeXkrHvToBlWSjuHC4kYo99V8bwBnM0/iMiz542myq2bSPskcmR/zPos7lvP8Lv/nGd+/N6c2Xq2KcXhiY6qV1rxwotU3n/NHF8fgW+g9hfsHJlJUYljcgAAAAASUVORK5CYII=) !important;
    height:17px;
    width:19px;
    cursor:pointer;
    display:inline-block;
    vertical-align:top;
}
.my-liked, .my-like:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABSklEQVQ4y2P4//8/Awy/O3fu/905c/4/2779/69Pn/4jy8Hwz/fv/z/buvX/vfnz/7+/eBFFDZj4cOXK/8O+Pv+36+rA8W4zs/8Ply1DUXx/4cL/u0yMUdQdCQ76/+nWLbA6hq+PH//fbW6OogAZ3+zvByu81t6OU80ea6v/P16//s9wqboKpyIYPhYeTlDN1abG/wz7HR0JKiQGH3Bz+8+ww0CfKobtMjb6z0ANg+CGgQKPKt50dfnPcL6wkCqGXaoo/8/w5tgxyg3T0wUnYHBiPJuZSZFhF8pK/8NzACjrgKKWHINAOef3168Iw0D429OnGFmKEAZlJVDKR8mbMAyy4XRqClEGnc3J+f/nxw/MjI6OQflxh6EBzvR0Z9o0rCUKVsNA+MuD+/9PJiSgGHQmPf0/KDhw6cFpGAy/OnAAbOibEyf+E1ILAFBjDrchm7KrAAAAAElFTkSuQmCC) !important;
    height:17px;
    width:19px;
    cursor:pointer;
    display:inline-block;
    vertical-align:top;
}
</style>
<script>
window.onload = function () {
document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
document.addEventListener( 'click', function ( event ) {
    var myLikeLink = event.target;
    if( myLikeLink.className.indexOf( 'my-like' ) > -1 ) {
        var myLikeFrame = document.getElementById( 'my-like-frame' ),
            liked = ( myLikeLink.className == 'my-liked' ),
            command = liked ? 'unlike' : 'like',
            reblog = myLikeLink.getAttribute( 'data-reblog' ),
            postId = myLikeLink.getAttribute( 'data-id' ),
            oauth = reblog.slice( -8 ),
            likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + postId;
        myLikeFrame.src = likeUrl;
        liked ? myLikeLink.className = 'my-like'
            : myLikeLink.className = 'my-liked';
    };
}, false );
};
</script>

次に、以下のボタンコードを、テーマの「いいね！」ボタンを設置したい場所にカット＆ペーストしてください。 {block:Posts} ブロック)を作成します。

コードです。

<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>