Embed

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

Here’s an example configuration for the embed script:

<div id="flockler_container"></div>
<script type="text/javascript">
var _flockler = _flockler || [];
_flockler.push({
  count: 20,
  refresh: 0,
  site: 1239,
  section: 14550,
  style: 'wall_v1'
});
(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_v1'
});
</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_v1'
});
</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_v1'             // Optional. Embed style, "wall_v1" is currently the only one available (default "wall_v1")
count:          40                    // Optional. How many items are shown "per page" (default 40)
refresh:        0                     // Optional. Check for new content every given milliseconds. Set to 0 to disable, set to 30000 for the recommended 30sec interval — values below 10000 default to 10000
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)
articles:       [1234567, 1234568]    // Optional. Only include the specified articles in the stream
tags:           ['burger', 'pizza'],  // Optional. Filter articles based on a tag or multiple tags
only:           'twitter'             // Optional. Filter articles by type  (options: facebook, instagram, linkedin, pinterest, twitter, videos, video_posts, 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_timestamps_format: '%d/%m/%Y',                               // Optional. Override date format using strftime string. See https://foragoodstrftime.com/
  wall_share_buttons: ['facebook', 'twitter', 'gplus', 'linkedin']  // Add, move & remove wall share buttons; set to "false" to hide all buttons
}

Automatic updates

There are two ways how auto updates work:

1. User is shown a button to display new posts

{
  refresh: 30000,
  refreshType: 'manual'
}

2. New posts are loaded without user input

{
  refresh: 30000,
  refreshType: 'auto'
}

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.