Note: I’ve updated the code to make it a simple cut-and-paste to eliminate most of the problems people were having getting it working.
Normally, to Reblog or Like a post, you have to go to a separate permalink page and use Tumblr’s icons in the upper right corner of the page to do it. With the following code you can add the ability to Like and Reblog on the main page of your theme.
Reblog uses an undocumented variable, {ReblogURL}. You simply make it the href of a link:
<a href="{ReblogURL}">reblog</a>
You can see and test an example of this above, in the header of this post.
To add Like functionality, you use the following URL and set it as the src attribute of an invisible <iframe>:
http://www.tumblr.com/<command>/<oauthId>?id=<postId>
<command>: like or unlike
<oauthId>: last eight characters of {ReblogURL}
http://www.tumblr.com/like/fGKvAJgQ?id=16664837215
Cut-and-paste the following code block into your theme immediately before </head>. This will give you a Like button on each post that looks like the default Tumblr grey heart. It will turn red when you hover over it and when you click it. If you click it again, it will turn grey again and delete the Like.
<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 id="my-like-frame" style="display:none;"></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>
Then cut-and-paste the following button code into your theme where you want your like button to be (this must be inside your {block:Posts}{/block:Posts} block).
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like"></div>
You can see and test an example of this working above, in the header of this post. If you cut-and-paste the above code into your theme exactly as it’s written and it doesn’t not work for you, contact me and I’ll be happy to take a look at it.
Notes on the update: The class name .like is already used by Tumblr in the notes section of posts, so I changed to .my-like. Many people were either not linking to jQuery or linking the wrong version, so I rewrote it in Javascript to eliminate the need for it. Many people were forgetting to put in the <iframe> or were putting it in the post block (creating multiples), so I moved that into the Javascript. The single most common problem people were having was not putting the Post ID or the Reblog URL in the right place. I eliminated the need for this by moving it to the link.
