Search code examples
apibuttontumblrsocial-media-like

Tumblr like button not working after infinite scroll ajax recall

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.

enter image description here

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!

Solution

  • 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