Enable Facebook Instant Articles on your WordPress site.

Overview

Build Status

Instant Articles for WP

Enable Instant Articles for Facebook on your WordPress site.

Plugin activity

Throughput Graph

Description

This plugin adds support for Instant Articles for Facebook, which is a new way for publishers to distribute fast, interactive stories on Facebook. Instant Articles are preloaded in the Facebook mobile app so they load instantly.

With the plugin active, a new menu will be available for you to connect to your Facebook Page and start publishing your Instant Articles. You'll also see the status of each Instant Articles submission on the edit page of your posts.

A best effort is made to generate valid Instant Article markup from your posts' content/metadata and publish it to Facebook. The plugin knows how to transform your posts' markup from a set of rules which forms a mapping between elements in you source markup and the valid Instant Article components. We refer to this “glue” between the two as the Transformer Rules.

Built-in to the plugin are many pre-defined transformer rules which aims to cover standard WordPress installations. If your WordPress content contains elements which are not covered by the built-in ruleset, you can define your own additional rules to extend or override the defaults in the Settings of this plugin, under: Plugin Configuration > Publishing Settings > Custom transformer rules.

Access to Instant Articles

The current criteria for access to Instant Articles are:

  • your Facebook Page must have an established presence of at least 90 days
  • your content adheres to the Instant Article Policies

Before your Instant Articles can be published on Facebook, your feed must undergo an initial review and approval. Facebook requires a minimum number of 10 articles in your feed before being eligible for review. The review process checks that your draft Instant Articles are properly formatted, have content consistency with their mobile web counterparts, and adhere to the community standards and content policies.

It's important to note that if you use meta fields to add extra text, images or videos to your Posts, Facebook will expect you to add these to your Instant Articles output too. This plugin includes hooks to help you do that.

See Facebook's documentation for full details of the submission process.

Once your feed has been approved, new posts will automatically be taken live on Instant Articles, and existing posts will be taken live once you update them. In order to stay in the Instant Articles program, you must remain active by creating new content and maintaining a minimal readership.

Installation

  1. Run composer install on the root of the plugin folder. Make sure you have Composer installed.
  2. Upload the folder to the /wp-content/plugins/ directory
  3. Activate the plugin through the 'Plugins' menu in WordPress

Frequently Asked Questions

Why is there content from my post missing in the generated Instant Article?

More likely than not, this is because there is markup in the body of your post that is not mapped to a recognized Instant Article component. On the “Edit Post” screen for your post, look for additional information about the transformed output shown within the Facebook Instant Articles module located at the bottom of the screen.

Why doesn't my post appear in the list of Instant Articles in the publisher tools? Your posts are imported to your library when they are shared on Facebook for the first time.

Alternatively, you can trigger a manual scrape by pasting your URL on our Share Debugger

Only Instant Articles with URLs in domains you have claimed will show up in the Publishing Tools section. In the Instant Articles module for my post, what does the “This post was transformed into an Instant Article with some warnings” message mean?

When transforming your post into an Instant Article, this plugin will show warnings when it encounters content which might not be valid when published to Facebook. When you see this message, it is recommended to resolve each warning individually.

What does the “No rules defined for ____ in the context of ____” warning mean?

This plugin transforms your post into an Instant Article by matching markup in your content to one of the components available in Instant Articles markup. Although the plugin contains many built-in rules to handle common cases, there may be markup in your post which is not recognized by these existing rules. In this case, you may be required to define some of your own rules. See below for more details about where and how.

How do I define my own transformer rules so that content from my site is rendered appropriately in an Instant Article?

Your custom rules can be defined in the Settings of this plugin, under: Plugin Configuration > Publishing Settings > Custom transformer rules. More detailed instructions about all the options available is documented in the Custom Transformer Rules section of the Facebook Instant Articles SDK.

I know of a custom transformer rule which is pretty common in the community. How can it be included by default in the plugin?

You can propose popular transformer rules to be included in the plugin by suggesting it on GitHub.

How do I post articles to Instant Articles after plugin is installed?

