How to request Tumblr like button status after a new page is loaded with infinite scroll

Question

This is the instruction from Tumblr documentation:

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

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

This question has been asked few times with solutions here and here both answers can tell you how to request like button status with post IDs. So is there a easier and probably faster solution?

I'll share how i do it, please share your opinions too.

Answer 1

What's happening in the accepted answer here is:

1. First you have to give IDs to all the posts.
2. After new posts are loaded, find all the elements(posts) with class (.post).
3. Get IDs of the new posts.
4. Request like button status with array of new post IDs

Now this is how you can request like button status after new page is loaded with page numbers.

1. First get number of posts in the page.
2. Get number of the posts again after new posts are loaded.
3. Divide current numbers of posts by initial number of posts to get the page number.

4. Request like button status with page number.

       var $initialNumberOfPosts = $('.post').length; // Get number of posts
   
       $('#posts').infinitescroll({
         loading: {
           msgText: "Loading..",
           img: "/loading_image.gif",
           finishedMsg: "End!"
         },
           navSelector  : "#pagination",
           nextSelector : "#nextpage",
           itemSelector: ".post"
       },
       function(newElements) {
   
           var $currentNumberOfPosts = $('.post').length; // Get current number of posts
   
           var pageNumber = Math.ceil($currentNumberOfPosts / $initialNumberOfPosts); // Get page number
   
           Tumblr.LikeButton.get_status_by_page(pageNumber); // Request like button status
       });
   

*Using (.ceil) because user might have selected 15 posts per page but there can be less than that in the last page.

Update: March 5, 2014.

Their is more simple way to get the page number using Tumblr variable and increase it when the new page loads. Try the following:

1. First get the page number using Tumblr variable: {CurrentPage}.
2. After a new page is loaded increase the current page number.

3. Request like button status with current page number.

       var pageNumber = {CurrentPage}; // Get current Page number ( Will not work in external file)
   
       $('#posts').infinitescroll({
         loading: {
           msgText: "Loading..",
           img: "/loading_image.gif",
           finishedMsg: "End!"
         },
           navSelector  : "#pagination",
           nextSelector : "#nextpage",
           itemSelector: ".post"
       },
       function(newElements) {
   
           pageNumber++; // Get page number after new page is loaded.
   
           Tumblr.LikeButton.get_status_by_page(pageNumber); // Request like button status
       });
   

// End update.

*This is an example script for how you can request like button status with Paul Irish's infinite scroll.

So in both way, it's roughly 3 - 4 steps. My solution seems easier to set up for me so i use it. You can use what seems better to you.

I think my solution is faster 'cause it uses simple functions, but that's just what i think; i don't have any evidence for now. Thank you!