Academy How To's

How to Embed in Facebook Instant Articles

Playbuzz fully supports item embeds in Instant Articles. Playbuzz formats and features are entirely responsive for Instant Articles and have a much quicker loading time on mobile devices through the Facebook app compared to articles loading directly from websites. This fluid and high-quality experience is optimized for fast mobile performance and rich storytelling capabilities.

Embedding a Playbuzz item can be done in two ways: either through the Facebook publishing tools for your domain or by adding the embed code to your Instant Article RSS feed.  To create a Facebook Instant Article that incorporates a Playbuzz format, follow the steps below:

 

1 If you are embedding through publishing tools, the first step is to open the Instant Article.

Screen Shot 2016-04-04 at 11.11.22 AM

 

2 Create a new Instant Article or edit an existing one and insert the following code in the desired place within the article.

<figure class="op-interactive">

<iframe class="no-margin">

<!-- place holder for the item embed code -->

</iframe>

</figure>

 

3  Select the embed code for the item you would like to embed, and replace the above placeholder. Your code should look like this:

<figure class="op-interactive">

<iframe class="no-margin">

<script type="text/javascript" src="//cdn.playbuzz.com/widget/feed.js">

</script>

<div class="pb_feed" data-embed-by="30efb77a-81ec-4ab8-8750-7624a64c6371" data-game="/matthewm14/only-15-of-adults-can-solve-this-algebraic-equation" data-origin="instant-article" data-canonical="[page-canonical-url]" >

</div>

</iframe>

</figure>

 

In order to provide the best possible experience in Instant Articles, and also to receive the most accurate statistics for item interaction, we recommend that the two bolded attributes found in the above code be added.

The data-origin attribute demonstrates that the item exists inside an Instant Article, and allows any necessary adjustments to be made. The data-canonical attribute demonstrates where the item was originally embedded. Without this attribute, some features (like sharing) may not function properly. It is also important to specify the canonical URL in the head section of every Instant Article.

 

Playbuzz items can also be embedded in an Instant Article through an RSS feed!

 

1  When embedding a Playbuzz item in your RSS feed you will need to wrap the standard embed code with the following: 

<figure class="op-interactive">

<iframe class="no-margin">

<!-- place holder for the item embed code -->

</iframe>

</figure>

 

2 The embed code may be taken from the item you want to embed on Playbuzz.com. Select the item you want to embed and click the “embed” button.

embed

 

 

3 Select the preferred embed settings and copy the code.

embed 2

 

You’re all set!

Start Creating Now

Was this page helpful?

Not HelpfulHelpful
+10 rating, 33 votes