7

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

Community
  • 1
  • 1
Marty Markenson
  • 71
  • 1
  • 1
  • 3
  • Okay I have found if I run the embeds function on a timer the instagram post will load correctly but I feel like there must be a more efficient way to do this. Below is the code I added. – Marty Markenson Sep 07 '15 at 23:09

1 Answers1

9

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.

lostPixels
  • 1,303
  • 9
  • 23
  • 1
    Thanks for the response! I loaded the embed code in the header of my html and appended OMITSCRIPT=true to the URL. I'm still not sure about how to call instgrm.Emeds.process(). This is how I currently am calling it. `` – Marty Markenson Sep 26 '15 at 23:35
  • 5
    This is the url to include instagram's embeds.js, kinda hard to find. `` – mcclaskiem Oct 14 '15 at 17:10