f******k instant articles: how do they work?

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