自定義tumblr像按鈕

我已經創建了一個像按鈕一樣的自定義tumblr，並已放在它上面的iframe，使其可點擊，但我一定做了錯誤的事情，因爲它不工作..我還沒有完全理解它是如何很抱歉，如果這是一個愚蠢的問題！我知道你必須創建自定義按鈕，只是把tumblr的iframe以上，但...自定義tumblr像按鈕

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('like') > -1) { 
 
     var frame = document.getElementById('my-like-frame'), 
 
     liked = (myLike.className == '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 = 'like' : myLike.className = 'liked'; 
 
    }; 
 
    }, false); 
 
};

.controls i { 
 
    height: 10px; 
 
    width: 10px; 
 
    background: #ce9c87; 
 
    border-radius: 100%; 
 
    padding: 5px; 
 
    display: block; 
 
    overflow: visible; 
 
    text-align: center; 
 
    color: #fff; 
 
    -webkit-transition: .2s ease; 
 
    -moz-transition: .2s ease; 
 
    -o-transition: .2s ease; 
 
    transition: .2s ease; 
 
} 
 

 
.controls { 
 
    float: right; 
 
    margin-right: 10px; 
 
} 
 

 
.controls a { 
 
    position: relative; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    padding: 1px 2px; 
 
    width: auto; 
 
    height: auto; 
 
    margin-left: 1em; 
 
    float: right; 
 
} 
 

 
.like { 
 
    position: relative; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    padding: 1px 2px; 
 
    width: auto; 
 
    height: auto; 
 
    margin-left: 1em; 
 
    float: right; 
 
    cursor: pointer; 
 
} 
 

 
.controls .like .liked+i, 
 
.controls i:hover { 
 
    color: #ce9c87; 
 
    background-color: #fff; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<div class="controls"> 
 
    <a href="{Permalink}" class="permalink"> 
 
    <i class="fa fa-bookmark-o" aria-hidden="true"></i> 
 
    </a> 
 
    <a href="{ReblogURL}" target="_blank" class="reblog"> 
 
    <i class="fa fa-retweet" aria-hidden="true"></i> 
 
    </a> 
 
    <div class="like" data-reblog="{ReblogURL}" data-id="{PostID}">{LikeButton} 
 
    <i class="fa fa-heart-o" aria-hidden="true"></i> 
 
    </div> 
 
</div>

如果它是不明確here是鏈接到網頁..

謝謝！

來源

2017-06-06 Maëlle Jumel

如果的tumblr希望你能夠定製自己喜歡的按鈕，他們會爲您提供選擇這樣做。我強烈建議您不要在這裏嘗試做什麼，因爲這可能會在某個時候觸發某種「點擊插孔」檢測。如果通過某種自動化工具/算法發生這種情況，它可能會導致所有喜歡聚集的方式被簡單地刪除。 – CBroe

我認爲這對你有幫助。 https://stackoverflow.com/questions/21708662/customise-tumblrs-new-like-button-iframe-likebutton –

@CBroe謝謝你的記錄回覆，我沒有完全得到我冒險通過改變喜歡按鈕雖然？因爲他們提供了這個{LikeButton} thingy和很多帳戶正在改變它，所以我不知道它會是錯誤的？ –

您可能遇到的問題是因爲tumblr不再允許您在任何自己的博客上發佈帖子。你可以通過打開控制檯並點擊你喜歡的按鈕來解決這個問題，如果這個錯誤發生，這意味着你喜歡的按鈕的作品，但tumblr阻止你喜歡你自己的帖子。

來源

2017-06-07 06:27:05 chloe784

哦，謝謝你，我沒有注意到這一點！不解決問題，但你是對的哈哈 –

自定義tumblr像按鈕

回答

相關問題