Ways to Integrate

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.
    alt text

  • 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.






Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us how can we improve this article!

Select atleast one of the reasons

Feedback sent

We apprciate your effort and will try to fix the article