javascript Tumblr 上的“快速点赞”按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8654531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Quick like button on Tumblr
提问by Adrengski
Can anybody explain me how the like button in this pageworks?
谁能解释一下这个页面中的赞按钮是如何工作的？
As you can see,once the whole page finishes loading, hovering on a post or a picture would show a couple of buttons, including a like button(the heart shape one on the bottom left corner).
如您所见，一旦整个页面加载完毕，将鼠标悬停在帖子或图片上会显示几个按钮，包括一个喜欢按钮（左下角的心形按钮）。
Can anybody explain how it works? I've been trying to figure it out for a while now, trying the script on the source code, but to no avail.
任何人都可以解释它是如何工作的吗？我一直试图弄清楚它有一段时间了，在源代码上尝试脚本，但无济于事。
回答by ThinkingStiff
I wrote a Tumblr tutorial on this: http://like-button.tumblr.com
我写了一个关于这个的 Tumblr 教程：http: //like-button.tumblr.com
To save a Like to the server, you use the following URL and set it as the srcattribute of an invisible <iframe>:
要将 Like 保存到服务器，请使用以下 URL 并将其设置为srcinvisible的属性<iframe>：
http://www.tumblr.com/<command>/<oauthId>?id=<postId>
- command:
likeorunlike - oauthId: last eight characters of
{ReblogURL} - postId:
{PostID}
- 命令：
like或unlike - oauthId：最后八个字符
{ReblogURL} - 邮编：
{PostID}
Example:
例子：
http://www.tumblr.com/like/23err8u4?id=844392923
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.
将以下代码块剪切并粘贴到您的主题之前</head>。这将在每个帖子上为您提供一个喜欢按钮，看起来像默认的 Tumblr 灰色心形。当您将鼠标悬停在它上面并单击它时，它会变成红色。如果再次单击它，它将再次变为灰色并删除“赞”。
<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).
然后将以下按钮代码剪切并粘贴到您希望喜欢按钮所在的主题中（这必须在您的{block:Posts}块内）。
Code:
代码：
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>
回答by Marthyn Olthof
This is what i found in the sourcecode, it means that the div's with the links of the like button and the reblog button are just hard coded and hidden with css. As you can see there is a css block for when you hover over the element. So it's just CSS.
这是我在源代码中发现的，这意味着带有“赞”按钮和“转发”按钮链接的 div 只是硬编码并用 css 隐藏。如您所见，当您将鼠标悬停在元素上时，有一个 css 块。所以它只是CSS。
EDIT: I added the HTML code of a post, as you can see there are a couple of div's with class permalink
编辑：我添加了一个帖子的 HTML 代码，你可以看到有几个 div 的类永久链接
CSS code
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 code of one post:
一篇文章的 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>
