div id don' show on Instant Article. No rules set
NicoCaldo opened this issue · 1 comments
NicoCaldo commented
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.
everton-rosario commented
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"
}
]
}
}
}
]
}