Tumblr 上的快速点赞按钮答案

【问题标题】：Quick like button on TumblrTumblr 上的快速点赞按钮
【发布时间】：2011-12-28 10:16:48
【问题描述】：

谁能解释一下page 中的“赞”按钮是如何工作的？

如您所见，整个页面加载完成后，将鼠标悬停在帖子或图片上会显示几个按钮，包括一个赞按钮（左下角的心形按钮）。

谁能解释它是如何工作的？我一直在尝试弄清楚它，在源代码上尝试脚本，但无济于事。

【问题讨论】：

你为什么不看看那个页面的源代码？

标签： javascript html css tumblr

【解决方案1】：

我为此写了一篇 Tumblr 教程：http://like-button.tumblr.com

要将 Like 保存到服务器，请使用以下 URL 并将其设置为不可见 <iframe> 的 src 属性：

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

命令：like 或 unlike
oauthId：{ReblogURL} 的最后八个字符
postId：{PostID}

例子：

http://www.tumblr.com/like/23err8u4?id=844392923

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

【讨论】：

此代码对我不起作用。我做错了什么，但我不知道是什么。 :(stackoverflow.com/q/10313328/351320
不应在页内样式声明中使用data:image/png;base64…，因为在这种情况下浏览器无法缓存任何图像。
@feela 我的目标是对所有代码进行一次剪切和粘贴。一个称职的程序员可以根据需要将所有内容移动到更合适的位置。

【解决方案2】：

这是我在源代码中找到的，这意味着带有like按钮和reblog按钮链接的div只是硬编码并用css隐藏。如您所见，当您将鼠标悬停在元素上时，会有一个 CSS 块。所以它只是CSS。

编辑：我添加了一篇文章的 HTML 代码，你可以看到有几个带有类永久链接的 div

CSS 代码

 /* CLAW */
   .claw .permalink {height: 60px; width: 60px; margin-bottom: -60px; position:       relative; background-repeat: no-repeat; background-position: -31px -31px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.claw .permalink:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter: alpha(opacity=85);
-moz-opacity: 0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
.claw.permalink {display: none;}
.claw .claw.permalink {display: block!important;}
  .post-shell.claw:hover .perma-link {background-position: 0px 0px;}
  .post-shell.claw:hover .perma-source {background-position: -62px 0px;}
  .post-shell.claw:hover .perma-like {background-position: 0px -62px;}
  .post-shell.claw:hover .perma-reblog {background-position: -62px -62px;}
  .claw .perma-link {margin-left: 12px;}
  .claw .perma-source {margin-right: 12px; float: right;}
  .claw .perma-reblog {margin: -60px 0 0 0; float: right;}
  .claw .perma-like {margin: -60px 0 0 0;}

一篇文章的HTML代码：

<div class="post-shell claw">
    <a href="http://cicerontheme.tumblr.com/post/7703094650" title="posted 5 months ago with 178 notes"><div class="permalink claw perma-link"></div></a>
    <a href="http://amarisha.tumblr.com/post/5376110038" title="reblogged from amarisha"><div class="permalink claw perma-source"></div></a>

    <div class="post photo" id="7703094650" rel="http://www.tumblr.com/reblog/7703094650/vNQMTLwX">
        <a href="http://www.tumblr.com/photo/1280/7703094650/1/tumblr_ll09emcfFn1qaywzm"><img src="http://27.media.tumblr.com/tumblr_ll09emcfFn1qaywzmo1_400.jpg" alt="" width="400" border="0" /></a>  
        <a href="http://cicerontheme.tumblr.com/post/7703094650" class="like-link" title="like this post"><div class="permalink perma-like"></div></a>
        <a href="http://www.tumblr.com/reblog/7703094650/vNQMTLwX" title="reblog this post">
    <div class="permalink perma-reblog"></div></a>
    </div>    
</div>

【讨论】：