个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
查看此处和有关该主题的 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>
最佳答案
我已经更新了我的 Tumblr 教程，使其可以剪切和粘贴:http://like-button.tumblr.com
您缺少 oAuth key 。每个帖子都有一个唯一的 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} block 内)。
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>
关于javascript - tumblr 主页上的心形(喜欢)按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8858323/
25
4
0
我想给一颗用 CSS 制作的心命名。而且我似乎不知道该怎么做。 我已经有了这个代码: #heart { position:relative; width:100px; height:100
我正在使用 php 将 ♥ 类型的字符输入到我的数据库中。 我在页面上设置了UTF-8 和 插入的结果是一个?字符 我敢肯定有人这样做过，但我真的很难把它做好。 编辑: MySQL表的排序规则和字
我编写了一个小应用程序，其中显示了几张 Android 卡，每个卡都有彩色标题。 我希望能够在每张卡片的右上角添加图标，就像下图中的那样。到目前为止，尽管我发现如下所示的屏幕截图表明这是可能的。我在网
我是一名优秀的程序员,十分优秀！