From WordPress to Apple News, Instant Articles, and AMP

Apple: Send us your content in our special format and we’ll make it available in Apple News and more people will read it and be happy with your brand… wink wink.

Google: Link up this JavaScript library and format your content in this special way, and we’ll hook you up in search results… wink wink.

Facebook: Format your content in our special way and send it over and it will load super fast and people will love it and be happy with your brand… wink wink.

Me: Hey, whatever you want. As long as…

  1. It’s not very much work
  2. The content’s canonical home is my website

I just want people to read and like CSS-Tricks. Ideally I can monetize on (good, curated) sponsored content that makes its way to all these channels anyway.

WORDPRESS → APPLE NEWS

There is a WordPress plugin: Publish to Apple News. It formats your content automatically into the “Apple News Format” (which is actually JSON!).

But in order to actually publish that JSON to Apple News, you’ll need to sign up as a News Publisher. It’ll probably take a little time to get approved, but I imagine any halfway decent blog will be. I’ve seen some pretty garbagey stuff on Apple News so I don’t think the standards are very high. I think it took about a week for CSS-Tricks.

Once you’re approved, you manage everything through the iCloud website. You can add team members, upload branding images, set up the advertising, see analytics, and things like that.

logopiece

What you really need in there is your API Key information, which is under Channel Info > API Key. You put those values in the WordPress admin under Settings > Apple News.

applenewsapi

This settings area also offers a good amount of control over the design of the page. Fonts, colors, spacing, ads, etc. Once you have the plugin configured and you’ve published some articles, you’ll see them in the Apple News dashboard in the WordPress admin.

applenewsstatus

All goes well, you’re on Apple News!

apple-news

ISSUES I’VE RUN ACROSS WITH WORDPRESS AND APPLE NEWS

Sometimes I get the error There has been an error with the API. Please make sure your API settings are correct and try again: INVALID_DOCUMENT, INVALID_DOCUMENT and it’s not entirely clear why. Sometimes I even get an error about my API key that makes even less sense. That article just doesn’t go to Apple News.

It strips some HTML tags. Namely <pre> and <code>, which can make reading an article with code blocks a litttttle awkward.

applenewsissue

I’d love to have those turned into something like <p style="white-space: pre; font-family: mono-space;"> and <span style="font-family: mono-space;"> respectively (assuming that’s allowed), but I’m not quite sure how to go about that in a smart way that isn’t altering the core plugin.

As a pretty niche site, I don’t see a heck of a lot of audience for CSS-Tricks on Apple News. The past month shows <300 unique viewers and <800 total views. I imagine a big time publisher that is a default choice when setting up Apple News does pretty well. I know I like reading big sites through Apple News.

I guess that makes me feel better about the fact that I haven’t been able to figure out how to enable advertising yet. Every time I try to do “Step 1” which is “Enable iTunes Connect” it fails and takes me to the iTunes Connect podcast area with no error or information about what happened.

There isn’t really a validator for the Apple News format. Other than that the JSON needs to be valid of course.

You can preview articles though, through the official News Preview app. I found this a little tricky to get going. The plugin offers downloads of the .json files for your articles, but if you attempt to drag-and-drop them onto News Preview, you’ll get an “X” and zero useful feedback. I’m not sure how much of this was vital to get it going, but I…

  1. Upgraded to Xcode 8 (beta)
  2. Renamed the article-xxxx.json into article.json
  3. Put it in a folder with all references images at the same level
  4. Opened the simulators first, then opened Apple News and went through the basic intro onboarding steps

That seemed to work:

seemedtowork

WORDPRESS → INSTANT ARTICLES

There is an “official” plugin for WordPress and Facebook Instant Articles as well: Instant Articles for WP. I found it a bit confusing and ultimately went for Simple Facebook Instant Articles, which simply creates an RSS feed that Facebook can digest into Instant Articles.

rssfeed

Like Apple News, you need to Apply for Instant Articles. I was denied the first couple of times I applied, because just like Apple News, my <pre> and <code> tags were being stripped which caused a discrepancy in what appears on the web and what makes it over to Instant Articles. That’s why I ended up switching to the “Simple” plugin, which didn’t strip those, and apparently are perfectly acceptable.

Applying involves sending over 5 articles for review and waiting about a week. You can monitor that and do all your IA setup right from your Facebook page under Publishing Tools > Instant Articles.

publishingtools

ISSUES I’VE RUN ACROSS WITH WORDPRESS AND INSTANT ARTICLES

It took me a little bit to even understand how Instant Articles worked. How do I see them? How do other people see them? I would go to the CSS-Tricks Facebook page (on mobile, Instant Articles, and Apple News for that matter, are mobile device only things) and click a link and it would just load the website.

Facebook has an iOS app called Facebook Pages Manager that allows you to preview articles in IA:

ia-in-pages

Maybe it just took a little time or something, but eventually it start working for me. Facebook must do some kind of URL matching like “Does this link I’m about to go to have a matching valid Instant Articles page? Yes? Show that.”

fbia

The design options are more limited, but I guess that’s because IA works across more mobile platforms than Apple News does. You basically have your choice between Georgia and Helvetica Neue and picking some colors.

I haven’t sunk a ton of hours into it, but so far I’ve found the advertising integration very confusing. Every article I have warns me:

