JQuery Appending Instagram's Blockquote Embedding Dynamically Doesn't Work
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>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
function appendInstagram($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>
<div id="test">
</div>
<input type="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"