How to Implement Facebook Instant Articles and Google AMP on WordPress

How to implement Google AMP and Facebook Instant Articles on WordPress

Majority of the users now browse the Internet from their mobile devices and more often than they do use their personal computers. The modern mobile devices are technologically advanced and let users perform almost all the tasks they can perform using PC. The advent of 4G and 5G have made faster Internet available on mobile devices that let users interact with web instantly from anywhere.

While users getting more comfortable browsing web using their mobile devices, they also prefer to read articles using their mobile phones and also expect the similar experience they have while reading or browsing using a PC. They prefer pages being loaded instantly without any delays as they would on a computer. Websites and blogs which are not optimized for mobile fail to capture a large audience as visitors do not like to wait for slow loading pages.

In order to address this issue, we came up with two most effective solutions to overcome slow pages on mobile devices. This includes Facebook Instant Articles and Google Accelerated Mobile Pages (AMP). We will explore each step-by-step and learn how to integrate them into a WordPress site.

Implementing Facebook Instant Article (IA) on WordPress

Bloggers and other content producers can upload their content to Facebook instant article service. These Instant Articles can be loaded 10 times faster than a standard mobile web browser. These instant articles are easy to read, share and are also accessible to those readers who have slower mobile Internet.

How Instant Article Works?

The Instant Article is an HTML document optimized to work best on mobile devices. It uses a standardized markup language for page styling and to add interactivity.

Who Needs Instant Articles?

Facebook Instant Articles can be used by any website which has mobile visitors and it’s more effective for content producing websites such as blogs and news as their readers often read favorite articles while on the go.

Let’s see how Facebook Instant Article (IA) can be integrated into a WordPress site. But before we start, make sure we have the following things ready:

Top Article:  How Social Media Can Affect You in Your Criminal Case

When signing up for Facebook Instant Article, choose your desired page from the list and click on Access Instant Article Tool button.

image5

On the next page, navigate to Connect Your Site section to get your Page ID.

image3

For this tutorial, I am using a Digital Ocean server launched on Cloudways managed cloud hosting.

Log in to your WordPress Dashboard and go to Plugins. Click on Add New and find Instant Articles for WP plugin.

Instant Article WP Plugin

Install the plugin and activate it. Once the plugin is activated, click on Instant Articles link appeared on the sidebar.

image11

This opens the window to configure Instant Articles and the first thing you need to enter is your Facebook Page ID. Copy the ID from your Facebook page and paste it here. Click on Save Changes to apply the changes.

Once your Instant Article feed is approved, you can start sharing the article by including the link in your post and it will be available to users browsing from mobile devices.

The theme provides various options to style your Instant Articles as well as to add copyright text. Another feature which I would like to highlight here is to show Ads on your Facebook Instant Article. The option is available inside Ads section of the plugin settings page.

image7

It lets you choose from three options to show ads:

  • Facebook Audience Network: These ads pop up on Facebook approved apps and websites.
  • Custom iframe URL: Through this option, user can add source URL for Direct Sold Ads.
  • Custom Embed Code: Here user can embed the code for displaying ad.

Implementing Google AMP on your WordPress Site

We have already seen how we can optimize our articles for better viewing and readability on Facebook. It is not necessary that all visitors visiting sites to read some kind of article. They might be interested in looking at the services a company has to offer or would like to see their portfolio or would like to learn something new or are simply visiting it to get their contact information.

For whichever the reason users are visiting your site, they should always get faster loading pages on their mobile devices or chances are that they might prefer getting information from some other websites. To ensure faster loading pages, we take advantage of Google Accelerated Mobile Pages (AMP).

Top Article:  Migrate Your WordPress Site With Migrate Guru

The main objective of AMP is to load web pages faster on mobile devices. This an initiative taken by Google, Twitter, WordPress, and LinkedIn etc to optimize user experience. AMP fastens the pages by reducing the usage of JavaScript and by using minimum HTML and inline CSS. AMP uses many techniques to load pages almost instantaneously.

Adding Accelerated Mobile Pages to WordPress requires only a few steps. Our first step would be to install and activate AMP for WordPress plugin.

AMP WordPress Plugin

Once the plugin is activated, navigate to Appearance and click on AMP.

image6

This will open the visual editor to display the look of your web page on mobile devices.

visual editor

Now close the editor and head back to Dashboard. Click on AMP from the side menu to open plugin general settings. Here you can apply AMP on pages as well.

image9

By adding ‘/amp/’ at the end of the URL, you can observe the AMP version of your web page, e.g.

https://example.com/blog/funnycats/amp/

Also, visitors coming to your site using Google search will also see the optimized version of your web page.

This is a very basic plugin which creates AMP pages effectively. However, this plugin does not provide any option to integrate ads into AMP pages. To do so, you may also use another WordPress plugin AMP for WP – Accelerated Mobile Pages

After installing the plugin, go to plugin settings page and navigate to Advertisement tab for options. This plugin supports dedicated Ad slots which can be used on AMP-powered pages.

image2

Wrapping Up!

There is no secret that everybody likes fast websites and in this article, we have learned how we can take advantage of two most effective tools to create faster sites for visitors using mobile devices. The importance of fast loading sites can be judged by the fact that all WordPress.com sites have AMP enabled by default.

Charlie has been building WordPress themes, reviewing web hosts and utilizing social media since their respective inceptions.

Leave a Reply