Using the Tumblr Like Button with Infinite Scroll

Question

I try to use the new Tumblr buttons in the Infinite Scroll (letting your theme like on individual Tumblr posts from the main page), they work for the first 15 posts of the first "page", but then as soon as it loads another page, a similar button stops working. These are the instructions given in Tumblr on the Docs page:

Function: Tumblr.LikeButton.get_status_by_page (n)
Description: Call this function after requesting a new message page. Takes a page number that was just loaded as an integer.

Function: Tumblr.LikeButton.get_status_by_post_ids ([n, n, n])
Description: Request As status for individual messages. Accepts an array of message identifiers.

As I'm not sure how to properly apply jQuery I'm not sure where to add these functions, here is my JS for my current topic:

// MASONRY var $container = $('#content'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector: '.entry', columnWidth: 220 }); }); // INFINITE SCROLL $container.infinitescroll({ navSelector : '#pagination', nextSelector : '#pagination li a.pagination_nextlink', itemSelector : '.entry', loading: { img: 'http://static.tumblr.com/glziqhp/K37m9yaub/257__1_.gif' } }, function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); }); }); 

Answer 1

First you need to add a unique message identifier for each of your messages:

 <div class="entry masonry-brick" id="{PostID}">...</div> 

The documentation mentions a request for this status after adding / loading new messages (or a new page):

 function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 }); // Create Array of $newElems IDs var $newElemsIDs = $newElems.map(function () { return this.id; }).get(); $newElems.imagesLoaded(function(){ $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); // Let just see what we have, remove console.log() if working console.log($newElems, $newElemsIDs); Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs); }); }); 

Hope you head in the right direction.