Quick like button on Tumblr

Question

Can anybody explain me how the like button in this page works?

As you can see,once the whole page finishes loading, hovering on a post or a picture would show a couple of buttons, including a like button(the heart shape one on the bottom left corner).

Can anybody explain how it works? I've been trying to figure it out for a while now, trying the script on the source code, but to no avail.

Answer 1

I wrote a Tumblr tutorial on this: http://like-button.tumblr.com

To save a Like to the server, 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}
• postId: {PostID}

Example:

http://www.tumblr.com/like/23err8u4?id=844392923

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 myLikeLink = event.target;
    if( myLikeLink.className.indexOf( 'my-like' ) > -1 ) {
        var myLikeFrame = document.getElementById( 'my-like-frame' ),
            liked = ( myLikeLink.className == 'my-liked' ),
            command = liked ? 'unlike' : 'like',
            reblog = myLikeLink.getAttribute( 'data-reblog' ),
            postId = myLikeLink.getAttribute( 'data-id' ),
            oauth = reblog.slice( -8 ),
            likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + postId;
        myLikeFrame.src = likeUrl;
        liked ? myLikeLink.className = 'my-like'
            : myLikeLink.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).

Code:

<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>

Answer 2

This is what i found in the sourcecode, it means that the div's with the links of the like button and the reblog button are just hard coded and hidden with css. As you can see there is a css block for when you hover over the element. So it's just CSS.

EDIT: I added the HTML code of a post, as you can see there are a couple of div's with class permalink

CSS code

 /* CLAW */
   .claw .permalink {height: 60px; width: 60px; margin-bottom: -60px; position:       relative; background-repeat: no-repeat; background-position: -31px -31px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.claw .permalink:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter: alpha(opacity=85);
-moz-opacity: 0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
.claw.permalink {display: none;}
.claw .claw.permalink {display: block!important;}
  .post-shell.claw:hover .perma-link {background-position: 0px 0px;}
  .post-shell.claw:hover .perma-source {background-position: -62px 0px;}
  .post-shell.claw:hover .perma-like {background-position: 0px -62px;}
  .post-shell.claw:hover .perma-reblog {background-position: -62px -62px;}
  .claw .perma-link {margin-left: 12px;}
  .claw .perma-source {margin-right: 12px; float: right;}
  .claw .perma-reblog {margin: -60px 0 0 0; float: right;}
  .claw .perma-like {margin: -60px 0 0 0;}

HTML code of one post:

<div class="post-shell claw">
    <a href="http://cicerontheme.tumblr.com/post/7703094650" title="posted 5 months ago with 178 notes"><div class="permalink claw perma-link"></div></a>
    <a href="http://amarisha.tumblr.com/post/5376110038" title="reblogged from amarisha"><div class="permalink claw perma-source"></div></a>

    <div class="post photo" id="7703094650" rel="http://www.tumblr.com/reblog/7703094650/vNQMTLwX">
        <a href="http://www.tumblr.com/photo/1280/7703094650/1/tumblr_ll09emcfFn1qaywzm"><img src="http://27.media.tumblr.com/tumblr_ll09emcfFn1qaywzmo1_400.jpg" alt="" width="400" border="0" /></a>  
        <a href="http://cicerontheme.tumblr.com/post/7703094650" class="like-link" title="like this post"><div class="permalink perma-like"></div></a>
        <a href="http://www.tumblr.com/reblog/7703094650/vNQMTLwX" title="reblog this post">
    <div class="permalink perma-reblog"></div></a>
    </div>    
</div>