2016-07-20 2 views
4

Я пытаюсь встроить свой собственный скрипт (который вводит iframe с некоторым контентом) внутри статьи FB Instant.Facebook Instant Article custom embed не делает запросов

Кажется, что он работает правильно только для некоторых устройств (например, iPhone 5s & 6s, LG G2), но другие (устройства Samsung), похоже, ничего не загружают.

Видимо проблема заключается в том, чтобы сделать фактический запрос для скрипта скрипта, но это всего лишь предположение. (я изменил src на угловые для демонстрации).

Я попытался отладки с помощью инструментов Facebook предлагает здесь: Link

Я добавил пример моей страницы (только для справки, если вставить его в редактор статьи он будет бросать предупреждение).

Примечание: когда мой код вставляется в тег скрипта напрямую без запроса из какого-либо источника, он работает как ожидалось.

Что случилось? Почему FB Instant Articles не вызывает вызов для моего скрипта?

Спасибо

<!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"> 
 
\t <iframe class="no-margin"> 
 
      <div class="wrapper" id="111"> 
 
      \t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script> 
 
      </div>  
 
\t </iframe> 
 
</figure> 
 

 
<h2>script taht injects a script tag</h2> 
 
<figure class="op-interactive"> 
 
\t <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> 
 
\t </iframe> 
 
</figure> 
 

 
<h2>script using get req. and eval's response</h2> 
 
<figure class="op-interactive"> 
 
\t <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> 
 
\t </iframe> 
 
</figure> 
 
</article></body></html>

ответ

0

Я столкнулся с той же проблемой с Instagram и другими социальными встроенными элементами. Загрузка скриптов через HTTPS разрешила это для меня. Я не мог найти ничего о требованиях HTTPS к документации в Facebook. Я предполагаю, что браузер/веб-браузер бросает общее предупреждение о смешанном содержании.

Edit: Обновление этих <scripts> сек:
https://jsconsole.com/js/remote.js?762226ac-81f8-4a2a-8403-4f834c8db5de
https://jsconsole.com/js/remote.js?6f3e6a5a-5408-4419-8331-7a4b76f5b8bb

Смежные вопросы