主页上的 Tumblr“like-heart-button”脚本 [关闭]答案

【问题标题】：Tumblr "like-heart-button" script on homepage [closed]主页上的 Tumblr“like-heart-button”脚本 [关闭]
【发布时间】：2011-10-21 15:50:03
【问题描述】：

如何在不进入永久链接页面的情况下为每个帖子制作一个“喜欢”按钮？我的意思是，即使在主页中，我可以使用哪个脚本在this 页面上拥有类似心脏的东西？（鼠标悬停照片，有心点赞）

【问题讨论】：

很抱歉，您能详细说明一下代码吗？我不知道我需要替换哪些词以及用什么替换。另外，我对在哪里放置代码感到困惑？

标签： tumblr social-media-like

【解决方案1】：

我在http://like-button.tumblr.com 上创建了一个教程。它消除了人们在实现这一点时遇到的问题，并使其成为简单的剪切和粘贴。

要添加 Like 功能，请使用以下 URL 并将其设置为不可见 <iframe> 的 src 属性：

http://www.tumblr.com/<command>/<oauthId>?id=<postId>

<command>: like 或 unlike
<oauthId>：{ReblogURL} 的最后八个字符
<postId>: {PostID}

例子：

http://www.tumblr.com/like/fGKvAJgQ?id=16664837215

在</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 myLike = event.target;
    if( myLike.className.indexOf( 'my-like' ) > -1 ) {
        var frame = document.getElementById( 'my-like-frame' ),
            liked = ( myLike.className == 'my-liked' ),
            command = liked ? 'unlike' : 'like',
            reblog = myLike.getAttribute( 'data-reblog' ),
            id = myLike.getAttribute( 'data-id' ),
            oauth = reblog.slice( -8 );
        frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
        liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
    };
}, false );
};
</script>

然后将以下按钮代码剪切并粘贴到您希望喜欢按钮所在的主题中（这必须在您的 {block:Posts} 块内）。

代码：

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

【讨论】：

【解决方案2】：

从页面上，他们正在使用 javascript：

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

所以post 只是帖子的 HTML 元素，然后他们只需获取该帖子的 id 以及喜欢或转发帖子所需的 8 个字符代码。他们接受所有这些，将其放入 URL 并将其设置为页面上 iFrame 的源 (#likeit)

【讨论】：

感谢您的开始，RSully。我发现this answer 中的附加信息非常有用。
不再适用于新的点赞转发按钮