Last Updated: May 8, 2021 | Reading Time: 2 minutes
Adding a public Instagram feed for my clients is a headache nowadays, it requires to generate an access token to include in a plugin, even for a public feed. The issue is that we have to contact the client back and forth to get this all things work.
Update:
With the recent changes to the Instagram API, this method is no longer work to pull images from the feed. Please switch to API based feed.
I found a solution from a script written by Javier Sanahuja, the codes he shares on GitHub, written in both pure Javascript and JQuery version.
Fast Way
I’ve compiled a simple plugin based on the JQuery version that you can download. Upload it to your server using the upload plugin inside WordPress or by FTP.
You can use the Plugin Editor to edit user name, image number, etc (I’m too lazy to create backend interface). Or you can do that before uploading the plugin by extract it and edit if offline.
The next step is to create a container using a widget or even in your post or page. Add this code in content editor using text mode:
<div id="instagram-feed"></div>Or you can use custom HTML widget:
Ok, here’s my demo using this script:
25 Responses
Hi, Your instagram-feed plugin stopped working since some time this week (November 17, 2020). Could You please check if there’s a solution?
Hi, the plugin is working again! I guess Instagram updated its API and that caused strange behavior.
If this plugin could be used to define the username in the div, instead of having to set it at plugin level, it would be great for sites that need to load multiple instagram feeds!
Good idea! Or probably I can create a shortcode.
Hi there, I’ve used this great plugin a few times thank you, but it’s not working for me any more… is there an update? Thank you
Hi, yes Instagram constantly changes the rules, hopefully there will be an update soon.
hey! the donwload link is not active.
Ivon, thanks for the callout, I have fixed the download link.
Hello, thanks for your plugin!
Your download link is not active?
I’ve just updated the js file from the original Github, and everything works fine!
Julian, I have fixed the download link, thanks. Glad you got it working.
Could you please tell how to intergrete because i have insttaled using custom Html Elmentor wdget but now show my insta Feed aslo i have flow you! plz help me
Hi, You can use the code widget to put the container.
Hi! Great plugin, I’ve used it for a few months and thank you for it. But now I face an issue with CORS: “Access to XMLHttpRequest at ‘https://www.instagram.com/XYZ’ from origin ‘XYZ.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
Any idea what to do with it?
Please redownload as I updated the script, hopefully it will fix the issue.
It didn’t work at first after updating the files, but now it does – thank you!
Yes Sorry for the issue, seems Instagram changed something again on their end.
Not working anymore even on your own site. Getting “net::ERR_BLOCKED_BY_RESPONSE” for each image.
Doesn’t work anymore. Shows just the text, but not the images.
Same problem here
Thank you for your library, it is what i’m really looking for but, as you can see yourself pictures disappeared even in your page. Is it possible to fix this issue?
thank you so mouth
I have red that other has the same problem
francesco
Instagram CDN now sends cross-origin headers which instruct browsers to block content display when image is shown on “wrong” domain. Server-side code is needed to mitigate the issue.. Take a look at the https://github.com/restyler/inwidget-proxified implementation of image proxy:
https://github.com/restyler/inwidget-proxified/blob/master/imgproxy.php
doesn’t work anymore
Ins’t work anymore 🙁
The images are broken 🙁
not working. give CORS error each time