Insta-Like Buttons: Like posts instantly!

Posted by adrengski on Tuesday, June 12th, 2012
Tagged as: advance tutorials insta-like buttons like buttons heart button

Wouldn’t it be convenient for your readers if they didn’t have to go to your post’s permalink pages to like a post when they’re in you blog? Reblog buttons are as easy to make as eating strawberry jams but a Like button that likes/hearts a post on the index page used to be a quite hard to do. But it’s possible so here’s how you can do that.

Note that to do this, you’ve must, at the very least, have basic understanding about css or maybe the ability to identify a div’s id or class. Since every theme is structured differently, I may not be able to set a uniform way to make this work easy everyone. So please bear with me.

Well first, search for the codes </head> and then paste these just above it:

Code#1

<script type="text/javascript">
$(function() {    
    $('a.like-link').click(function() {
        var post = $(this).closest('.post');
        var id = post.attr('id');
        var oath = post.attr('rel').slice(-8);
        var like = 'http://www.tumblr.com/like/'+oath+'?id='+id;
        $('#likee').attr('src', like);
        $(this, "a.like-link").text('Unlike');
        return false;
    });
});
</script>

As a quick explanation, this is the script that’s going to “like/heart” your post. You can ignore this though if you don’t like to read it. Just remember that the underlined part is your post’s containing div’s class so be sure to change it if you’re using a different one.

Explanation:

The first line searches for any links with the class of “like-link” then for the closest div to it with the class “post”. That underlined, bold part is the div containing your post, so if you’re using a different class, be sure to replace it. Well, the next parts gets the rel attribute of the div.post and slices 8 of the last characters and attaches that to the next line. The next line to that calls up an iframe so the page would load up there and execute the script. The last parts are the indicator that the post has been liked.

After that, look for </style> then paste these codes above it:

Code#2

#likee{ 
 height: 0;
 width: 0;  
 visibility: hidden; 
}

This would ensure that the iframe that you’re going to put in the body of your HTML isn’t going to show up.

Next, put this codes right below <body>:

Code#3

<iframe id="likee"></iframe>

That would be the iframe that I was talking about in Code#2. The “liking” of the post technically happens there but you won’t see it. The next part could be a little tricky so be careful.

Look for your post’s containing div and add these attributes to them:

Code#5

 id="{PostID}" rel="{ReblogURL}"

For example, one of your post might look like this:

{block:Text}
<div class="post">
{Body}
</div> 
{/block:Text}

The underlined part is your post’s containing div. Just add the said attributes(code#5) after the ~”post”~ part so it should look like this afterwards:

{block:Text}
<div class="post" id="{PostID}" rel="{ReblogURL}">
{Body}
</div> 
{/block:Text}

See where I inserted the codes? It broke the underline on the original line. Now as I was saying, the structure of your theme might differ from others so make sure to check the div’s class. Also, make sure to insert that to all of your post type’s div. You need to insert that to the text posts, Photopost, photosets, quotepost, etc. You can always send an ask if you don’t know which it is.

After that, add these codes before the closing </div>(it’s the one below the {Body} in the example above, though it may differ from theme to theme) tag of your post’s div above it:

Code#6

<span style="text-align: right; width: 100%; display: block;"><a href="{Permalink}" class="like-link" title="Like this post">Like</a></span>

This would render a link which says “Like” that would change to “Unlike” when clicked. Unfortunately though, reversing this process isn’t possible with these set of codes. The “unlike” text would just be there to indicate the visitor that he/she has liked that post. Moreover, the state of this “Unlike” text wouldn’t be retained after a refresh or a page reload. Meaning, after a visitor refreshes, the post that he/she like would again have the words “Like” instead of “Unlike”. Retaining its state would require either server side scripting or using cache so while the former is out of question, the latter would be pretty much useless once the visitor clears his/her cache. So it’s better to just leave it that way than to add some more scripts that would be useless anyway.

That’s it! Save your changes and check your blog if it works.

————————————————————
Additional note:

Now again, if you understand CSS or jQuery, you can change the effects of this “like/heart” button. For example, instead of putting in “Like”, you can put a heart instead that changes its color. If you want to do this, you’ll need to change the “Like” text in Code#6 into a heart(♥).

Then on Code#1, you can use this instead:

<script type="text/javascript">
$(function() {    
    $('a.like-link').click(function() {
        var post = $(this).closest('.post');
        var id = post.attr('id');
        var oath = post.attr('rel').slice(-8);
        var like = 'http://www.tumblr.com/like/'+oath+'?id='+id;
        $('#likee').attr('src', like);
        $(this, "a.like-link").css({'color':'red','font-size': '150%'});
    return false;
    });
});
</script>

See which part I changed? That changes the heart’s color to red and make it slightly bigger.

Of course this is only another variation and there are a lot more stuff that you can do this. You’ll only have to understand CSS to explore its possibilities.

If you’ve had a hard time trying to do this, you can always send me an ask. I’ll get to you guys as soon as possible and I’ll even check your themes if it’s about this tutorial.

Good luck and hope it works!

8 notes | Comments

Insta-Like Buttons: Like posts instantly!

Comment

Notes

Questions! Questions!