Skip to content Skip to sidebar Skip to footer
Home / Instagram / Javascript / Jquery

Jquery Appending Instagram's Blockquote Embedding Dynamically Doesn't Work

Post a Comment
I have a jQuery script that appends the Instagram blockquote, but it doesn't work on the second append. The first time it gets appended, the blockquote converts to the iframe like

Solution 1:

i found out that instagram has this

window.instgrm.Embeds.process()

Which needed to be executed each time.

Solution 2:

The javascript tag you're appending won't be executed as you have it coded. I've mocked up something that should help:

<html><head><title>test</title><scriptsrc="http://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script><script>functionappendInstagram($controls){
  var instagramURL = $("#url").val();

  var instagramHtml = '<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7">' +
                            '<div style="padding:8px;"><a href="'+instagramURL+'" target="_blank"></a></div>' +
                        '</blockquote>'; // + instagramScript;

  $("#test").html(instagramHtml);
}

$(document).ready(function() {
    appendInstagram(null);

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://platform.instagram.com/en_US/embeds.js";
    s.async = true;
    $("#test").append(s);
});
</script></head><body><divid="test"></div><inputtype="text"id="url"value="https://www.instagram.com/p/BW52LY1FMdf/?taken-by=birminghamfencingclub_bfc" /></body></html>

For more info, have a look here: How to Append <script></script> in javascript?

Post a Comment for "Jquery Appending Instagram's Blockquote Embedding Dynamically Doesn't Work"