Embed

Embed is a JavaScript component for embedding any site or section contents anywhere.

Here's the embed script with default configuration:

<div id="flockler_container"></div>
<script type="text/javascript">
var _flockler = _flockler || [];
_flockler.push({
  count: 20,
  refresh: 0,
  site: 1239,
  section: 14550,
  style: 'wall'
});
(function(d){var f = d.createElement('script');f.async=1;f.src='https://embed-cdn.flockler.com/embed-v2.js';s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(f,s);})(document);
</script>

Site/Section ID: The 1239 in the example code is the site ID while 14550 is the section ID. You can find your site's or section's IDs next to their title in Flockler. Note that some sites require you to hover over the title to see the ID (screenshot).

Multiple embeds on one page

To insert multiple embeds on one page, first include the init script in head or at the end of body:

<script type="text/javascript">(function(d){var f = d.createElement('script');f.async=1;f.src='https://embed-cdn.flockler.com/embed-v2.js';s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(f,s);})(document);</script>

And then you can insert multiple embeds by assigning each one of an unique container for example like this:

<div id="flockler_container1"></div>
<script type="text/javascript">
var _flockler = _flockler || [];
_flockler.push({
  container: 'flockler_container1',
  count: 20,
  refresh: 0,
  site: 1239,
  section: 14550,
  style: 'wall'
});
</script>

<div id="flockler_container2"></div>
<script type="text/javascript">
var _flockler = _flockler || [];
_flockler.push({
  container: 'flockler_container2',
  count: 20,
  refresh: 0,
  site: 1239,
  section: 14550,
  style: 'wall'
});
</script>

Embed options

site:           24                    // REQUIRED. Flockler site ID
section:        123                   // Optional. Flockler section ID
container:      'flockler_container'  // Optional. ID of the <div> to insert the stream into. Enables support for multiple streams on one page (default "flockler_container")
style:          'wall'                // Optional. Embed style, "wall" is currently the only one available (default "wall")
count:          40                    // Optional. How many items are shown "per page" (default 40)
refresh:        0                     // Optional. Milliseconds between checks to see if there's new content. Set to 0 to disable, set to 30000 for 30sec interval (default 0, note: values below 500 default to 0)
refreshType:    'auto'                // Optional. What to do on new content; auto = add new content to the top of stream automatically pushing the stream down, manual = render a button at top so the stream doesn't jump (default "manual")
defaultCss:     0,                    // Optional. Set to falsey to ignore embed style's CSS and e.g. use custom CSS
defaultJs:      0,                    // Optional. Set to falsey to ignore embed style's JavaScript and e.g. use custom JS
infiniteScroll: 1                     // Optional. Enables infinite scroll (disabled by default)
ua:             'UA-1234567-8'        // Optional. Classic Google Analytics code. Sends events to Google when articles are opened if the current style supports opening of single articles. Set to falsy to disable (disabled by default)
articles:       [1234567, 1234568]    // Optional. Only include the specified articles in the stream
only:           'twitter'             // Optional. Filter articles from specific service (options: facebook, instagram, linkedin, pinterest, twitter, videos, yammer, youtube)
loadMoreText:   'Load More'           // Optional. Change load more button text (default null, which will render a locale-based default text)
extra:          { text: 1 }           // Optional. Miscellaneous style-related extra settings

Site/Section ID: You can find your site's or section's IDs next to their title in Flockler. Note that some sites require you to hover over the title to see the ID (screenshot).

You can tweak the wall style with these options:

extra: {
  wall_timestamps: true,                                            // Enable timestamps for wall items
  wall_share_buttons: ['facebook', 'twitter', 'gplus', 'linkedin']  // Sets the share buttons to wall items. You can add/move/remove buttons by modifying the array
}

Advanced usage

Events

The embed also emits a few simple events. With events you can hook custom JavaScript code to be run e.g. after loading more articles or after changing the active view.

For example, if you've hooked Masonry.js into the wall and want Masonry to re-layout the items after loading more articles:

var embed = window.FLOCKLER_EMBEDS['flockler_container'];
embed.on('articles.more', function () {
  reloadMasonry();
});

Here's a list of all the currently available events:

Manual Initialization

Manual/programmatic initialization of the embed script can be crucial if you are e.g. writing a single-page app where you'd like to embed something.

You can create an embed manually/programmatically like this:

var flEmbed = window.flcklr.Embeds.create({
  site: 1239,
  section: 14550,
  count: 20,
  refresh: 0
});

If you store the object returned by flcklr.Embeds.create() in e.g. flEmbed, you can then destroy the stream like this:

// Note! On some browsers, this leaves a small bit of memory reserved instead of freeing it up too
flEmbed.destroy();
flEmbed = null;

Note, that you also have to load the embed-v2.js JS source somehow: https://embed-cdn.flockler.com/embed-v2.js . You don't have to include any other scripts/snippets.

Troubleshooting

Not working on WordPress:

Some WordPress installations seem to add "trash" inside the <script> tag. To solve this problem, make everything inside the script tag be on one line.

Example:

<div id="flockler_container"></div>
<script type="text/javascript">var _flockler = _flockler || {};_flockler.site = 1239;_flockler.section = 14550;_flockler.style = 'wall';_flockler.count = 20;_flockler.refresh = 0;(function(d){var f = d.createElement('script');f.async=1;f.src='https://embed-cdn.flockler.com/embed-v2.js';s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(f,s);})(document);</script>

Support

If you have any questions, don't hesitate to contact our team at team@flockler.com.