tumblr 主页上的爱心（点赞）按钮答案

【问题标题】：heart (like) button on tumblr homepagetumblr 主页上的爱心（点赞）按钮
【发布时间】：2012-01-13 22:48:53
【问题描述】：

查看此处和 google 群组上有关该主题的各种帖子，我正在尝试使用来自 ciceron theme 的脚本来重现心脏（喜欢）按钮，但到目前为止我还没有成功。

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

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

【问题讨论】：

标签： javascript html tumblr

【解决方案1】：

我已经更新了我的 Tumblr 教程，让它可以剪切和粘贴：http://like-button.tumblr.com

您缺少 oAuth 密钥。每个帖子都有一个唯一的 ID，必须发送该 ID 才能点赞。您可以在 {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>

【讨论】：

感谢您有见地的回答，所以我需要这样的方法来使用她的方法（块照片的精简版）：`{block:Posts} {block:Photo}
赞
{/block:Photo} {/block:Posts} 但我不确定like 按钮的链接应该指向哪里？ iframe #likeit？一旦这个方法起作用，我将尝试使用您的方法，该方法具有很酷的工具功能。您的方法中的“ul”和“href”是什么？你的主题很震撼。
谢谢，它正在工作！还有你在喜欢/不喜欢的作品之间切换的技巧！来自法国的欢呼声！
@HectorLorenzo 这在几周前就停止工作了，因为 Tumblr 在他们的主题语言中添加了点赞按钮：tumblr.com/docs/en/custom_themes#like_and_reblog_buttons我需要更新这篇文章。
@ThinkingStiff 让它与新架构一起工作的任何进展？
澄清一下，此方法将不再适用于新的 Like / Reblog 按钮。