回覆：主頁上的Tumblr「like-heart-button」腳本

Question

我試着用這個編碼發佈在奈良的question上，但我不確定我是如何做HTML的部分。我有點想到它必須在< /標籤，但不知道如果我需要添加一個類或ID。我一直在玩編碼一段時間，但仍然沒有弄明白。如果有人能更好地向我解釋，我會很感激。這真的意味着很多。感謝您花時間閱讀我的問題。

Answer 1

我對此有一個教程：http://like-button.tumblr.com。隨着時間的推移，它已經得到更新，以消除人們在實施該問題時遇到的問題。現在是一個簡單的剪切和粘貼。

要添加類似功能，您使用以下URL，並將其設置爲src屬性的無形的：

http://www.tumblr.com/<command>/<oauthId>?id=<postId> 

• <command>：like或unlike
• <oauthId>：中{ReblogURL}最後八個字符
• <postId>：{PostID}

例子：

http://www.tumblr.com/like/fGKvAJgQ?id=16664837215 

剪切和下面的代碼塊</head>之前立即粘貼到您的主題。這會在每個帖子上給你一個Like按鈕，看起來像默認的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 myLike = event.target; 
    if(myLike.className.indexOf('my-like') > -1) { 
     var frame = document.getElementById('my-like-frame'), 
      liked = (myLike.className == 'my-liked'), 
      command = liked ? 'unlike' : 'like', 
      reblog = myLike.getAttribute('data-reblog'), 
      id = myLike.getAttribute('data-id'), 
      oauth = reblog.slice(-8); 
     frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id; 
     liked ? myLike.className = 'my-like' : myLike.className = 'my-liked'; 
    }; 
}, false); 
}; 
</script> 

然後剪切並粘貼以下按鈕代碼到你的主題，你希望你的喜歡按鈕是（這一定是你的{block:Posts}塊內）。

代碼：

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

Answer 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() {  
    $('a.like-link').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); 
    }); 
}); 
</script> 

<a href="#" class="like-link">Run Function</a>