在tumblr主页上的心脏（like）按钮

看着这里和谷歌上的各个主题组的帖子，我试图用ciceron theme的脚本来重现心脏（like）按钮，但我没有成功至今。在tumblr主页上的心脏（like）按钮

以下是我的代码。我错过了什么？有人设法解决它？

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

在<head>的CSS部分：

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

在<body>：

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

来源

2012-01-13 Ben

我已经更新了我的Tumblr教程这使其剪切和粘贴：http://like-button.tumblr.com

您缺少oAuth密钥。每篇文章都有一个唯一的ID，必须发送给Like。您可以在{ReblogURL}变量（未记录）末尾找到它。这是最后八个字符。在您的示例它是从帖子上的rel属性抓住它：

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

剪切和下面的代码块</head>之前立即粘贴到您的主题。这会在每个帖子上给你一个类似于默认Tumblr灰色心脏的按钮。当您将鼠标悬停在它上面并点击它时，它会变成红色。如果再次点击它，它会再次变成灰色并删除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>

然后剪切并粘贴以下按钮代码到你的主题，你希望你的喜欢按钮是（这一定是你的{block:Posts}块内）。

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

来源

2012-01-28 20:43:57 ThinkingStiff

感谢您的见解的答复，所以我需要这样的事情对她的方法（对块的照片精简版）： '{块：帖子} {块：照片}

{/块：照片} {/ block：帖子} 但我不知道类似按钮的链接应该指向哪里？ iframe #likeit？我会尝试使用您的方法，一旦这个工作正常，它就具有酷酷的toogle功能。什么是你的方法中的“ul”和“href”？你的主题摇滚。 – Ben 2012-01-30 15:49:49

@ user1148640链接进入'Posts'块，就像你做的一样。您可以将该URL设置为'＃'，因为该脚本将为您接管链接。 – ThinkingStiff 2012-01-30 18:11:13

谢谢，它工作！和你的伎俩之间切换喜欢/不同作品呢！来自法国的许多欢呼声！ – Ben 2012-01-30 19:31:06

在tumblr主页上的心脏（like）按钮

回答

相关问题