Tumblr Like Button Not Working

Question

I am designing a tumblr theme that uses both Masonry and an infinite scroll code. The infinite scrolling code is here, if you need to view it. The like button shows up correctly on all posts, and works on the first few posts, but doesn't work on newly loaded posts.

Each post has the {PostID} id added to it. I have a really poor understanding of Javascript, so I think that's where the problem is:

$(function(){
    var $container = $('#content');
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.entry',
            isAnimated:true,
            columnWidth:1,
            animationOptions:{duration:350, queue:false},
            isFitWidth: true,
        });
    });

    $container.infinitescroll({
            navSelector  : '#page-nav',    // selector for the paged navigation 
            nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
            itemSelector : '.entry',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: '{lang:No more posts}',
                img: 'http://24.media.tumblr.com/tumblr_m3j5g3KlEm1r0fipko8_r1_100.gif'
            }
        },
        // trigger Masonry as a callback
        function( newElements ){
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $newElems.animate({ opacity: 1 });
                isAnimated:true
                $container.masonry( 'appended', $newElems, true ); 
            });
            // videos
            $newElems.find('.video').each(function(){
                resizeVideos();
                console.log($newElems, $newElemsIDs);
                Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
            },
            function(){
                $container.masonry();
            });
        }
    );
});

Any help would be greatly appreciated!

You have an extra **comma** at the end of this line: `isFitWidth: true,` it should be like this: `isFitWidth: true` — EhsanT, Nov 15 '16 at 02:34
@EhsanT thank you! I have fixed this error however the like button does still not work. — RKC, Nov 15 '16 at 18:24
Please see this answer: http://stackoverflow.com/a/16396022/1238244 — lharby, Nov 16 '16 at 11:01
Possible duplicate of [Using Tumblr Like Button with Infinite Scroll](http://stackoverflow.com/questions/16390193/using-tumblr-like-button-with-infinite-scroll) — mikedidthis, Nov 16 '16 at 11:43
No sure why this was down voted, the question is decent. However I have close voted as it is a duplicate. — mikedidthis, Nov 16 '16 at 11:44
@mikedidthis Thanks, but I had read that question over 20 times before posting. It's not a dupe and I am still stuck and unable to figure out how to resolve this issue. — RKC, Nov 16 '16 at 21:12

mikedidthis · Accepted Answer · 2016-11-17T16:38:53.583

Even though this question is a duplicate, it is an incomplete copy / pasta nightmare.

Images Loaded

$newElems.imagesLoaded(function(){
    // show elems now they're ready
    $newElems.animate({ opacity: 1 });
    isAnimated:true
    $container.masonry( 'appended', $newElems, true ); 
});

isAnimated:true will error as its a key / value used to invoke masonry

Like Button

$newElems.find('.video').each(function(){
    resizeVideos();
    console.log($newElems, $newElemsIDs);
    Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
},

$newElemsIDs is never defined or populated
Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs); will error because of the above
Tumblr.LikeButton.get_status_by_post_ids() will only ever be called if there infiniteScroll results contain a video post
}); is missing

Masonry

function(){
    $container.masonry();
});

$container.masonry( 'appended', $newElems, true ); already tells masonry there are new items, there is no need to invoke it again

Complete Pasta

$(function(){
    var $container = $('#content');
    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.entry',
            isAnimated:true,
            columnWidth:1,
            animationOptions:{duration:350, queue:false},
            isFitWidth: true,
        });
    });

    $container.infinitescroll({
            navSelector  : '#page-nav',    // selector for the paged navigation 
            nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
            itemSelector : '.entry',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: '{lang:No more posts}',
                img: 'http://24.media.tumblr.com/tumblr_m3j5g3KlEm1r0fipko8_r1_100.gif'
            }
        },

        // trigger Masonry as a callback
        function( newElements ) {

            // hide new elements
            var $newElems = $( newElements ).css({ opacity: 0 });

            // create $newElemsIDs
            var $newElemsIDs = $newElems.map(function () { 
                return this.id; 
            }).get();

            // give tumblr the $newElemsIDs
            Tumblr.LikeButton.get_status_by_post_ids( $newElemsIDs );

            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded( function() {

                // tell masonry we have added new elems
                $container.masonry( 'appended', $newElems, true ); 

                // show $newElems
                $newElems.animate({ opacity: 1 });
            });

            // resize videos for $newElems
            $newElems.find('.video').each( function() {
                resizeVideos();
            });
        }
    );
});

Thank you SO SO much! Yes, my point was that I couldn't understand which pieces of code were necessary in my code, I get a bit lost when scripts get longer than 3 lines... Thank you for you explanations of each part, it's really appreciated! :) — RKC, Nov 17 '16 at 17:15

Tumblr Like Button Not Working

1 Answers1