17 Jun Errors Publishing Facebook Instant Articles with Video
I bought an opportunity to do some programming once more, and bumped into some issues that others skilled too. I hope this helps the subsequent individual:
Instant Articles for WP plugin usually offers a number of of the next errors when a put up has movies:
HTML Embeds Require Valid Width: For embeds with no inside HTML between <iframe></iframe> tags, we suggest specifying each width and peak on the <iframe> ingredient. Learn extra in Interactive below Format Reference within the Instant Article documentation.
HTML Embeds Require Valid Height: For embeds with no inside HTML between <iframe></iframe> tags, we suggest specifying each width and peak on the <iframe> ingredient. Learn extra in Interactive below Format Reference within the Instant Article documentation.
No guidelines outlined for <iframe class="youtube-player"> within the context of Paragraph
Webview with op-social class with none supported embed kind: When utilizing op-social class on a webview, it should have a supported embed inside it e.g. Instagram, Twitter, Facebook, Youtube, and so forth. We did not discover any right here.
What to do:
In the Facebook Instant Articles settings, verify the Custom Transformer Rules field:
Replace what’s within the textual content field with the next:
If your video is from YouTube or Facebook, that’s in all probability sufficient. If it’s Vimeo or one other supplier you’ll in all probability 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/fb/facebook-instant-articles-sdk-php/src/Facebook/InstantArticles/Elements.
This isn’t an awesome resolution, however while you’re charging by the hour, generally the fast kludge is the easiest way to serve your prospects. Note that if you happen to replace the plugin, and Facebook and the plugin authors didn’t remedy the underlying drawback, you’ll must repeat the kludge.
Also, if you happen to generally do have objects which might be from a supported social supplier (for instance Facebook movies, YouTube or Instagram) you’ll want some conditional code.
The Facebook Instant Articles for WordPress plugin works nice for many issues, however as of this writing Facebook and the plugin are out of sync concerning some embedded movies.
It appears that after the plugin was first launched, Facebook began rejecting feeds the place an iframe didn’t embody peak and width. The plugin doesn’t provide peak and width for Social or Interactive Embeds.
Fortunately that is a straightforward repair for Social Embeds, merely copying the proper Social Embed rule, including peak and width to it, and setting it as a Custom Transformer rule.
“selector” : “//p[iframe]”,
is the proper selector is that WordPress provides paragraph tags that exist within the code though you didn’t kind them and also you don’t see them within the editor.
Since non-supported codecs like Vimeo use want op-interactive as a substitute of op-social, the apparent resolution would have been to do the identical factor, however with the primary line as
as a substitute of
These guidelines set off the execution of Transformer/InteractiveRule.php and Elements/Interactive.php (or Transformer/SocialEmbedRule.php and Elements/SocialEmbed.php). The former units op-interactive and the latter units op-social.
However whereas SocialEmbed.php treats width the identical approach it treats peak, Interactive.php doesn’t.
The peak code is similar in each, and is what you’d anticipate:
public perform withHeight($peak)
The width code isn’t. In Interactive.php, it’s
public perform withWidth($width)
Instead of writing the width, the Interactive Rule tells Facebook to calculate it from different settings. Which is an awesome thought, however it’s not what Facebook is at present anticipating.
Therefore I wrote the Custom Rule to make use of the SocialEmbedRule. I then modified SocialEmbed.php to write down op-interactive as a substitute of op-social.
If the underlying drawback isn’t mounted within the subsequent replace, I’ll have to change the file once more.
Are you encountering comparable points? Let me know!