Tumblr Like Button

thinkingstiff.com
check out:
find it. share it.

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 </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 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 </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 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 </div> 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).

<a href="{ReblogURL}">reblog</a>

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 <iframe>:

http://www.tumblr.com/<command>/<oauthId>?id=<postId>
  • <command>: like or unlike
  • <oauthId>: last eight characters of {ReblogURL}
  • <postId>: {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.

  1. trykarne reblogged this from theme-hunter
  2. freeteddybearhugs reblogged this from donthemes