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/