how-to

Embedding playbuzz items

Embedding is your way of publishing playbuzz items in your web site or web page. An embedded Playbuzz item consists of two parts: an HTML snippet and Playbuzz Javascript SDK, both added to you web page.

There are three options of embedding a Playbuzz item:

Copy embed code from the item’s page on www.playbuzz.com.
Programatically convert an item’s URL using Playbuzz oEmbed API.
Using Playbuzz Javascript SDK to render the item.

Need help? Contact us.

Embed from Playbuzz.com

Click on the embed button located below the item on it’s page. Item embed button

Convert item URL using oEmbed

Programmatically convert an item URL into embedded item markup using playbuzz oEmbed API.

An ideal solution when using a CMS.

See here for a full guide.

Use Javascript SDK

The JavaScript SDK scans the page on load, converting <div class="playbuzz"> elements into items based on the element data-id attribute. In order to render dynamically inserted content, call Playbuzz.render() function.

Step 1: Include the JavaScript SDK on your page once, ideally under the <head> tag.

<head>
    // ...
    <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>
    // ...  
</head>

Step 2: Place this HTML snippet wherever you want the item to appear on your page (replace the id with your real item id).

<body>
    // ...
    <div class="playbuzz" data-id="04c763d4-f0d3-455d-bad2-e70f0acfa002"></div>
    // ...
</body>

Customizing your embedded item

Embed parameters can be added to the <div class="playbuzz"> element to customize it. The supported parameters are listed below.

Parameter	Description	Default
data-id	the id of the item to embed (required)	-
data-show-share	show the share bars	true
data-show-info	show the cover and details of the item	true

Contact us

Need help? Contact us.