Slides from my talk at WordCamp Ottawa/Montreal 2017. Here's the full description: Do you love hot, fresh trends in web publishing technology? Dream of implementing proprietary API’s and hitching your site to commercial entities over which you have no control? Get soft in the knees thinking about your web site being read without the web being involved? Me neither, but we have to do it anyway ¯\_(ツ)_/¯ Facebook Instant Articles make your posts show up lightning fast for mobile Facebook users in exchange for handing over some control. Users love it, it looks great and ultimately you still use WordPress to create and publish content. The problem: It’s a pain in the butt to get it set up, the documentation is half-hearted and the whole concept is mind-bending. This talk will walk you through all the headaches iA gave me and help you avoid having them yourself while you get set up. We’ll cover the concepts behind iA, nuances of the Automattic iA for WP plugin, and how to make the most of the tools on offer in the plugin to make sure all your posts get delivered to your Facebook readers “instantly”.

1. F******K INSTANT ARTICLES:
HOW DOTHEY WORK?
What is an iA and what does it do?
🦄 Jer Clarke • jerclarke.org
Creative Commons Share Alike
http://creativecommons.org/licenses/by-sa/3.0/
Download these slides:
http://jerclarke.org/instant-articles-wordcamp

2. JER IS AN EARTHLING WEB DEVELOPER
• Communications Studies at Concordia
University.
• HTML+CSS since 2003
• Code Unicorn for GlobalVoices since 2006
• Founded WordCamp Montreal in 2009

3. “CITIZEN MEDIA STORIES
FROM AROUNDTHE WORLD”

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

5. WHAT IS AN iA AND WHAT DOES IT DO?
• Posts load “instantly” in Facebook mobile apps
• Plugin sends posts to Facebook as raw data when saved
• Facebook stores post content and renders it for mobile
• Does not “share” your posts, you do it with the normal URL
• Only applies to mobile apps

6. Effectively: iA replaces your WP theme when visitors click on
your articles from Facebook mobile, and acts as a CDN.
Responsive WP theme Instant Article

7. OKAY BUT WHAT IS AN AMP AGAIN?
• Accelerated Mobile Pages by Google
• Alternate version of a URL hosted on your site
• 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)

8. WHY NOT USE iA?
• Hands control of your content to Facebook
• Violates open web principles
• 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

9. WHYTO USE iA ANYWAY
• Actually super fast
• More useable and beautiful than most sites on mobile
• Only 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]

10. DOYOUTRUST FACEBOOK?

11. DOYOUTRUST ME?
• 250K iA hits
in one day
• Each one
blazing fast
• No load on
our server

12. GETTING IT SET UP
A long series of steps

13. CREATE A FACEBOOK PAGE
• You can figure this out! I believe in you!

14. INITIAL PLUGIN SETUP
• Install Instant Articles for WP
plugin and activate
• Go to Instant Articles in
wp-admin sidebar
• Click “these instructions” link to
iA page activation screen

15. INITIAL PLUGIN SETUP
• Choose your page,
then accept the terms
• Your page is now
“activated” for iA
“these instructions”

16. FACEBOOK iA CONFIG SCREEN
• Your real home for iA configuration (paired with WP settings)

17. AUTHORIZE WP WITH “PAGE ID”
• Get the page ID from Tools > Connect Your Site from
Facebook iA config and paste it into the wp-admin iA settings
********
********

18. “CLAIM”YOUR WP SITE URL
• In Tools > Connect Your Site of Facebook iA config enter
your site URL to “Claim”it.
********

19. DEFAULT STYLETEMPLATE
• A style template is required to get approved
• Edit the default style in the Tools section if iA config

20. • The only mandatory style is to have a Logo set for
the article header (690x132px)
• Styles can be changed any time, follow your heart
DEFAULT STYLETEMPLATE

21. BASIC SETUP COMPLETE!
• iA should now be “active” on your site
• Plugin will send posts to Facebook when you save them
• iA metabox will show in the posts editor
• Time to prepare to Submit for Review

