Tumblr like button with ajax fetched posts

Question

I've removed all post centered markup from my Tumblr theme and instead I'm using ajax to fetch the data. So far, so good. Now I want to add a like button to each post, but I can't seem to find any documents on how to do this (without resorting to their api, which needs oauth to work).

Are there no way to include like buttons when you use ajax to fetch the posts and you rather not go full fledge api with oauth?

Answer 1

Tumblr's new implementation of the "Like button" for individual posts uses an <iframe> element to function. The URL for this iframe is obtainable only through your Theme code.

For example:

{Block:Posts}

    <div class="like-button">{LikeButton}{/div>

{/Block:Posts}

What is rendered for the {LikeButton} will look something like this:

<iframe id="like_iframe_84714330251" src="http://assets.tumblr.com/assets/html/like_iframe.html?_v=fa292ab73ee80893ffdf1edfabaa185a#name=blog-name-&amp;post_id=84814329251&amp;rk=reKNyFfj" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowtransparency="true"></iframe>

There does not seem to be any way to obtain this without including {LikeButton} inside of a {Block:Posts}

For using ajax, you could include a hidden element on the page that loads this information and parse it out when loading each page of posts using ajax.

So if in your theme you included something like:

<div id="posts-info" style="display: none;">
{Block:Posts}

    <div class="post-info" data-postid="{PostID}">{LikeButton}</div>

{/Block:Posts}
</div>

When you load your posts with AJAX, you would also have to load the correct page of your Tumblr (with this code in the Theme).

You could then parse this information by matching the Post ID's to the posts you fetched with AJAX and insert that <ifame> code.

This is a really round-about solution but it should work.