Tumblr like button not working after infinite scroll ajax recall

Question

There are a few similar posts but they are quite out of date and Tumblr has updated the like part of the API not too long ago as far as I'm aware.

Creating a like button is as simple as {LikeButton}

and this works great, but after the ajax recalls to get more posts from what would be the next page, the like button no longer works.

I have had a look at the documentation and it states that I need to implement one of the following, I was wondering if anyone could point me in the right direction? I've been trying to get this to work for hours.

I made up an example blog if this helps contribute to answering, the javascript can do the mass amount of the implementing of new images.

http://stackoverflowexample.tumblr.com/

If you need anymore info, i'll happily edit this and add what's required, thank you!

Answer 1

Overview

Adapted from my previous answer here: Using Tumblr Like Button with Infinite Scroll

Tumblr states we need to call one of two functions to get the Like Status. I would suggest the following:

Function: Tumblr.LikeButton.get_status_by_post_ids([n,n,n]) Description: Request Like status for individual posts. Takes an array of post IDs

Once the ajax request is successful , we should have a data object (containing new posts, etc).

We need to create an array of postIDs, which is an array containing an ID / number for each post in the data object. Easiest way to add the the post id is to use the theme variable {PostID}.

Example

HTML

<article class="post" id="{PostID}">...</article>

jQuery Post IDs Array

var $newPosts   = $(data).find('.post');
var $newPostIDs = $newPosts.map(function () {
    return $(this).attr('id');
}).get();

Tumblr.LikeButton

Tumblr.LikeButton.get_status_by_post_ids($newPostIDs);

Hints

Create the array and call Tumblr.LikeButton once the ajax request is successful and in a place where you run other functions for the new Posts. This can also be done with pure javascript as using: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map