F******k Instant Articles: How do they work?

Watch the video of my talk!

Here’s the slides embedded from Slideshare.

https://www.slideshare.net/jeremyclarke/fk-instant-articles-how-do-they-work

Key links:

• Facebook Instant Articles
• Instant Articles for WP WordPress plugin

Assumptions

• You run your own WP site
• Mobile traffic is key
• Facebook is a source of traffic for your content
• You don’t want to use weird awful ad networks
• Your soul is for sale

What is an iA and what does it do?

• Posts load very fast in Facebook mobile apps
• Replaces WP theme for posts viewed from Facebook mobile
• Plugin sends posts to Facebook as raw data when saved
• Facebook stores post content and renders them for mobile visitors
• Does not “share” your posts, you do that the normal way with normal URL
• Only applies to mobile apps, but that is the most common traffic

Okay but what is an AMP again?

• Alternate version of a URL hosted on your site
• AMP is a custom „theme“ WP uses on your content to match the AMP standard
• AMP versions of posts get harvested by Google and stored in their cache
• Fast AMP cache served to Google mobile visitors
• Google gives your content special treatment in search (Carousel)

Why NOT use iA?

• You hand control of your content to Facebook
• Violates open web principles (walled garden)
• You are subject to Facebook’s whims
• Content must be crammed into very limited format
• Some content not possible in iA
• Complications integrating with WP plugins
• Not all ads function
• Interactivity features must be on Facebook‘s terms

Why use iA?

• [Promo image] https://media.fb.com/2016/04/12/instant-articles-now-open/
• Actually super fast
• More useable and beautiful than most sites on mobile
• Only ever uses your URL as the web address of posts (unlike AMP)
• Analytics integration available
• No load on your server from traffic wave
• Advertising integration available
• Facebook probably gives iA unfair advantage [citation needed]

Steps to set up!

Create a FB page

• You can figure this out, I believe in you!

Initial plugin setup

• Install Instant Articles for WP plugin and activate
• Click „these instructions“ link to iA page activation screen
• Choose your page, then accept the terms
• Your page is now „activated“ for iA

Go to your Instant Articles Configuration screen inside Facebook (steps re-used later)

• In Facebook visit your page
• Click on Publishing Tools at the top
• Click on Instant Articles ? Configuration in the sidebar
• This screen is your real dashboard for iA setup, you will visit it a lot.

Get your facebook „Page ID“ for the plugin settings screen

• In the Step 1: Set Up Instant Articles section, click on the Connect Your Site:Authorize your site link
• First, insert your site URL in the Your Registered URLs field.
• Copy the Page ID from the WordPress Plugin Users section
• Return to wp-admin and the Facebook Instant Articles Settings screen.
• Paste the ID you copied into the Facebook Page ID field.
• Now the iA integration should be working, and you should see the iA metabox whenever you edit a post!

Set up a default Style Template

• A style template is required to get approved, but can be very simple.
• Go to your Instant Articles Configuration screen inside Facebook (see above)
• Find the Tools section (below Initial Setup) and the Styles subsection.
• Click on the default style to edit it.
• The only MANDATORY thing is to have a Logo set for the article header (690x132px)
• Configure the rest by preference, you can change it later anytime
• Just make sure you have the Logo set up, so that you don’t get errors about it below.

Get 5 posts ready to publish Submit for Review

• Overarching goal: Get the Submit for Review button in the wp-admin Facebook Instant Articles Settings screen to light up blue so you can push it!
• We need to have 5 posts that have been submitted to iA by being saved after you have set up the plugin.
• You can use existing posts, but they have to be re-saved
• Edit your recently published posts and find the Facebook Instant Articles metabox
• Move the metabox to just below the post for convenience, at least temporarily
• Deal with any global errors you see that apply to all posts (see transformation debugging later)
• Have 5 posts ready with no errors

Submit for Review!

• Return to iA settings screen in Facebook
• Find the Submit for Review button
• Deal with any remaining errors (sorry)
• Submit!

Testing your iA posts

• • iA only show on Facebook mobile apps, so testing is tricky
  • Basic: Share a post to Facebook, then view with a mobile app
  • Facebook Page Manager app (ios/Android) lets you preview posts without them being live on FB.
  • Use Page Manager to preview and design your iA while your review is pending
  • Also useful to preview iA without sharing to facebook
  • Getting to Page Manager previews:
    • Open Page Manager
    • Find your page
    • … (more)

 

• Instant Articles

 

Development mode

• Sets your site to submit to Development rather than Production stream
• Posts only visible in Page Manager app and Publishing Tools on Facebook site.
• Useful when you are already approved, but want to test publishing with different configurations
• Using Develpopment mode:
  • Enable Development Mode in wp-admin Instant Articles Settings
  • Change some settings (Style, transformations)
  • Resave an article, which will be submitted to Development rather than updating the Production version that visitors see.
  • Preview the new version in Development section of Page Manager app.
  • Disable  Development Mode in wp-admin Instant Articles Settings
  • Resave a post yet again, now submitting to Production with new settings
  • Check that the new post version is as expected in Page Manager app

Transformations

• iA uses a small subset of HTML5 as a strict markup standard
• Transformations convert your standard HTML into iA markup
• They can convert to an iA Format, or remove content entirely
• Many useful WP transformations are built into the plugin

Transforming your problems into solutions

• Transformations are added in the Custom transformer rules section of wp-admin iA settings
• Uses JSON format, not very user friendly
• Can be automated by plugins but not easy
• Often you just need to remove items added by plugins (sharing tools)
• Other times your custom styles (.pull-quote) can be converted into matching iA Formats

Debugging transformations

• Errors for invalid markup will show in the WP post editor
• Posts with errors just won’t submit, so it’s okay if some posts have un-transformable content
• Forcing a post with errors to submit will mean the invalid content is just missing.
• Establish editorial standards about how to solve common transformation errors
• Some valid HTML combinations must be avoided to use iA consistently

Cover Images

• Populated by WP Featured Image by default
• Always show at the very top of posts
• By rule, cannot be duplicated inside the post
• Consider disabling Cover Image entirely if you insert your Featured Image in your posts

Tips

• Production/development RSS feed: NO NEVER
• Always have featured images!
• Good luck with AMP integration!