The post Errors Publishing Facebook Instant Articles with Video appeared first on Managing Greatness.
]]>Problem:
Instant Articles for WP plugin often gives one or more of the following errors when a post has videos:
HTML Embeds Require Valid Width: For embeds with no inner HTML between <iframe></iframe> tags, we recommend specifying both width and height on the <iframe> element. Learn more in Interactive under Format Reference in the Instant Article documentation.HTML Embeds Require Valid Height: For embeds with no inner HTML between <iframe></iframe> tags, we recommend specifying both width and height on the <iframe> element. Learn more in Interactive under Format Reference in the Instant Article documentation.No rules defined for <iframe class="youtube-player"> in the context of ParagraphWebview with op-social class without any supported embed type: When using op-social class on a webview, it must have a supported embed inside it e.g. Instagram, Twitter, Facebook, Youtube, etc. We didn't find any here.
What to do:
In the Facebook Instant Articles settings, check the Custom Transformer Rules box:
Replace what’s in the text box with the following:
{
"rules":
[{
"class": "SocialEmbedRule",
"selector" : "//p[iframe]",
"properties" : {
"socialembed.url" : {
"type" : "string",
"selector" : "iframe",
"attribute": "src"
},
"socialembed.height" : {
"type" : "int",
"selector" : "iframe",
"attribute": "height"
},
"socialembed.width" : {
"type" : "int",
"selector" : "iframe",
"attribute": "width"
},
"socialembed.iframe" : {
"type" : "children",
"selector" : "iframe"
},
"socialembed.caption" : {
"type" : "element",
"selector" : "figcaption"
}
}
}]
}If your video is from YouTube or Facebook, that’s probably enough. If it’s Vimeo or another provider you’ll probably get the “Webview with op-social class without any supported embed type” error.
I cheated on this. I edited the SocialEmbed.php file. It’s in plugins/fb-instant-articles/vendor/facebook/facebook-instant-articles-sdk-php/src/Facebook/InstantArticles/Elements.
I changed
$figure->setAttribute('class', 'op-social');to
$figure->setAttribute('class', 'op-interactive');This isn’t a great solution, but when you’re charging by the hour, sometimes the quick kludge is the best way to serve your customers. Note that if you update the plugin, and Facebook and the plugin authors didn’t solve the underlying problem, you’ll need to repeat the kludge.
Also, if you sometimes do have items that are from a supported social provider (for example Facebook videos, YouTube or Instagram) you’ll need some conditional code.
Background:
The Facebook Instant Articles for WordPress plugin works great for most things, but as of this writing Facebook and the plugin are out of sync regarding some embedded videos.
It seems that after the plugin was first released, Facebook started rejecting feeds where an iframe did not include height and width. The plugin does not supply height and width for Social or Interactive Embeds.
Fortunately this is an easy fix for Social Embeds, simply copying the correct Social Embed rule, adding height and width to it, and setting it as a Custom Transformer rule.
The reason
"selector" : "//p[iframe]",
is the correct selector is that WordPress adds paragraph tags that exist in the code even though you didn’t type them and you don’t see them in the editor.
Since non-supported formats like Vimeo use need op-interactive instead of op-social, the obvious solution would have been to do the same thing, but with the first line as
"class": "InterativeRule",
instead of
"class": "SocialEmbedRule",
These rules trigger the execution of Transformer/InteractiveRule.php and Elements/Interactive.php (or Transformer/SocialEmbedRule.php and Elements/SocialEmbed.php). The former sets op-interactive and the latter sets op-social.
However while SocialEmbed.php treats width the same way it treats height, Interactive.php does not.
The height code is the same in both, and is what you’d expect:
public function withHeight($height)
{
Type::enforce($height, Type::INTEGER);
$this->height = $height;
return $this;
}The width code is not. In Interactive.php, it’s
public function withWidth($width)
{
Type::enforceWithin(
$width,
[
Interactive::NO_MARGIN,
Interactive::COLUMN_WIDTH
]
);
$this->width = $width;
return $this;
}Instead of writing the width, the Interactive Rule tells Facebook to calculate it from other settings. Which is a great idea, but it’s not what Facebook is currently expecting.
Therefore I wrote the Custom Rule to use the SocialEmbedRule. I then modified SocialEmbed.php to write op-interactive instead of op-social.
If the underlying problem isn’t fixed in the next update, I’ll have to modify the file again.
Are you encountering similar issues? Let me know!
The post Errors Publishing Facebook Instant Articles with Video appeared first on Managing Greatness.
]]>
Everything is different in Jerusalem. Temech’s 6th annual conference for entrepreneurs, for example, is geared to religious Jewish women. No men allowed.
I was invited to go to the 4th Annual Scaventures hunt in Jerusalem this morning. All I can say is what fun! It can be really hard to make time for fun, especially on a weekday, but sometimes it’s just worth it.
