Tumblr quick like 按钮不起作用 [英] Tumblr quick like button not working

问题描述

编辑，2013 年 4 月:不再需要旧代码.使用 Tumblr 的新短代码来代替喜欢"和转发"按钮！

EDIT, April 2013: Old code no longer nedeed. Use Tumblr's new shortcodes for 'like' and 'reblog' buttons instead!

http://developers.tumblr.com/post/49193689915/attn-fantastic-theme-developers-tumblr-users-can

旧代码:

我正在使用 @ThinkingStiff 的代码(https://stackoverflow.com/a/9048446/351320).

I'm using @ThinkingStiff's code (https://stackoverflow.com/a/9048446/351320).

这是一个活生生的例子:http://themelab01.tumblr.com/

Here's the live example: http://themelab01.tumblr.com/

我的 html 代码:

My html code:

    {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 位于页面底部.然而，这是行不通的.当我点击喜欢"时，我的仪表板中喜欢的帖子数量会增加(上面写着喜欢的帖子")，但帖子不会出现在喜欢"页面中，文字应该保持红色但没有.这是什么我失踪了?

and the empty iframe is at the bottom of the page. However this isn't working. When I click on 'like' the number of liked post in my dashboard increases (where it says "Liked n. posts) but the post does not appear in the Likes page and the text should stay red but it doesn't. What am I missing?

推荐答案

我最近更新了我的代码，使其成为一种剪切和粘贴的努力.这消除了对 jQuery 和帖子 ID 的需要，这两个领域人们总是遇到麻烦.

I've updated my code recently to make it a cut and paste endeavor. This eliminates the need for jQuery and the post ID, two areas people always have trouble with.

教程在这里:http://like-button.tumblr.com

在</head>之前将以下代码块剪切并粘贴到您的主题中.这将在每个帖子上为您提供一个喜欢按钮，看起来像默认的 Tumblr 灰色心形.当您将鼠标悬停在它上面并单击它时，它会变成红色.如果您再次点击它，它会再次变灰并删除赞.

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.

<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} 块中).

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).

代码:

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

这篇关于Tumblr quick like 按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！