Hey there, I've been working on creating a custom Tumblr-like button and tried adding an iframe above it to make it clickable. However, something seems to be off as it's not functioning properly. I'm still trying to wrap my head around how it all works, so please forgive me if this sounds like a silly question! From what I understand, you're supposed to create your own custom button and place Tumblr's iframe on top of it, but...
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>If you need further clarification, feel free to check out this link for the page.
Thank you!