Normally, to Reblog or Like a post on Tumblr, you have to go to a separate page and use Tumblr’s icons in the upper right corner. With the following code you can add the ability to Like and Reblog on the main page of your blog.
Like Button - Default Tumblr HeartThis will create a heart button (the Tumblr default). It’s grey until you hover over or select it, then it turns red. You can see and test an example of this above, in the header of this post.
Step 1. Cut-and-paste the following code into your theme immediately before </head>.
<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 ></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>
Step 2. Cut-and-paste the following code inside your {block:Posts}{/block:Posts} block where you want your like button to be.
<div class="my-like" data-reblog="{ReblogURL}" data- title="Like"></div>
If you’d rather use text instead of the heart image, use this code. It’s grey until you hover over or select it, then it turns red. You can see and test an example of this above, in the header of this post.
Step 1. Cut-and-paste the following code into your theme immediately before </head>.
<style>
.my-like {
cursor:pointer;
display:inline-block;
vertical-align:top;
}
.my-liked, .my-like:hover {
color: red;
cursor:pointer;
display:inline-block;
vertical-align:top;
}
</style>
<script>
window.onload = function () {
document.body.insertAdjacentHTML( 'beforeEnd', '<iframe ></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>
Step 2. Cut-and-paste the following code inside your {block:Posts}{/block:Posts} block where you want your like button to be. You can replace the word “like” right before </div> with your own text.
<div class="my-like" data-reblog="{ReblogURL}" data- title="Like">like</div>
Cut-and-paste the following code into your theme where you want your reblog link to be (this must be inside your {block:Posts}{/block:Posts} block).
<a href="{ReblogURL}">reblog</a>
You can see and test an example of this above, in the header of this post.
Technical DetailsThe Like link uses the following URL as the src attribute of an invisible <iframe>:
http://www.tumblr.com/<command>/<oauthId>?id=<postId>
<command>:likeorunlike<oauthId>: last eight characters of{ReblogURL}<postId>:{PostID}
Example:
http://www.tumblr.com/like/fGKvAJgQ?id=16664837215
If you cut-and-paste the above code into your theme exactly as it’s written and it doesn’t work for you, contact me and I’ll be happy to take a look at it.
