Instagram embeds.js library not loading

Question

I have a javascript function which loads the HTML embed code for an Instagram post. The post appears but the photo is replaced by a grey background and the Instagram logo. The post does contain other information such as hashtags, time posted and username. I believe that the problem is that Instagram embeds.js JavaScript library is not loading properly. I am aware I can do this manually but am having difficulty with how to do this in terms of syntax and placement in my code. Below is my code.

     <script type="text/javascript">
         var auto_refresh = setInterval(
         (function () {
            $("#latestData").load("displayPost.php");//displayPost.php "echo" html embed code
         }), 10000);
     </script>

<div id="latestData"></div>
    <script src="https://platform.instagram.com/en_US/embeds.js"></script>
    <script>if ( typeof window.instgrm !== 'undefined' ) {
        window.instgrm.Embeds.process();
    }</script>

I have used these to try to solve this problem.

Instagram embeds not working when adding embeds dynamically

https://wordpress.stackexchange.com/questions/170857/problems-using-wps-oembed-function-instagram-ajax

https://instagram.com/developer/embedding/?hl=en

Answer 1

This is happening because you're not properly structuring your order of execution. You should load your embed code first, then in a callback call instgrm.Embeds.process(). Make sure that you do not include embeds.js with each embed by appending OMITSCRIPT=true to your embed URL. Instead, include the embeds.js once in a script tag on your page.