按钮

Question

我已经创建了一个自定义tumblr like按钮，并将iframe放在它上面以使其可点击但我必须做错了，因为它不起作用..我还不太明白它是如何工作的对不起如果这个是一个愚蠢的问题！我知道你必须创建自定义按钮，然后将tumblr的iframe放在上面，但是......

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是该页面的链接..

谢谢！

Answer 1

您遇到的问题可能是因为tumblr不再允许您在自己的任何博客上发帖。您可以通过打开控制台并单击“喜欢”按钮来解决此问题，如果发生此错误，则表示您的“喜欢”按钮有效但tumblr阻止您喜欢自己的帖子。