Tumblr快速喜欢按钮不起作用
Tumblr quick like button not working
EDIT,2013年4月:旧代码不再无效。改用Tumblr的新短代码来代替"喜欢"和"转发"按钮!
http://developers.tumblr.com/post/49193689915/attn-fantastic-theme-developers-tumblr-users-can
旧代码:
我正在使用@ThinkingStiff的代码(https://stackoverflow.com/a/9048446/351320)。
下面是一个实时示例:http://themelab01.tumblr.com/
我的网页代码:
{block:Posts}
{block:Text}
<li id="{PostID}" class="post text">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</li>
<a href="{ReblogURL}" class="reblog">reblog</a>
<a href="#" class="like">like</a>
{/block:Text}
.css
#like-it {
display: none;
}
.liked, .like:hover {
color: red !important;
}
.js
$(document).on('click', '.like', function (event) {
event.preventDefault();
var command = $(this).hasClass('liked') ? 'unlike' : 'like',
post = $(this).closest('.post'),
oauth = post.find('.reblog').attr('href').slice(-8),
id = post.attr('id'),
likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
$('#like-it').attr('src', likeUrl);
$(this).toggleClass('liked');
});
空的iframe位于页面底部。但是,这不起作用。当我单击"喜欢"时,仪表板中喜欢的帖子数量会增加(其中显示"喜欢n.帖子"),但帖子不会出现在"喜欢"页面中,文本应保持红色,但事实并非如此。我错过了什么?
我最近更新了我的代码,使其成为剪切和粘贴的努力。这消除了对jQuery和post ID的需求,这两个领域人们总是遇到麻烦。
教程在这里:http://like-button.tumblr.com
在紧接</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>
然后将以下按钮代码剪切并粘贴到您希望喜欢按钮所在的主题中(这必须在您的{block:Posts}
块内)。
法典:
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>
相关文章:
- JS动态添加字段-删除按钮不起作用
- 一键启动按钮不起作用
- 带有向下钻取的 Amchart 图表工作正常,但“后退”按钮不起作用
- 为什么不'这个HTML按钮不起作用
- 使用javascript后,提交按钮不起作用
- 镀铬延长件内部的聚合物纸按钮不起作用
- 我的提交按钮不起作用
- AngularJs:多次点击同一个按钮不起作用
- Ruby on Rails - 引导旋转木马按钮不起作用
- 为什么我的开关按钮不起作用
- 无法弄清楚为什么提交按钮不起作用
- 使用动画时Jquery后退按钮不起作用
- 禁用浏览器中的后退按钮不起作用
- 打印按钮不起作用
- jQuery-关闭按钮不起作用
- HTML按钮不起作用
- 清除Javascript/HTML中的画布按钮不起作用
- '有角度的靠背'返回页首按钮不起作用
- onclick() jQuery/JavaScript 显示饼图的按钮不起作用
- 网页Jquery下拉按钮不起作用