Instafeed.js - Sortby most-liked when 60+ images

Question

I am using instafeed.js to display Instagram images on my homepage.

I got 1000+ images I would like to sortby most-liked and load 60 at a time.

When I use "sortBy: most-liked" it looks like instafeed.js loads the 60 recent images and then sort these 60 by most-liked. When I load the next 60 images I get the next 60 recent images and these sorted by most liked.

It looks like it is not posible to sort all 1000+ images by most-liked. And then load 60 at a time?

Is this how instafeed.js works? Or is it a bug?

 <script type="text/javascript">
  var feed = new Instafeed({
   sortBy: 'most-liked',
    get: 'tagged',
   tagName: 'awesome',
   clientId: 'YOUR_CLIENT_ID'
  });
 feed.run();
</script>

Kind regards

Answer 1

As I know, currently instafeed supports to load max of 60 images. But there is a way to load more images and display them as you requested and it need little bit of code work.

for the first you need to follow the following steps;

1. Call feed.next() store the data until it reach 1000 images. - call it from "after" callback of instafeed.
2. Sort the images using like counts - need to have our own compare function.
3. create the template to show the images.
4. Finally slice the data (60 out of 1000) and display in the Div.

var nextButton = document.getElementById('next-feeds');
    var imgs = [];       // store the images for caching
    var images = [];
    var currentPage = 1;

    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'ajith',
        clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
        resolution: 'thumbnail',
        limit: 60,
        mock: true,
        template: '<a href="{{link}}" target="_blank"><img src="{{image}}" class="instagramImg"/></a><label>Liked by <b>{{model.likes.count}}</b> people</label>',
        cachedNext: function () {  // read the cached instagram data
            var nextImages = imgs.slice((currentPage - 1) * feed.options.limit, (currentPage) * feed.options.limit);
            $("#instafeed").html(nextImages);
        },
        after: function () {
            if (images.length < 300)
            {
                feed.next();
            }
            else
            {
                var result;
                images.sort(compare);
                for (i = 0; i < images.length; i++) {
                    image = images[i];
                    result = this._makeTemplate(this.options.template, {
                        model: image,
                        id: image.id,
                        link: image.link,
                        image: image.images[this.options.resolution].url,
                        likeCount: image.likes.count
                    });
                    imgs.push(result);
                }
                var imgsPerPage = imgs.slice((currentPage - 1) * feed.options.limit, (currentPage) * feed.options.limit);
                $("#instafeed").html(imgsPerPage);
            }
        },
        success: function (data) {
            images.push.apply(images, data.data);
        }
    });

    feed.run();

    // bind the next button
    nextButton.addEventListener('click', function () {
        $("#instafeed").fadeOut(100);
        $("#instafeed").empty();
        $("#instafeed").fadeIn(100);
        currentPage++;

        feed.options.cachedNext();
    });

    function compare(a, b) {
        // alert(a.likes.count);
        if (a.likes.count < b.likes.count)
            return -1;
        if (a.likes.count > b.likes.count)
            return 1;
        return 0;
    }

<script src="http://sriajith.info/wp-content/uploads/2015/05/instafeed.min_.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="instaFeedButton">
<button id="next-feeds" class="btn-feed">Next</button>
</div>
<br/> <br/>                
<div id="instafeed" class="instagramFeed"></div>

If you want to add the pagination, you can find some info here here