facebookarchive/facebook-instant-articles-sdk-php

div id don' show on Instant Article. No rules set

NicoCaldo opened this issue · 1 comments

Steps required to reproduce the problem

I need to insert an embedded post from vk. This is the code I have to copy on the body of my Wordpress article

<div id="vk_post_-43308987_559225"></div><script type="text/javascript">
  (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//vk.com/js/api/openapi.js?151"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'vk_openapi_js'));
  (function() {
    if (!window.VK || !VK.Widgets || !VK.Widgets.Post || !VK.Widgets.Post("vk_post_-43308987_559225", -43308987, 559225, 'p_T_dlNNUkHP6WN6PNOZo8sTyFN0')) setTimeout(arguments.callee, 50);
  }());
</script>

Expected Result

  • Instant Article should show it as a normal embedded

Actual Result

  • No rules defined for
    in the context of InstantArticle
    I think I need to set up some rules to show it on Instant Article but I can't understand which rules to write.

Is it possible to add a class to this <div> of yours?
This way we can better select that kind of content across all of your posts (since I see this one having as ID some sort of unique info for this particular snippet.

<div class="your-vk-class" id="vk_post_-43308987_559225"></div><script type="text/javascript">
  (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//vk.com/js/api/openapi.js?151"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'vk_openapi_js'));
  (function() {
    if (!window.VK || !VK.Widgets || !VK.Widgets.Post || !VK.Widgets.Post("vk_post_-43308987_559225", -43308987, 559225, 'p_T_dlNNUkHP6WN6PNOZo8sTyFN0')) setTimeout(arguments.callee, 50);
  }());
</script>

In the aboce example I've added a class to it: "your-vk-class"

Then, you can add this to your transformation Rules:

{
  "rules": [
    {
      "class": "InteractiveRule",
      "selector": "div.your-vk-class",
      "properties": {
        "interactive.iframe" : {
                "type" : "multiple",
                "children": [
                    {
                        "type": "element",
                        "selector": "div.your-vk-class"
                    }, {
                        "type": "next-sibling-element-of",
                        "selector": "div.your-vk-class"
                    }
                ]
            }
      }
    }
  ]
}