22. GET 5 POSTS READYTO
SUBMIT FOR REVIEW
• Overarching goal: Get the
Submit for Review button
to light up in iA config screen
• We need to have 5 posts
submitted without errors
• Existing posts are fine, but they
have to be re-saved after the
plugin is set up

23. DEBUGGING INITIAL POSTS
• Edit a recently published post and find the Facebook Instant
Articles metabox (move it to the top for convenience)
• Review and fix any warnings, they’re likely apply to all posts
• Repeat until you have 5 posts with no warnings saved

24. DEBUGGING INITIAL POSTS
Confirm your posts
were submitted in
Production
Articles
section of iA config
You need 5

25. SUBMIT FOR REVIEW
• Return to iA config on Facebook
• Review any remaining warnings (5 posts, style etc.)
• Submit for review!

26. PENDING REVIEW
• We made it! Now wait 3 days
• Good time to review and improve iA config

27. TESTINGYOUR IA POSTS
• iA only show on mobile apps and only after your site is
“approved” after review
• Normally: Share a post to Facebook, then view with a
mobile app and click through to iA
• Not an option when you are pending review or when
you haven’t shared the post yet

28. PAGE MANAGER APP
• Facebook Page Manager app
(iOS/Android) lets you preview posts
without them being public
• Use Page Manager to preview and
design your iA while pending review
• Also useful to preview iA day-to-day
without sharing to Facebook

29. PREVIEW IN PAGE MANAGER
Choose your page iA in “…” menu Production posts

30. PREVIEW IN PAGE MANAGER
• See how it will look for
mobile users
• Change iA settings (in WP
or FB), then re-save post to
see changes

31. DEVELOPMENT MODE?
• Sets your site to submit to Development rather than
default Production stream
• Development posts only visible in Page Manager app
and PublishingTools on Facebook site.
• Useful when you are already approved, but want to test
output with different configurations

32. USING DEVELOPMENT MODE
• Enable Development Mode in WP iA settings
• Change a setting (style, transformations)
• Resave an article, which will be submitted to
Development stream rather than Production
• Preview the new version in Development section of
Page Manager app.
• Disable Development Mode in WP iA settings
• Resave the post yet again (for Production) and test

33. iATRANSFORMATIONS
• iA uses a small subset of HTML5 as a strict markup standard
• “Transformations” convert your WP HTML into iA markup
• Creativity needed to find “matching” iA classes for HTML
• Many useful WP transformations are built into the plugin
• Use Custom transformer rules in WP iA settings
• Uses JSON format, not very user friendly
• Can be automated by plugins with PHP

34. • Selector: CSS selector for HTML to be transformed
• Class: iA format to convert it into
• IgnoreRule: Sometimes you need iA to ignore some HTML
entirely
• PassThroughRule: Ignore a HTML tag, but keep it’s
content
iATRANSFORMATIONS

35. TRANSFORMATION EXAMPLE
Converting our <blockquote class=‘pull-quote’> into iA
PullquoteRule:
{"class":"PullquoteRule","selector":"blockquote.pull-quote"}

36. • Errors for invalid markup will show in the WP post editor
• Devise transformations if possible
• Sometimes you just need to clean up HTML
DEBUGGINGTRANSFORMATIONS

37. • Some HTML just needs to be avoided
• Devise alternate means of display that don’t disrupt iA
• Posts with errors will just skip iA, it's okay if occasional posts
remain invalid so they can keep special formatting
EDITORIAL COMPROMISE

38. • Populated by WP Featured Image by default
• Always show at the very top of iA view
• Cannot be duplicated inside the post according toTOS
• Consider disabling Cover Image entirely if you insert your
Featured Image in your posts
APPENDIX: COVER IMAGES
PHP to disable iA cover image

39. • Production/development RSS feed: NO NEVER
• Don’t forget to set up analytics!
• Don’t use Publish articles containing warnings
• Good luck with AMP integration!
APPENDIX: MOARTIPS

40. F******K INSTANT ARTICLES:
HOW DOTHEY WORK?
What is an iA and what does it do?
🦄 Jer Clarke • jerclarke.org
Download these slides:
http://jerclarke.org/instant-articles-wordcamp
Creative Commons Share Alike
http://creativecommons.org/licenses/by-sa/3.0/