How To Request Tumblr Like Button Status After A New Page Is Loaded With Infinite Scroll

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

Solution 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 postsvar pageNumber = Math.ceil($currentNumberOfPosts / $initialNumberOfPosts); // Get page numberTumblr.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!