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

This is the web version of my WordCamp 2017 talk about Facebook Instant Articles

Here’s the slides embedded from Slideshare.

Key links:

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?

instant articles promo image

  • 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!

Leave a Reply