tumblr jQuery Like（從rel中抓取）

我編寫了一個html5（樣板文件）主題，其中磚砌和無限滾動，迄今爲止工作得很好。現在我想在每篇文章中加入reblog和類似的按鈕。我試圖添加這個，但由於某種原因，像按鈕不起作用。tumblr jQuery Like（從rel中抓取）

網址主題：http://inspiration.patrikarvidsson.com/

在我的script.js的底部，我添加了這個類似代碼。

$('a.like').click(function() { 
    var post = $(this).closest('.post'); 
    var id = post.attr('id'); 
    var oath = post.attr('rel').slice(-8); 
    var like = 'http://www.tumblr.com/like/'+oath+'?id='+id; 
    $('#likeit').attr('src', like); 
    $(this).toggleClass('liked'); 
});

完全scripts.js中可以在這裏找到： http://static.tumblr.com/e8lbmds/WB5m2q1it/scripts.js

而且如果需要的話，這裏的plugins.js：http://static.tumblr.com/e8lbmds/NDPm14qu6/plugins.js

代碼的最後一行上面，使鏈接紅色;我想這表明劇本有反應。但沒有像生成。初始化body標籤後，我有以下代碼：

<iframe id="likeit"></iframe>

Appertained CSS如下：

#likeit { display: none; } 
.liked, .like:hover { color: red !important; }

任何想法，爲什麼它不工作？

來源

2012-04-19 arvdsn

看起來你已經得到了它的工作，但對於未來的讀者我已經簡化我喜歡按鈕的代碼，以消除混亂大多數人都用它（文章ID），使之成爲簡單的剪切和粘貼。它可在http://like-button.tumblr.com。

您{block:Posts}{/block:Posts}塊中粘貼此之後立即{block:Posts}：

<script> 
if (!document.getElementById('my-like-frame')) { 

var styles = 
     '<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>'; 
document.head.insertAdjacentHTML('beforeEnd', styles); 
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>

並粘貼您希望您的Like按鈕的{block:Posts}{/block:Posts}塊內：

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

來源

2012-04-25 04:12:22 ThinkingStiff

想通了，這是一個非常簡單的修復，一旦我分析jQuery生成的代碼。

<article{block:Date} id="post-{PostID}"{/block:Date} class="post type-post {PostType} hentry entry" rel="{ReblogURL}">

這產生在iframe src中的下面的鏈接

http://www.tumblr.com/like/O0TzjAHv?id=post-21555443705

所以，很顯然除去後在上面的代碼中取得的最終結果鏈接正確;並喜歡現在的作品。

來源

2012-04-22 09:35:41 arvdsn

tumblr jQuery Like（從rel中抓取）

回答

相關問題