All Collections
Liveblog
How to use Instant Articles
How to use Instant Articles

Discover how to enable our Liveblog widget to work with Facebook Instant Articles

Gabriel Carvalho avatar
Written by Gabriel Carvalho
Updated over a week ago

If you already publish instant articles to Facebook through the plugin Instant Articles for WP on Wordpress, it's very straightforward to enable our embed code to be displayed as well. Other plugins might follow the same configuration style, since we just need to tell it how to transform our <div> tag.

Follow the steps below:

1. Go to Instant Articles configuration

2. If "Custom transformer rules" is not enabled:

   - Enable Custom transformer rules

   - Copy the code below and paste it on the custom transformer rules

{
  "rules": [
    {
      "class": "InteractiveRule",
      "selector" : "figure.op-interactive",
      "properties" : {
            "interactive.url" : {
                "type" : "string",
                "selector" : "iframe",
                "attribute": "src"
            },
            "interactive.width" : {
                "type" : "int",
                "selector" : "iframe",
                "attribute": "width"
            },
            "interactive.height" : {
                "type" : "int",
                "selector" : "iframe",
                "attribute": "height"
            },
            "interactive.iframe" : {
                "type" : "children",
                "selector" : "iframe"
            }
        }
    }
  ]
}


3. If "Custom transformer rules" is already enabled and you already have custom rules, you'll need to add our rule (see code below) to your existing set of rules:

{
  "class": "InteractiveRule",
  "selector" : "figure.op-interactive",
  "properties" : {
        "interactive.url" : {
            "type" : "string",
            "selector" : "iframe",
            "attribute": "src"
        },
        "interactive.width" : {
            "type" : "int",
            "selector" : "iframe",
            "attribute": "width"
        },
        "interactive.height" : {
            "type" : "int",
            "selector" : "iframe",
            "attribute": "height"
        },
        "interactive.iframe" : {
            "type" : "children",
            "selector" : "iframe"
        }
    }
}

Did this answer your question?