Мгновенное вставка статьи в Facebook не делает запросов

Я пытаюсь встроить свой собственный скрипт (который вставляет iframe с некоторым содержимым) в статью FB Instant.

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

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

Я пытаюсь отладить это, используя инструменты, которые предлагает Facebook здесь: Ссылка

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

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

Что не так? Почему 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">
 <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 ответ

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

Изменить: обновить эти <scripts>s:
https://jsconsole.com/js/remote.js?762226ac-81f8-4a2a-8403-4f834c8db5de
https://jsconsole.com/js/remote.js?6f3e6a5a-5408-4419-8331-7a4b76f5b8bb

Источник
Другие вопросы по тегам