Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,689 views

Published on

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”.

Published in: Technology
  • Be the first to comment

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

  1. 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. 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. 3. “CITIZEN MEDIA STORIES FROM AROUNDTHE WORLD”
  4. 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. 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. 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. 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. 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. 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. 10. DOYOUTRUST FACEBOOK?
  11. 11. DOYOUTRUST ME? • 250K iA hits in one day • Each one blazing fast • No load on our server
  12. 12. GETTING IT SET UP A long series of steps
  13. 13. CREATE A FACEBOOK PAGE • You can figure this out! I believe in you!
  14. 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. 15. INITIAL PLUGIN SETUP • Choose your page, then accept the terms • Your page is now “activated” for iA “these instructions”
  16. 16. FACEBOOK iA CONFIG SCREEN • Your real home for iA configuration (paired with WP settings)
  17. 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. 18. “CLAIM”YOUR WP SITE URL • In Tools > Connect Your Site of Facebook iA config enter your site URL to “Claim”it. ********
  19. 19. DEFAULT STYLETEMPLATE • A style template is required to get approved • Edit the default style in the Tools section if iA config
  20. 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. 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. 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. 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. 24. DEBUGGING INITIAL POSTS Confirm your posts were submitted in Production Articles 
 section of iA config You need 5
  25. 25. SUBMIT FOR REVIEW • Return to iA config on Facebook • Review any remaining warnings (5 posts, style etc.) • Submit for review!
  26. 26. PENDING REVIEW • We made it! Now wait 3 days • Good time to review and improve iA config
  27. 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. 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. 29. PREVIEW IN PAGE MANAGER Choose your page iA in “…” menu Production posts
  30. 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. 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. 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. 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. 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. 35. TRANSFORMATION EXAMPLE Converting our <blockquote class=‘pull-quote’> into iA PullquoteRule: {"class":"PullquoteRule","selector":"blockquote.pull-quote"}
  36. 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. 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. 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. 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. 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/

×