Default Audience Network Ad Template is Being Used: No custom Ad Template was specified, therefore the article is using the Default Audience Network Template, which allows for automatic ad placement. You can always set up your ad template or disable automatic ad placement to clear this warning. Refer to Ads & Analytics in the Instant Articles documentation for more information.

Manually inserting ad code doesn’t stop that error, although I was able to get an ad to show up by manually copy and pasting ad code into the article.

copypastecode

I think the “automatic insertion” is probably the way to go if I could get that working. Or altering the RSS plugin to insert some specified code somewhere in the article.

WORDPRESS → AMP

Automattic themselves have created the official plugin for AMP: AMP for WordPress.

AMP is similar to AN and IA in that it’s a special format.

AMP is different in that you don’t have to move that format over to anyone else’s system. It just lives on the web as a URL just like the actual article.

With this plugin installed and activated, all your articles can have /amp/ appended to the end of the URL and be served up as a valid AMP page:

validamppage

That makes this the easiest of the three to get going. That screenshot above though is on a desktop browser, which isn’t really where Amp is used. Like the others, it’s more of a mobile thing. Google will be (is?) indicating Amp pages in search results. It looks like this:

ampsearchresults

I took that screenshot by using this search URL that Google shared in their announcement.

And a GIF of it working:

amp-working

 

ISSUES I’VE RUN ACROSS WITH WORDPRESS AND AMP

When I was first testing Amp, the plugin seemed to work flawlessly. Any article I looked at with /amp/ at the end of the URL would load right up seemingly without error. But most articles on CSS-Tricks wouldn’t indicate they were Amp pages in the SERPs, and indeed would just load the normal website. A few pages did work though.

It turned out that the pages that didn’t work were failing validation. The little tiny dumb little error is that I use <pre rel=""> tags and Amp doesn’t like those rel attributes. I shouldn’t be using those like I do, but alas, I do.

I had to write a custom sanitizer in order to remove those rel attributes and get the pages validating. This is exactly the kind of thing I wish I knew how to do in the Apple News plugin in order to get the <pre> tags working at all. It’s also similar to what the the official Instant Article plugin offers as Custom Transformations.

THE ARGUMENT IS MUCH DEEPER THAN I PRESENTED AT THE OPENING OF THE ARTICLE

I’m aware of that.

If I was the Washington Post (or some other big time publisher), the decision to publish in these formats is a much more nuanced choice. They have quite the balancing act to figure out:

  • What will they lose in web traffic and thus web advertising sales?
  • What will they stand to gain in platform-specific views and the advertising sales there?
  • How much effort does it take to do this truly well?
  • What would they stand to gain by an equal amount of effort put into improving the native web experience?
  • What do they stand to lose if they do nothing?

These are nearly impossible questions to answer. That’s why it feels like a decently-smart move to go with sponsored content and a low-effort-ish, publish-everywhere, web-first system.

Comments

  • chriscoyier

    I mentioned that the Apple News plugin didn’t support <pre> tags… that was a big enough problem that I talked to the team behind the plugin and we ultimately got it working. I submitted a pull request: https://github.com/alleyinteractive/apple-news/pull/228 – which shhhhooould make it into the next version.

  • It’s sad to see that a blogger who became famous with covering web standards now recommends proprietary formats by large corporations. Just when you thought Microsoft’s IE, Adobe Flash and the likes have been a good lesson…

    • chriscoyier

      Uh OK, I’m sorry I make you so sad.

      I write on my *website*, which is just chock-dang-ol-full of web standards. That’s where it’s always been and always will. People can read my site over RSS. Another open standard. Lots of people do. Now it goes out over other distribution channels as well, some of which use open standards (like AMP), or ask for content within the syntax of an open standard (like Apple using JSON and Markdown). Those will come and go, the web will remain.

      Like the [indie web](https://indieweb.org/) says:

      Your articles and status messages can go to all services, not just one, allowing you to engage with everyone.

      • The Web will remain but how open will it be when even people like you support and promote walled gardens?

    • I don’t think the comparison between proprietary publishing formats with IE and Flash is fair. The issue is not necessarily with proprietary formats or apps but with the developers/designers who choose practices that aren’t future-proof. Many developers simply disregarded standards and multi-platform compatibility when they built sites and apps primarily for IE and Flash. They chose to forego alternatives that complied with web standards.

      These proprietary publishing formats don’t get in the way of web standards as it was possible to do with IE and Flash if you weren’t careful. They’re more like add-ons than boxed-in frameworks — you don’t have to compromise SEO, web standards, or future-proofing. The only issue I see is that these formats add yet more layers that developers have to keep up with. It would be great if we only had one common format these companies could use for their services. Perhaps HTML will solve this problem in the future.

      • Right now they may be “add-ons” but once enough people are trapped they will become “standard” dictated by the gatekeepers.

  • Interesting read. Seems like the AMP are worth figuring out at least and were it not for the sample code in the posts some complexity is removed.

  • Great article Chris, brave new world!

    Your site seems to rely a lot less on ads for revenue but for those who do (like me) these new formats are quite scary. As far as I can tell, AMP seems most open to using existing ad setups while Facebook and Apple are very restrictive. What do you think?

  • a very nice article.

    Stromwandler

  • undek

    Hey @chriscoyier:disqus , here is Michael from PressPad. We actually make apps for WordPress bloggers (www.presspadnews.com), maybe you’d like to try it? We can make you a free demo so you can check how it works :)

Related Articles