Errors Publishing Facebook Instant Articles with Video

I got a chance to do some programming again, and ran into some problems that others experienced too. I hope this helps the next person:

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 Paragraph
  • Webview 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:

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

to

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

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

instead of

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:

The width code is not. In Interactive.php, it’s

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!