Ways to Integrate

TABLE OF CONTENTS

Javascript
oEmbed
Shopify
- Overlay Unit
- In-read Unit
Facebook Instant Articles
Google AMP

Javascript

oEmbed

The endpoint returns an item, specified by an item URL or item ID, in an oEmbed-compatible format. The item URL may be of two forms - //www.playbuzz.com/item/<item-id> and //www.playbuzz.com/<user-name>/<item-title>. The API enables customization of the embedded item by setting parameters to the oEmbed endpoint.

Endpoint URL

//oembed.playbuzz.com/item?id=<your_item_id> or //oembed.playbuzz.com/item?url=<your_item_url>

Parameters

Parameter	Description	Default
id	the id of the item to embed	-
url	the url of the item to embed	-
omit-script	do not include script in the html returned	false
show-share	show share bar above and below the item	true
show-info	show item cover, title and description	true

Either ID or URL is required.

Example

All following three requests return the following response.

Request

//oembed.playbuzz.com/item?id=8fb2343f-fa5d-48d4-8723-f8b5d51cc1a9
//oembed.playbuzz.com/item?url=www.playbuzz.com/item/8fb2343f-fa5d-48d4-8723-f8b5d51cc1a9
//oembed.playbuzz.com/item?url=http://www.playbuzz.com/paolagarcia10/remembering-september-11th-flash-back-to-images-we-will-never-forget

Response

{
    author_name: "Paola Garcia",
    author_url: "//www.playbuzz.com/paolagarcia10",
    html: "<script>(function (d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s);js.id = id;js.src = "//embed.playbuzz.com/sdk.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'playbuzz-sdk'));</script><div class="playbuzz" data-id="8fb2343f-fa5d-48d4-8723-f8b5d51cc1a9"></div>",
    provider_name: "Playbuzz",
    provider_url: "//www.playbuzz.com",
    thumbnail_url: "//cdn.playbuzz.com/cdn/8fb2343f-fa5d-48d4-8723-f8b5d51cc1a9/6868d660-9f42-49c7-bedb-ea6416a56860.jpg",
    thumbnail_height: 83,
    thumbnail_width: 126,
    title: "Remembering September 11th: Flash Back To Images We Will Never Forget",
    type: "rich",
    url: "//www.playbuzz.com/item/8fb2343f-fa5d-48d4-8723-f8b5d51cc1a9",
    version: "1.0"
}

Shopify

Please see the following steps to add the EX.CO embed placement on your whole shopify website.

Overlay Unit

Step 1: From your Shopify admin, go to Online Store > Themes.

Step 2:Click Actions > Edit code.
- The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right.
- When you click a file in the directory on the left, it opens in the code editor.

shopify-editcode

Step 3: Click the theme.liquid file in the Layout folder.
Step 4: Click on Copy Code on the EX.CO platform.

exco-embedCode

Step 5: Paste the embed below the <head> tag

shopify-embed

Step 6: Click Save

In-read Unit

Step 1: From your Shopify admin, go to Online Store > Themes.
Step 2:Click Actions > Edit code.
- The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right.
- When you click a file in the directory on the left, it opens in the code editor.

shopify-editcode

Step 3: Click on the file you want to embed the EX.CO inread unit in the Layout folder.
Step 4: Click on Copy Code on the EX.CO platform.

exco-embedCode

Step 5: Paste the embed below the element you want the EX.CO unit to appear. For example - In this case the inread unit was inserted in the contact form page only.

shopify-embed

Step 6: Click Save

Facebook Instant Articles

EX.CO fully supports item embeds in Instant Articles. EX.CO 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 EX.CO 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 EX.CO format, follow the steps below:

Step 1: If you are embedding through publishing tools, the first step is to open the Instant Article.
Step 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>

Step 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>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src=‘//embed.playbuzz.com/sdk.js’;fjs.parentNode.insertBefore(js,fjs);}(document,‘script’,‘playbuzz-sdk’));</script>
      <div class=“playbuzz” data-id=“04c763d4-f0d3-455d-bad2-e70f0acfa002"></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.

EX.CO items can also be embedded in an Instant Article through an RSS feed!

Step 1: When embedding a EX.CO 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>

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

alt text

Step 3: 3 Select the preferred embed settings and copy the code.

alt text

Google AMP

Step 1: Add amp-playbuzz components in your amp page head tag. See an Example.
Step 2: Place the following HTML snippet wherever you want the item to appear on your page (replace the id with your real player id).

<amp-playbuzz
    data-item="ITEM_ID"
    height="500">
</amp-playbuzz>

Examples EX.CO Item by plan URL (without info, share-buttons, comments)

<amp-playbuzz
    src="https://www.playbuzz.com/HistoryUK/10-classic-christmas-movies"
    height="500">
</amp-playbuzz>

EX.CO Item by item-id (can be found in the item's embed code)

<amp-playbuzz
    data-item="a6aa5a14-8888-4618-b2e3-fe6a30d8c51b"
    height="500">
</amp-playbuzz>

With optional parameters (info and share-buttons):

<amp-playbuzz
     src="https://www.playbuzz.com/HistoryUK/10-classic-christmas-movies"
    height="500"
    data-item-info="true"
    data-share-buttons="true">
</amp-playbuzz>

See amp-playbuzz for more detailed information.