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"
}
}
}