Custom Transformer Rules Settings when Importing Posts from WordPress as Facebook Instant Articles

Importing posts from WordPress as Facebook Instant Articles (FBIA) is relatively easy. FBIA will show to Facebook mobile app users when you share your posts / pages over the FB networks. Read more about Instant Articles considerations and settings in this post by WebProm. But here I want to show some tweaks possible in Automattic Instant Articles WordPress Plugin.

After you install this plugin, setup guide is written at its settings screen. But the most challenging thing during setup is to avoid and eliminate errors generation when converting WordPress posts into Instant Articles. One must tweak Custom Transformer Rules to remove such errors.

After installation of WordPress Plugin for Instant Articles and upon activation with your app ID and FB Page, see how your post import into Facebook. You can see them from your FB page Publishing Tools > Instant Articles after connection has been set up.  If your posts are really simple you may not have any errors. But usually errors are coming, especially when you have some uncommon code inside posts, like video, programming code display, image galleries in older WordPress themes or unusual plugins etc.

Facebook Instant Articles Errors

One of important rules for Instant Articles is that they must duplicate content from your regular post. So we must try to have the same content in both.

You can enable development mode in plugin’s settings, this way articles will not be published automatically, you’ll have a chance to fix them on Facebook. I think articles with errors won’t be published (go live) anyway. But better to try to tweak plugin to convert posts without errors.

Custom Transformer Rules to Eliminate Errors Upon Conversion

At the bottom of plugin’s settings page you will find an option to enable Custom Transformer Rules.

Facebook Instant Articles Transformer Rules

So how to write these rules? You may read some FBIA documentation on rules, but it’s a bit complicated. Current WP plugin’s rules are listed on GitHub. And we should extend them with our custom rules.

My rules I add into plugin and used in this blog are as follows:

{ "rules" :
[
{ "class": "PassThroughRule", "selector" : "html" },
{ "class": "PassThroughRule", "selector" : "div" },
{ "class": "PassThroughRule", "selector" : "dl" },
{ "class": "PassThroughRule", "selector" : "dt" },
{ "class": "PassThroughRule", "selector" : "dd" },
{ "class": "BlockquoteRule", "selector" : "pre" },
{ "class": "ItalicRule", "selector" : "code" },
{ "class": "PassThroughRule", "selector" : "code br" },
{ "class": "PassThroughRule","selector": "//a[descendant::img]" }
]
}

PassThroughRule means conversion shouldn’t notice (should skip) selectors inside the code of my post. Instant Articles have limited selectors possibility, so all unrecognized selectors are causing errors, and we must skip them upon conversion.

I have definition list (dl, dt, dd) for some galleries and had to skip this code to display galleries correctly (galleries should convert to slideshows by default).

And for Syntax Highlighter code display I had to add some rules too. I.e. I’ve used BlockquoteRule to display code enclosed into pre tag as a blockquote on FB.

Blockquote style is defined in FB page Instant Articles settings. You may create several styles for page and to define each style to be used when fetching articles from different sites into same FB page. In WP plugin you can set style to be used for the site, where the plugin was installed.

And when I just use <code> tag without <pre> I wanted it to display in Italics style. So I use ItalicRule to make font style italics.

Another error that I had to remove was “too many BR tags“. In the last line of my rules code I’ve just made Facebook converter to pass them unnoticed again with PassThroughRule.

Add to Any Sharing Block

Recently I had to disable Add to Any sharing plugin addition to get my articles published without warnings. IgnoreRule means the tags are removed completely, which is not recommended. But I don’t need sharing addition in my content.

{
"rules":
[
{ "class": "IgnoreRule", "selector" : "div.addtoany_share_save_container" },
{ "class": "IgnoreRule", "selector" : "div.addtoany_list a" }
]
}

Hope now it’s easier to understand. You can see this article as Instant Article with your mobile Facebook app if you share it on Facebook somewhere.

