custom transformer rules

donnytree
(@donnytree)

7 years, 6 months ago
Hello,

I am having trouble following the documentation and creating custom instant article rules. Part of the confusion is because of the disconnect between FB documentation and the Plugin’s documentation. Your recent updates to the documentation are really helpful, but there are still a few things I am unclear about.

In FB documentation (https://developers.facebook.com/docs/instant-articles/sdk/transformer), it shows how to create a custom rule:
```
class MyCustomRule extends Rule
{
    public function matchesContext($context)
    {}

    public function matchesNode($node)
    {}

    public function apply($transformer, $container, $node)
    {}
}
```
But is the plugin already creating this for us or do I need to add this code to my functions.php file? For instance, I need to add in a rule for SimplePullQuote, I tried adding the following to the custom rules in the plugin interface:
```
{
    "rules": 
    [{ 
    	"class": "PullQuoteRule",
        "selector" : "div.simplePullQuote"
      }, { 
    	"class": "AddtoAnyRule",
        "selector" : "div.addtoany_share_save_container"
      }, { 
    	"class": "AddtoAnyRule",
        "selector" : "div.addtoany_content_bottom"
      }, { 
    	"class": "ImageRule",
        "selector" : "div.single-image"
      }, { 
    	"class": "SuperscriptRule",
        "selector" : "sup" //<sup>
      } 
]
}
```
But when I save and then go to a post, the FB IA interface cannot load the scripts and the activity indicator just infinitely scrolls. I am guessing this is because there is no e.g., “PullQuoteRule” class? So then would I need to add this to functions.php in my WP theme?
```
class MyCustomRule extends Rule
{
    public function PullQuoteRule($context)
    {}
}
```
I know some of this extends to the FB documentation, but I am finding it really confusing. I have tried to follow other threads, but none of them lead me to an answer that works. Really hoping for some help here.

Thank you in advance,
Donna

Viewing 6 replies - 1 through 6 (of 6 total)

Jer Clarke
(@jeremyclarke)

7 years, 6 months ago

So first I want to say PREACH! The documentation is severely lacking on Facebook’s side, and the documentation on the WP side is WAY too reliant on the FB docs, resulting in a confusing mess where it feels like both are passing responsibility back and forth and we are left to guess at how transformations should be accomplished.

A demo from the WP plugin of something simple like transforming a .pull-quote class into something FB will accept would be really useful.

An explanation of how PassThroughRule etc. function with demo would be useful.

—-

That said, as to your question I suspect you are overthinking it. There could be a lot of reasons for the failure, but I don’t think it’s that you need to create PHP classes for the “rules” stated in the Facebook SDK.

So far in my experience, if you get the JSON stuff in the plugin settings UI right then the metabox gives relatively sensible output. At least, I got it to accept some transformations that were previously warnings and turned into success.

I would venture that the problem is your JSON setup, and maybe that the UI isn’t giving you errors when it should. I would test this but ATM I can’t even get the plugin to authenticate on a new site, and for the site I’m developing on I use a whole other system to populate that option (PHP arrays that get converted to JSON and inserted into the option).
Thread Starter donnytree
(@donnytree)

7 years, 6 months ago
@jeremyclarke, thanks! The problem is I don’t know how to fix the JSON. So if I get the following error message from the plugin:

“No rules defined for <div class=”addtoany_share_save_container addtoany_content_bottom”> in the context of InstantArticle”

What should the JSON be to fix it? I attempted:
```
{
    "rules": 
    [{ 
    	"class": "AddtoAnyRule",
        "selector" : "div.addtoany_share_save_container"
      }, { 
    	"class": "AddtoAnyRule",
        "selector" : "div.addtoany_content_bottom"
      }
]
}
```
But that didn’t work.

Thanks!
Donna
Jer Clarke
(@jeremyclarke)

7 years, 6 months ago
Okay I think I get what your problem is. Each “class” you use in your rules needs to match one of the “rule class”‘s listed in this article:

https://developers.facebook.com/docs/instant-articles/sdk/transformer-rules

So you can’t invent new ones like AddtoAnyRule, it has to be one of those.

In your case i think the rule you want is ‘IgnoreRule’ which just discards the HTML entirely. I have a similar situation with a plugin that inserts an empty div to use with Javascript, but which breaks iA unless I remove it with this:
```
{"class":"IgnoreRule","selector":"#wpp_popup_post_end_element"}
```
I’m still figuring out how the more abstract ‘class’ values operate, esp. PassThroughRule and how it works.
Thread Starter donnytree
(@donnytree)

7 years, 6 months ago

Ah, thanks @jeremyclarke, I will try that! I knew I was missing something, which is why I thought I needed to make a MyCustomRule class.

So per this thread, https://wordpress.org/support/topic/content-being-stripped-out-between-tags/, IgnoreRule will make the class not show at all, so I think I need to use the PassThroughRule if I want it to display still.

This helped a lot though Jeremy, I will try it out and let you know. Thanks!

Jer Clarke
(@jeremyclarke)

7 years, 6 months ago

PassThroughRule will mean that whatever is between the tags gets put into the iA document raw, with no container.

IgnoreRule will mean the tag is removed entirely.

Based on your class being “addtoany” I was assuming that it was inserted by a plugin to add sharing tools to your posts. If that’s the case then you should probably use IgnoreRule, since whatever that plugin is doing will surely not work inside the Facebook iA system, and any content inside will probably render wrong and/or cause more validation errors.

With iA it seems most custom content needs to be removed, making anything complex work with transformations is a pain in the butt that often ends in no solution available.

Thread Starter donnytree
(@donnytree)

7 years, 5 months ago

@jeremyclarke finally circling back to this. The IgnoreRule worked, thanks so much!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘custom transformer rules’ is closed to new replies.

Tags