heart (like) button on tumblr homepage

问题

Looking at the various posts here and on google groups on the subject, I'm trying to use the script from the ciceron theme to reproduce the heart (like) button, but I haven't succeed so far.

Below is my code. Did I miss something? Did someone manage to work it out?

In the <head>:

<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>
<script type="text/javascript">

$('a.like-link').click(function() {
    var post = $(this).closest('.post');
    var id = post.attr('id');
    var oauth = post.attr('rel').slice(-8);
    var like = 'http://www.tumblr.com/like/'+oauth+'?id='+id;
    $('#likeit').attr('src', like);
    $(this).addClass('liked'); return 
false;}) 

</script>

In the CSS part of <head>:

#likeit {height: 0; width: 0; visibility: hidden;}

In the <body>:

<iframe id="likeit"></iframe>
in {Block:post}:
<a href="#" class="like-link">Like</a>

回答1:

I've updated my Tumblr tutorial on this to make it cut and paste: http://like-button.tumblr.com

You're missing the oAuth key. Each post has a unique ID that must be sent to do a Like. You can find it at the end of the {ReblogURL} variable (which is undocumented). It's the last eight characters. In your example it's grabbing it from the rel attribute on the post:

var oauth = post.attr('rel').slice(-8);

Cut and paste the following code block into your theme immediately before </head>. This will give you a like button on each post that looks like the default Tumblr grey heart. It will turn red when you hover over it and when you click it. If you click it again, it will turn grey again and delete the Like.

<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>

Then cut and paste the following button code into your theme where you want your like button to be (this must be inside your {block:Posts} block).

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

来源：https://stackoverflow.com/questions/8858323/heart-like-button-on-tumblr-homepage

标签

javascript

html

tumblr