Instagram embeds not working when adding embeds dynamically

javascript jquery instagram
m4olivei picture m4olivei · Dec 10, 2014 · Viewed 14.8k times · Source

Working on a blog that loads posts on an infinite scroller. Each blog post may or may not have Instagram embeds. I'm finding that the first one that shows on the page will get processed (regardless if it's in the initial page markup, or dynamically added), the following ones will not. Here is a simple JS Bin that illustrates the problem:

http://jsbin.com/hilixi/1/edit?html,js,output

The first Instagram embed is in the initial page markup. Another Instagram embed is added after page load, after 4 seconds. The second embed add does not get processed.

Any ideas why? It seems the Instagram embed script will only run once. Any way I can force it to refresh?

Thanks, Matt

Answer

narwic picture narwic · Dec 10, 2014

The embed.js script that comes with Instagram's embed code has a process function you can call.

window.instgrm.Embeds.process()

Just use that whenever your dynamic content loads.

Related questions

Displaying more than 20 photos in instagram API

I've been doing some research and trying to figure out how to display more then 20 images that are being pulld in from the instagram api. I'm pretty new at this so any help would be appreciated! Just trying to see …

Read More
How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More
Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

Mod note: This question is about why Postman is not subject to CORS restrictions in the same way an XMLHttpRequest is. This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error. Please stop posting: CORS configurations for every …

Read More