How to get your WordPress site on AMP and Facebook Instant in 15 minutes.

TL;DR go install PageFrog right now. It’s free, and totally baller.

Why WordPress AMP and Facebook Instant Matters

You’ve probably seen it by now. Articles in Google search sometimes come with a fancy carousel at the top of the mobile results page, with a nifty little AMP icon. On some Facebook articles in your mobile feed, you’ll notice a tag denoting that they’re “instant”.

Both AMP and Instant Articles denote the same thing: these articles load immediately after you click on them. No delay, no loading time, no nonsense.

Oh, and Facebook Instant Articles were once exclusive to invited publishers. No more – Facebook just opened Instant Articles to everyone.

In a Sea of Changing Options, One Stands Out

There’s several options for getting your WordPress articles on AMP and Facebook Instant. A few weeks ago, in fact, I would have recommended something entirely different: Yoast with Yoast Glue and the Automattic AMP plugin.

No longer.

Now I want you to use PageFrog, because it’s incredible. Not only does it handle both AMP and Facebook Instant automatically, but it provides a super-slick interface in WordPress so you can live-preview your articles as they’ll appear on mobile. It’s so good, I’m using it on this post right now.

How to Set Up PageFrog

After you activate the plugin, there’s a few simple steps to walk through. PageFrog guides you all the way, and you should be done in well under my 15 minute benchmark. Check it out:

When you first activate the plugin, you’ll see the big friendly green setup buttons for FB Instant and Google AMP. Let’s set up Greenlane for both right now, together!

PageFrog AMP Setup

We’ll start with AMP, because it’s a little easier. After clicking Begin Setup, the first thing we’ll be asked to do is download and install the official WordPress AMP plugin from Automattic. You can do the whole thing seamlessly right from PageFrog’s interface. Pretty nifty.

Once you’re done activating the AMP plugin in the new tab that opens, go back to the PageFrog tab and reload. You should see that AMP is now ready!

PageFrog Facebook Instant Pages Setup

Now that Facebook has opened this program to everyone, it’s super-simple to sign up and set it up. Before you hit the button on PageFrog, head on over to Instant Articles and sign up. Agree to the terms, and sign up – it’s really that easy.

After you sign up, Facebook will take you to a configuration page. There’s three steps:

• Set up instant articles
  You’ll have to configure a few things, include roles for admins and templates to customize the look and feel.
  
  
• Submit for review
  You need to submit at least 50 articles as a sample batch for review. Facebook will get back to you within 48 hours.
  
  
• Start publishing
  Well, duh.

Once you’re at the above page on Facebook, you’re going to have to verify your domain. Scroll on down to Tools, and open up Claim Your URL. Paste that thing into your site’s head via WordPress editor and you’ll be good to go.

PageFrog Styling

Now that we’ve got AMP and Facebook Instant Pages set up and ready to go, there’s a few tweaks we should make to the plugin’s settings to make sure we’ve got style. It’s easy, just pop into your new Mobile Formats menu, and choose Styling. The biggest thing to do here is update your logo so we’re not using the WordPress default. We can also tweak fonts and colors, and use the handy-dandy live preview to make sure it looks awesome!

Your logo will need to be a transparent PNG of at least 300 x 300 pixels, although rectangular is the way to go. Remember, it’s also going to show up above your article in the AMP carousel in SERPs.

For tweaking Facebook Instant styling, the plugin is going to direct you to go to the Facebook interface.

Analytics, ads and tracking

Why drive people to your site if you can’t track them? PageFrog makes that easy too. Simply to go Mobile Formats -> Analytics and Mobile Formats -> Ads and tie in your Google services. It’s a quick login and sync, and then make sure you pick the right site and click enable. Once you’re set, it should look like this:

Adding PageFrog to Your Workflow

This is my favorite thing about PageFrog! It integrates seamlessly into your WordPress writing interface, without making a nuisance of itself. After installing PageFrog, you’ll see a “Mobile Preview” section. Totally collapsable, and totally useful. Not only does it show what your page will look like under AMP and Instant Articles, but it even gives you a TinyURL for the preview of the page that’s easy to test on your mobile device!

Final Thoughts

I can’t recommend PageFrog enough. In my testing, on several WordPress sites, it’s worked almost flawlessly. However, there are a few caveats.

In my experience, some of the image resizing can be wonky. Images can sometimes appear a little blurred on mobile devices, and I’m not quite sure how to fix it. I’ve also heard reports of the inline preview pane not working correctly, most famously from the folks over at Yoast.

If you want to leverage AMP on your WordPress site right now, though, give PageFrog a try. As always, remember to back up your site first!

If you give this a shot, or use a different AMP or Instant solution, let me know in the comments.