Share:
This entry was posted in WordPress and tagged . Bookmark the permalink.

23 Responses to Custom Transformer Rules Settings when Importing Posts from WordPress as Facebook Instant Articles

  1. akthar says:

    I have similar issue with instant article. Where i have VHDL Programming Language syntax diclared inside syntaxhighlighter brush. So its content is removed by FBIA.

    I don’t no how to write custom transformer rule on the following

    How to write passthrough rule for it.

    https://wordpress.org/support/topic/part-of-article-missing-within-vhdl-vhdl

  2. akthar says:

    Yes you are correct. I added the custom script you mentioned. Now it shows the content inside. Still I face some problem. It simply consider entire VHDL code Part in to another paragraph. So it re align the VHDL code to paragragh. How to display it with some code tag?

    • If you have something before pre make it PassThroughRule. If you have things inside pre that are converted to P, make it PassThroughRule too.

  3. akthar says:

    i tried the following
    { “rules” :

    [

    { “class”: “PassThroughRule”, “selector” : “pre” },

    { “class”: “PassThroughRule”, “selector” : “div” },

    { “class”: “BlockquoteRule”, “selector” : “pre” },

    { “class”: “PassThroughRule”, “selector” : “br” }

    ]

    }

  4. akthar says:

    not working

  5. ak says:

    Now i got everything working. i resubmit articles without any warning message on production .

    But i find the following warning message in all the post wordpress dashboard.

    This is a text container that must not be empty nor contain only whitespace characters such as spaces, tabs, new lines or .Element content: Facebook\InstantArticles\Elements\Italic::__set_state(array( ‘textChildren’ => array ( ), ))

  6. ak says:

    I checked your page in the instant article.
    .
    the code part you added for rules is not properly aligned. ( spacing , new line , tabs removed)

    the same way my vhdl code part also unaligned.

    How to make it look like clean code format.

  7. ak says:

    Hi any update on its format.

  8. ak says:

    I don’t want to compromise on code view. Please suggest some custom rules to make it look good.

  9. ak says:

    Hi please try LineBreakRule and let me know.

  10. ak says:

    I don’t know how to use these rules. I hope you can do it.

    • looks like it works for me!

      { "class": "ItalicRule", "selector" : "code" },
      { "class": "LineBreakRule", "selector" : "code br" }

      Instead of PassThroughRule added LineBreakRule because my syntax highlighter works within code tag I use code br for selector.

      we have line breaks now.
      here’s for example: http://www.fix-css.com/2011/05/css-zoom/

      Updating my rules in this post.

    • Ah no, it still counts BR and gives error after 5.

      Too Many Line Breaks: This text block uses too many line breaks (
      elements). Please split the text block into multiple paragraphs or reduce the number of line breaks to a maximum of 5.

      So no solution yet 🙁

  11. ak says:

    Hi any updated solution for that problem

  12. ak says:

    How about adding readmore tag at coding part and divert the instant article readers to our website.

  13. pepe says:

    do you know the rules for adding likes and comments to slideshow and images? Also how does exactly related articles work? I decide which articles to show or there is a way to put it automatically?

    For the facebook likes and comments for i Images I wrote this in the rules. but it doesnt work 🙁

    {
    “class”: “ImageRule”,
    “selector” : “img”,
    “properties” : {
    “image.url” : {
    “type” : “string”,
    “selector” : “img”,
    “attribute”: “src”
    },
    “image.like” : {
    “type” : “exists”,
    “selector” : “figure[data-feedback*=’fb:likes’]”,
    “attribute”: “data-feedback”
    },
    “image.comments” : {
    “type” : “exists”,
    “selector” : “figure[data-feedback*=’fb:comments’]”,
    “attribute”: “data-feedback”
    }}}

    hope you can give me a little help here, thank youu

  14. Pingback: Adding Facebook Instant Articles from WordPress into FB Page

Leave a Reply

Your email address will not be published. Required fields are marked *