In order to import your posts to your Instant Articles library on Facebook you need to Connect Your Site first. Then either share your posts on your page or use the Sharing Debugger to scrape them. After you have 10 articles imported, you will be able to submit them for review.

How do I change the feed slug/URL if I'm using the RSS integration?

To change the feed slug, set the constant INSTANT_ARTICLES_SLUG to whatever you like. If you do, remember to flush the rewrite rules afterwards. By default it is set to instant-articles which usually will give you a feed URL set to /feed/instant-articles

How do I flush the rewrite rules after changing the feed slug?

Usually simply visiting the permalinks settings page in the WordPress dashboard will do the trick (/wp-admin/options-permalink.php)

Development Environment

You are more than welcome to help us to make this plugin even better!

Setup SDK and WP to use the Github code

Most of development and debugging we use the master or any feature branch for the development of WP plugin. Sometimes it needs specific or newest version of the SDK to match all the new features that are release candidates to every new release of SDK and WP plugin.

The SDK is also under development @ GitHub: https://github.com/facebook/facebook-instant-articles-sdk-php

Pre-requisites

  • Have PHP installed (you can install with homebrew)
  • Have WebServer installed (you can use MAMP)
  • Have WP installed (downloading from wordpress.org)

Setup

Clone both repositories into your developer folder (ex: ~/instant-articles).

git clone [email protected]:Automattic/facebook-instant-articles-wp.git
git clone [email protected]:facebook/facebook-instant-articles-sdk-php.git

Build both source folders:

cd facebook-instant-articles-sdk-php
composer install

cd ../facebook-instant-articles-wp
composer install

Now remove the build from your WordPress, so it will include the code you've just built.

rm -rf vendor/facebook/facebook-instant-articles-sdk-php
ln -s ~/facebook-instant-articles-sdk-php vendor/facebook/facebook-instant-articles-sdk-php

and now you can create a link inside your /wp-content/plugins to your folder

