Instagram feed

🙋Get Help
1

I want to display the last few image of my Instagram. Do you have any advice? I found instafeed.js, but it will stop woking completely on March 31, 2020.

2

Hello Koli,

I’ve been taking a look at the issue, and it looks like the source of the problem is Instagram deprecating its API.

In any case in one of the issues of the instafeed repo, a user has created a simple code to get the latest pictures from the feed: https://github.com/stevenschobert/instafeed.js/issues/640#issuecomment-590744994

Let us know if it’s enough for you :blush:

3

Thanks Pablo. To be honest, I have no idea, how to do it in Frontity. I set up the Zap, as described in this link, added JQuery with npm install jquery --save,
added to my footer.js this code:

const InstaFeed = () => {
  $.get("https://zapier.com/engine/rss/2502510/jhvanderschee", function(data) {
    $(data)
      .find("item")
      .each(function() {
        // or "item" or whatever suits your feed
        var el = $(this);
        var title = el.find("title").text();
        var link = el.find("link").text();
        var image = el.find("enclosure").attr("url");
        var description = el.find("description").text();
        $("#instafeed").append(
          '<a href="' +
            encodeURI(link) +
            '" target="_blank" title="' +
            title.replace("Caption: ", "") +
            '"><img src="' +
            encodeURI(image) +
            '" alt="' +
            title.replace("Caption: ", "") +
            '" /></a>'
        );
      });
  });
  return null;
};

But I have no idea how to create an HTML element with the id #instafeed, and I get this error:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default.a.get is not a function
      at InstaFeed (webpack-internal:///./packages/frontity-chakra-theme/src/components/footer.js:13:7436)
      at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:397:2319)
      at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:396:122)
      at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:1199)
      at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:55)
      at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:470:116)
      at app.use (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:45:243)
      at process._tickCallback (internal/process/next_tick.js:68:7)
5

I really discourage you to mix jQuery with React. It leads to bad performance and UI problems.

These days there are React packages in npm for almost anything you can imagine.

6

Thanks @luisherranz and @Pablo!
I succesfully created my InstaFeed with Zapier and Axios. I also created a mini-Tutorial about it. Cheers!

2 Likes
7

Great to see that you made it work @koli14!