自定义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是链接到网页..
谢谢!
如果的tumblr希望你能够定制自己喜欢的按钮,他们会为您提供选择这样做。我强烈建议您不要在这里尝试做什么,因为这可能会在某个时候触发某种“点击插孔”检测。如果通过某种自动化工具/算法发生这种情况,它可能会导致所有喜欢聚集的方式被简单地删除。 – CBroe
我认为这对你有帮助。 https://*.com/questions/21708662/customise-tumblrs-new-like-button-iframe-likebutton –
@CBroe谢谢你的记录回复,我没有完全得到我冒险通过改变喜欢按钮虽然?因为他们提供了这个{LikeButton} thingy和很多帐户正在改变它,所以我不知道它会是错误的? –