Facebook Instant Article custom embed doesn't make requests
Question
I'm trying to embed my own script (which injects an iframe with some content) inside a FB Instant article.
It seems to be working properly only for some devices (eg iPhones 5s & 6s, LG G2) but others (Samsung devices) don't seem do load anything.
Apparently the problem is in making the actual request for the script's src, but it is just an assumption. (i've changed the src into angular's for demonstration).
I've tries to debug this using the tools Facebook suggests here: Link
I've added an example of my page (just for reference, if you paste it into the article editor it will throw a warning).
Note: when my code is inserted into a script tag directly without a request from some origin it runs as expected.
What is the wrong? Why doesn't FB Instant Articles makes the call for my script?
Thank you
<!doctype html><html><head><link rel="canonical" href="http://news.mywebsite.com/some-canonical-url/"/><meta charset="utf-8"/><meta property="op:generator" content="facebook-instant-articles-sdk-php"/><meta property="op:generator:version" content="1.3.0"/><meta property="op:generator:application" content="facebook-instant-articles-wp"/><meta property="op:generator:application:version" content="2.11"/><meta property="op:generator:transformer" content="facebook-instant-articles-sdk-php"/><meta property="op:generator:transformer:version" content="1.3.0"/><meta property="op:markup_version" content="v1.0"/><meta property="fb:article_style" content="default"/></head><body><article><header><figure><img src="https://www.google.co.il/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></figure><h1>js embed TEST!!!!</h1><time class="op-published" datetime="2016-06-24T13:50:14+00:00">June 24th, 1:50pm</time><time class="op-modified" datetime="2016-07-18T16:21:25+00:00">July 18th, 4:21pm</time><address><a>dev guy</a></address><h3 class="op-kicker">test kicker</h3></header><p><b>Nthi is a TEST</b></p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker <a href="http://www.lipsum.com/">including versions of Lorem Ipsum.</a>)</p> <h2>vine</h2> <figure class="op-interactive"> <iframe src="https://vine.co/v/Ot2mpV1YO6F/embed/simple" width="600" height="600"></iframe> </figure> <h2>script tag with src</h2> <figure class="op-interactive"> <iframe class="no-margin"> <div class="wrapper" id="111"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script> </div> </iframe> </figure> <h2>script taht injects a script tag</h2> <figure class="op-interactive"> <iframe> <div class="wrapper" id="222"> <script src="http://jsconsole.com/js/remote.js?762226ac-81f8-4a2a-8403-4f834c8db5de"></script> <script> // get parent div var scriptTag = document.getElementsByTagName('script'); scriptTag = scriptTag[scriptTag.length - 1]; var parentNode = scriptTag.parentNode; var s = document.createElement("script"); s.type = "text/javascript"; s.src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"; parentNode.appendChild(s); </script> </div> </iframe> </figure> <h2>script using get req. and eval's response</h2> <figure class="op-interactive"> <iframe> <div class="wrapper" id="333"> <script src="http://jsconsole.com/js/remote.js?6f3e6a5a-5408-4419-8331-7a4b76f5b8bb"></script> <script>var xmlHttp = new XMLHttpRequest(); window.stat = 2; xmlHttp.onreadystatechange = function(state) { window.stat = 3; window.xmlHttp = xmlHttp; if (xmlHttp.response && xmlHttp.readyState === 4 && xmlHttp.status === 200) { window.stat = 5; window.res = xmlHttp.response; eval(xmlHttp.response); } else { window.stat = 4; } }; xmlHttp.open("GET", "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js", true); // true for asynchronous xmlHttp.send(null);</script> </div> </iframe> </figure> </article></body></html>
1 answers
solution1
0 2017-10-27 20:16:16
I ran into the same issue with Instagram and other social embeds. Loading the scripts over HTTPS resolved it for me. I couldn't find anything about HTTPS requirements in the Facebook documentation. I'd guess the browser/webview is throwing a generic mixed-content warning.
Edit: Update these <scripts> s:
https://jsconsole.com/js/remote.js?762226ac-81f8-4a2a-8403-4f834c8db5de
https://jsconsole.com/js/remote.js?6f3e6a5a-5408-4419-8331-7a4b76f5b8bb
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.