Watch the video of my talk!
Here’s the slides embedded from Slideshare.
Key links:
- Facebook Instant Articles
- Instant Articles for WP WordPress plugin
Assumptions
- You run your own WP site
- Mobile traffic is key
- Facebook is a source of traffic for your content
- 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 very fast in Facebook mobile apps
- Replaces WP theme for posts viewed from Facebook mobile
- Plugin sends posts to Facebook as raw data when saved
- Facebook stores post content and renders them for mobile visitors
- Does not “share” your posts, you do that the normal way with normal URL
- Only applies to mobile apps, but that is the most common traffic
Okay but what is an AMP again?
- Alternate version of a URL hosted on your site
- AMP is 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?
- You hand control of your content to Facebook
- Violates open web principles (walled garden)
- You are subject to Facebook’s whims
- 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 use iA?
- [Promo image] https://media.fb.com/2016/04/12/instant-articles-now-open/
- Actually super fast
- More useable and beautiful than most sites on mobile
- Only ever 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]
Steps to set up!
Create a FB page
- You can figure this out, I believe in you!
Initial plugin setup
- Install Instant Articles for WP plugin and activate
- Click „these instructions“ link to iA page activation screen
- Choose your page, then accept the terms
- Your page is now „activated“ for iA
Go to your Instant Articles Configuration screen inside Facebook (steps re-used later)
- In Facebook visit your page
- Click on Publishing Tools at the top
- Click on Instant Articles ? Configuration in the sidebar
- This screen is your real dashboard for iA setup, you will visit it a lot.
Get your facebook „Page ID“ for the plugin settings screen
- In the Step 1: Set Up Instant Articles section, click on the Connect Your Site:Authorize your site link
- First, insert your site URL in the Your Registered URLs field.
- Copy the Page ID from the WordPress Plugin Users section
- Return to wp-admin and the Facebook Instant Articles Settings screen.
- Paste the ID you copied into the Facebook Page ID field.
- Now the iA integration should be working, and you should see the iA metabox whenever you edit a post!
Set up a default Style Template
- A style template is required to get approved, but can be very simple.
- Go to your Instant Articles Configuration screen inside Facebook (see above)
- Find the Tools section (below Initial Setup) and the Styles subsection.
- Click on the default style to edit it.
- The only MANDATORY thing is to have a Logo set for the article header (690x132px)
- Configure the rest by preference, you can change it later anytime
- Just make sure you have the Logo set up, so that you don’t get errors about it below.
Get 5 posts ready to publish Submit for Review
- Overarching goal: Get the Submit for Review button in the wp-admin Facebook Instant Articles Settings screen to light up blue so you can push it!
- We need to have 5 posts that have been submitted to iA by being saved after you have set up the plugin.
- You can use existing posts, but they have to be re-saved
- Edit your recently published posts and find the Facebook Instant Articles metabox
- Move the metabox to just below the post for convenience, at least temporarily
- Deal with any global errors you see that apply to all posts (see transformation debugging later)
- Have 5 posts ready with no errors
Submit for Review!
- Return to iA settings screen in Facebook
- Find the Submit for Review button
- Deal with any remaining errors (sorry)
- Submit!
Testing your iA posts
-
- iA only show on Facebook mobile apps, so testing is tricky
- Basic: Share a post to Facebook, then view with a mobile app
- Facebook Page Manager app (ios/Android) lets you preview posts without them being live on FB.
- Use Page Manager to preview and design your iA while your review is pending
- Also useful to preview iA without sharing to facebook
- Getting to Page Manager previews:
- Open Page Manager
- Find your page
- … (more)
- Instant Articles
Development mode
- Sets your site to submit to Development rather than Production stream
- Posts only visible in Page Manager app and Publishing Tools on Facebook site.
- Useful when you are already approved, but want to test publishing with different configurations
- Using Develpopment mode:
- Enable Development Mode in wp-admin Instant Articles Settings
- Change some settings (Style, transformations)
- Resave an article, which will be submitted to Development rather than updating the Production version that visitors see.
- Preview the new version in Development section of Page Manager app.
- Disable Development Mode in wp-admin Instant Articles Settings
- Resave a post yet again, now submitting to Production with new settings
- Check that the new post version is as expected in Page Manager app
Transformations
- iA uses a small subset of HTML5 as a strict markup standard
- Transformations convert your standard HTML into iA markup
- They can convert to an iA Format, or remove content entirely
- Many useful WP transformations are built into the plugin
Transforming your problems into solutions
- Transformations are added in the Custom transformer rules section of wp-admin iA settings
- Uses JSON format, not very user friendly
- Can be automated by plugins but not easy
- Often you just need to remove items added by plugins (sharing tools)
- Other times your custom styles (.pull-quote) can be converted into matching iA Formats
Debugging transformations
- Errors for invalid markup will show in the WP post editor
- Posts with errors just won’t submit, so it’s okay if some posts have un-transformable content
- Forcing a post with errors to submit will mean the invalid content is just missing.
- Establish editorial standards about how to solve common transformation errors
- Some valid HTML combinations must be avoided to use iA consistently
Cover Images
- Populated by WP Featured Image by default
- Always show at the very top of posts
- By rule, cannot be duplicated inside the post
- Consider disabling Cover Image entirely if you insert your Featured Image in your posts
Tips
- Production/development RSS feed: NO NEVER
- Always have featured images!
- Good luck with AMP integration!