f******k instant articles: how do they work?
TRANSCRIPT
F******K INSTANT ARTICLES: HOW DO THEY WORK?
What is an iA and what does it do?
š¦ Jer Clarke ā¢ jerclarke.org
Creative Commons Share Alikehttp://creativecommons.org/licenses/by-sa/3.0/
Download these slides:http://jerclarke.org/instant-articles-wordcamp
JER IS AN EARTHLING WEB DEVELOPER
ā¢ Communications Studies at Concordia University.
ā¢ HTML+CSS since 2003ā¢ Code Unicorn for Global Voices since 2006ā¢ Founded WordCamp Montreal in 2009
āCITIZEN MEDIA STORIES FROM AROUND THE WORLDā
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
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
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
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)
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
WHY TO 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]
DO YOU TRUST FACEBOOK?
DO YOU TRUST ME?
ā¢ 250K iA hits in one day
ā¢ Each one blazing fast
ā¢ No load on our server
GETTING IT SET UPA long series of steps
CREATE A FACEBOOK PAGEā¢ You can figure this out! I believe in you!
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
INITIAL PLUGIN SETUP
ā¢ Choose your page, then accept the terms
ā¢ Your page is now āactivatedā for iA
āthese instructionsā
FACEBOOK iA CONFIG SCREENā¢ Your real home for iA configuration (paired with WP settings)
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
********
********
āCLAIMā YOUR WP SITE URLā¢ In Tools > Connect Your Site of Facebook iA config enter
your site URL to āClaimāit.
********
DEFAULT STYLE TEMPLATEā¢ A style template is required to get approved
ā¢ Edit the default style in the Tools section if iA config
ā¢ 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 STYLE TEMPLATE
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
GET 5 POSTS READY TO 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
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
DEBUGGING INITIAL POSTS
Confirm your posts were submitted in Production Articles section of iA config
You need 5
SUBMIT FOR REVIEWā¢ Return to iA config on Facebook
ā¢ Review any remaining warnings (5 posts, style etc.)
ā¢ Submit for review!
PENDING REVIEWā¢ We made it! Now wait 3 days
ā¢ Good time to review and improve iA config
TESTING YOUR 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
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
PREVIEW IN PAGE MANAGER
Choose your page iA in āā¦ā menu Production posts
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
DEVELOPMENT MODE?ā¢ Sets your site to submit to Development rather than
default Production stream
ā¢ Development posts only visible in Page Manager app and Publishing Tools on Facebook site.
ā¢ Useful when you are already approved, but want to test output with different configurations
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
iA TRANSFORMATIONSā¢ 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
ā¢ 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
iA TRANSFORMATIONS
TRANSFORMATION EXAMPLEConverting our <blockquote class=āpull-quoteā> into iA PullquoteRule:
{"class":"PullquoteRule","selector":"blockquote.pull-quote"}
ā¢ Errors for invalid markup will show in the WP post editor
ā¢ Devise transformations if possible
ā¢ Sometimes you just need to clean up HTML
DEBUGGING TRANSFORMATIONS
ā¢ 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
ā¢ Populated by WP Featured Image by default
ā¢ Always show at the very top of iA view
ā¢ Cannot be duplicated inside the post according to TOS
ā¢ Consider disabling Cover Image entirely if you insert your Featured Image in your posts
APPENDIX: COVER IMAGES
PHP to disable iA cover image
ā¢ 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: MOAR TIPS
F******K INSTANT ARTICLES: HOW DO THEY 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 Alikehttp://creativecommons.org/licenses/by-sa/3.0/