How to add a Tumblr Like (Heart) button to a theme
**#####** **UPDATE (2013-11-10): Tumblr changed their code and this no longer works. I have no fix at this time.** **#####** 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 Heart This 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 ``.
<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>
**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-id="{PostID}" title="Like"></div>
##Like Button - Text 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 ``.
<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 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>
**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 `` with your own text.
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like">like</div>
##Reblog Link 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). reblog You can see and test an example of this above, in the header of this post. ##Technical Details The Like link uses the following URL as the `src` attribute of an invisible `
`: http://www.tumblr.com//?id= - ``: `like` or `unlike` - ``: last eight characters of `{ReblogURL}` - ``: `{PostID}` Example: http://www.tumblr.com/like/fGKvAJgQ?id=16664837215 ##Need Help? 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.