ln -s ~/facebook-instant-articles-wp wp-content/plugins/facebook-instant-articles-wp
Comments
  • Website Verification

    Website Verification

    I am getting this error while trying to submit my website URL "The provided URL is not being accepted because the site has minimal readership, which violates the Instant Article Policies (https://developers.facebook.com/docs/instant-articles/policy/). Please provide a different URL."

    I install instant article plugin, kept page ID into it and everything done right. My blog is https.

    status: help wanted status: feedback requested 
    opened by Mohan2266 112
  • 'Submit for Review' causes permissions error

    'Submit for Review' causes permissions error

    Steps required to reproduce the problem

    1. Connect app and page
    2. Click 'Submit for Review'

    Expected Result

    • articles submitted for review

    Actual Result

    • instant_articles_setup_wizard_ _sephora_promo_code_club_ _wordpress

    ** Version Info **

    • Plugin version: 3.1.3
    • WordPress version: 4.6.1
    • PHP version: 5.5.9
    opened by peterdalydickson 54
  • Instant Article does not have any content

    Instant Article does not have any content

    It appears that Facebook successfully imported the IA using the RSS feed, but they're showing an error message on every imported item.

    General Errors: Empty Instant Article: The Instant Article does not have any content.

    image

    Here's the general view in the Page settings:

    image

    And the RSS feed URL is https://clemaroundthecorner.com/feed/instant-articles.

    opened by jclanoe 30
  • Google analytic is not registering my traffic that is coming from fb instant articles

    Google analytic is not registering my traffic that is coming from fb instant articles

    Google analytic is not registering traffic coming from fb instant articles. i hope that I have configured it properly. Please check the screenshot of my settings and confirm me if these are fine. Note: I didn't enclosed analytic code in iframe tags.

    screenshot from 2016-06-15 12 33 42

    type: bug 
    opened by dev-erem 24
  • Integration support: Instagram Embeds

    Integration support: Instagram Embeds

    Add default support for the markup for Instagram Embeds.

    Source Markup

    <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
      <div style="padding:8px;">
        <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.5% 0; text-align:center; width:100%;">
          <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div>
        </div>
        <p style=" margin:8px 0 0 0; padding:0 4px;">
          <a href="https://www.instagram.com/p/BAXbKP1POQe/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">📸 @natthaponwuttipetch</a>
        </p>
        <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">
          A photo posted by Ann Hathairat Vidhyaphum (@annvidh) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-01-10T16:56:06+00:00">Jan 10, 2016 at 8:56am PST</time>
        </p>
      </div>
    </blockquote>
    

    References: https://wordpress.org/support/topic/instagram-embeds-not-wrapped-in-op-social-tags?replies=4

    compat: 3rd party 
    opened by demoive 24
  • IA version of post doesn't update after being resaved

    IA version of post doesn't update after being resaved

    Steps required to reproduce the problem

    (UPDATED: Previously I described the old procedure where posts were automatically sent to FB at publish time, because there was no announcement that this had been removed)

    1. Publish a post and share it to facebook so IA is published and shows up in Page Manager etc.
    2. Edit the post and change content
    3. Re-save the post and check the IA version

    Expected Result

    Previously, this worked as it should, and the post's IA version would be updated and you'd see the new content in Page Manager and in the Facebook mobile app.

    You could also see it had been updated in the "Production Articles" section of "Publishing Tools" in the FB page admin.

    This meant that critical updates and corrections to articles would be reflected in the IA version, and Facebook users saw the truth.

    Actual Result

    IA version of the post is never updated. In Page Manager/FB mobile app the content never updates.

    Additionally, in "Production Articles" section of "Publishing Tools" I can see that the Last Updated time never updates.

    Needless to say this is wildly horrifying as a publisher. Our authors update posts with the expectation that their updates will be seen by all visitors, and in this case very likely most of our visitors will see the uncorrected IA version.

    Please confirm that this is a problem specific to us, because if it effects all users it is a disaster.

    @see WP Forum Thread from Dec 2017 where a user has this same problem of IA not updating

    Version Info

    Please state exact versions, not latest or new.

    • Plugin version: 4.0.6
    • WordPress version: 4.9.4
    • PHP version: 7.0.23
    type: enhancement 
    opened by jerclarke 23
  • <figcaption>ALT TEXT</figcaption>

    ALT TEXT

    Sometimes im getting my ALT TEXT of my images inside the

    and its showing up in the instant articles.

    PS I never use captions, so it takes sometimes the ALT as caption pretty much

    Didnt happen in all articles but in some and I cant find why and I end up getting errors in the IA production panel like:

    <figure><img src="http://www.example.com/wp-content/uploads/2016/04/15-CREEPY-EASTER-BUNNYS-2-646x750.jpg"><figcaption></figcaption></figure><h2>3. ¡Prometemos no portarnos mal!</h2>
    The HTML element does not contain any text: Avoid including empty HTML elements
    
    type: bug 
    opened by gabu69 23
  • Server crashing on activating this plugin

    Server crashing on activating this plugin

    Steps required to reproduce the problem

    1. When Plugin is activated
    2. Deactivation of plugin solves the issues.
    3. Currently, Theme is Hestia.

    Expected Result

    • This plugin needs to work fine with all the other plugins.

    Actual Result

    • Server is crashing The server ran out of resources, mostly CPU, RAM, I/O Usages runs out of memory.

    Temporary Fix: Activating CloudFlare DDoS (I'm Under Attack) Protection solves this issue.


    Version Info

    • Plugin version: Latest
    • WordPress version: Up-To-Date
    • PHP version: 5.1
    status: feedback requested 
    opened by codeslane 22
  • Footer Credit html code escaped

    Footer Credit html code escaped

    Why need to esc_html() if Facebook guidelines permit the use of <p> tags within <aside>? How about hyperlink <a>?

    https://github.com/Automattic/facebook-instant-articles-wp/blob/master/template.php#L114

    opened by abdusfauzi 22
  • conflict gallery

    conflict gallery "carousel" with the plugin

    I have a problem. I use the plug-in Gallery Carousel Without JetPack for the Gallery on the website. For proper display of thumbnails in the record I have set up a special display of photo size. 205x205 px

    add_filter( 'shortcode_atts_gallery', 'meks_gallery_atts', 10, 3 );

    function meks_gallery_atts( $output, $pairs, $atts ) {

    $output['size'] = 'gallery';

    return $output;

    }

    But now in my facebook photos transferred 205x205. how to do so, that would appear in the news and in the miniatures 205/205 facebook selected for full-size photos?

    I'm using the latest version of WordPress and plugins

    type: enhancement component: transformation 
    opened by lubimow 20
  • Embed filters affecting content outside of Instant Articles feeds

    Embed filters affecting content outside of Instant Articles feeds

    The FBIA plugin adds several filters. Example: in themes/vip/plugins/facebook-instant-articles-2.11/embeds.php, on line 54:

    add_filter( 'embed_oembed_html', 'instant_articles_embed_oembed_html', 10, 4 );
    

    In the function instant_articles_embed_get_html(), the HTML gets wrapped in a div like so:

    $html = sprintf( '<div class="embed">%s</div>', $html );
    

    This code currently affects content in regular web views. It should only affect content in instant articles feeds.

    type: bug [Status] Stale [Status] Autoclosed 
    opened by paulschreiber 19
  • Refactor the IA rendering for OG

    Refactor the IA rendering for OG

    Refactor the whole implementation of the IA Markup Generation for the OG Ingestion, to be more in line with the way it was done in the IA->AMP.

    This would include, but not limited to:

    • [ ] Creating a class for the whole code
    • [ ] Moving it to a separate .php file
    • [ ] Moving the ::Init() code to the main plugin php to make it more explicit
    • [ ] Renaming ia_markup() method to render_ia()
    • [ ] Adding filters and hooks

    See #687 for a similar issue

    type: enhancement 
    opened by vkama 0
  • Move validate_json() to the SDK

    Move validate_json() to the SDK

    Move the Instant_Article_AMP_Markup::validate_json() to the extensions SDK.

    This is a helper function that should be provided by the SDK, maybe even rename it to validate_style() to encapsulate the behaviour.

    opened by vkama 0
  • Extract the logic from should_submit_post()

    Extract the logic from should_submit_post()

    Extract the logic from the Instant_Article_Post::should_submit_post() method that checks several conditions for not outputting an IA to OG (like autosave, on draft, etc).

    This is useful to be used in other parts of the plugin, like the IA->AMP conversion and should be moved somewhere appropriate and with a more suitable name

    type: enhancement 
    opened by vkama 0
  • Refactor of markup_version()

    Refactor of markup_version()

    Refactor should include:

    • [ ] Renaming it to render_amp()
    • [ ] Adding hook like: before_amp_rendering / after_amp_rendering
    • [ ] Making a filter so one can intercept the markup before the actual rendering
    • [ ] calling wp_die() instead of die()
    opened by vkama 0
  • Where do we learn about Analytics 3rd Party Integration?

    Where do we learn about Analytics 3rd Party Integration?

    I want to create an integration for the plugin I use. Can't find a guide or docs anywhere. Tried searching here for third party, 3rd party, analytics etc.

    Would be excellent to have this info on the WP.org page to increase likelihood of plugins adding support, and make it easy for those of us who want to create our own.

    Would also be great to have a link to this repo from the WP.org page.

    type: enhancement type: documentation 
    opened by jerclarke 3
  • Enable Facebook oembeds

    Enable Facebook oembeds

    Wordpress 4.7 has just been released and it supports oEmbed for Facebook posts/activities/photo/videos/media/questions/notes.

    However while using this new feature, Facebook instant articles plugin won't show up the embed in the instant articles.

    Please help to integrate them to Instant articles since we are forced to use for example the videos that are reuploaded to Youtube, Vimeo etc

    compat: 3rd party 
    opened by gabu69 32
Releases(5.0.2)
Owner
Automattic
We are passionate about making the web a better place.
Automattic
Run your WP site on github pages, php innovation award winner https://www.phpclasses.org/package/12091-PHP-Make-a-WordPress-site-run-on-GitHub-pages.html

Gitpress Run wordpress directly on github pages Gitpress won the innovation award for may 2021 Read more about this https://naveen17797.github.io/gitp

naveen 13 Nov 18, 2022
🖍 Write beautiful blog articles using Markdown inside your Laravel app.

Blogged Write beautiful blog articles using Markdown inside your Laravel app. Blogged ?? Blogged is a carefully designed Laravel package provides an e

Saleem Hadad 131 Dec 16, 2022
Talkino allows you to integrate multi social messengers and contact into your website and enable your users to contact you using multi social messengers' accounts.

Talkino Welcome to our GitHub Repository Talkino is a click to chat plugin to show your agents’ multiple social messengers, phone and emails on the ch

Traxconn 2 Sep 21, 2022
Extracts information about web pages, like youtube videos, twitter statuses or blog articles.

Essence is a simple PHP library to extract media information from websites, like youtube videos, twitter statuses or blog articles. If you were alread

Essence 765 Dec 30, 2022
A curated list of awesome Laravel bookmarks, packages, tools, articles, tutorials and related resources.

ATTENTION: This list is obsolete and discontinued. Please find a much more comprehensive, much more well-maintained awesome-laravel list at chiraggude

Unnawut Leepaisalsuwanna 96 Aug 5, 2022
🎓 Collection of useful PHP frequently asked questions, articles and best practices

PHP.earth documentation These files are available online at PHP.earth. Contributing and license We are always looking forward to see your contribution

PHP.earth 278 Dec 27, 2022
Create a web service for discussion and comments of articles.

Test technique But Créer un service web de discussion et de commentaires d’articles. Fonctionnalités Les fonctionnalités attendus sont les suivantes :

Mathieu Ledru 1 Feb 8, 2022
Enable ray(), dd() and dump() in all PHP files on your system

Enable ray(), dd() and dump() in all PHP files on your system Ray is a wonderful desktop application that can help you debug applications faster. It c

Spatie 190 Dec 13, 2022
Xero - a digital currency that allows instant payments to anyone, anywhere

Xeros is a digital currency that allows instant payments to anyone, anywhere. Xeros has been written completely in PHP and mostly follows the technical design of Bitcoin. Xeros uses P2P technology to operate with no central server.

Kladskull 79 Dec 26, 2022
Enable method chaining or fluent expressions for any value and method.

PHP Pipe Operator A (hopefully) temporary solution to implement the pipe operator in PHP. Table of contents Requirements How to install How to use The

Sebastiaan Luca 268 Dec 26, 2022
The Laravel eCommerce USPS Shipping module allows the store owners to enable United States Postal Servies for the shipment of orders.

Introduction Bagisto Usps Shipping add-on provides Usps Shipping methods for shipping the product. By using this, you can provide Usps (United States

Bagisto 2 May 31, 2022
Site Web pour un site de conciergerie d'entreprise

DATE DE CREATION : 30 novembre 2021 • Développement d'un site Web pour une entreprise de conciergerie pour entreprise, une interface pour les dirigea

Tiffany Dufetel 1 Jan 10, 2022
Examples of the power of WordPress plugins that will wreck your site.

Examples of the power of WordPress plugins that will wreck your site.

Teemu Suoranta 4 Mar 2, 2022
All in one Video Downloader - Download videos from facebook twitter youtube tiktok and 1000+ other sites .. made by Vijay Kumar

VKRdownloader Video Downloader by @TherealVKR Vijay Kumar .... Download Video From YouTube , Facebook , Twitter , Instagram , TikTok , And 1000+ Other

Vijay Kumar 35 Dec 29, 2022
PHP library with basic objects and more for working with Facebook/Metas Conversions API

PHP library with basic objects and more for working with Facebook/Metas Conversions API Installation The easiest way to install this library is by ins

null 5 Dec 5, 2022