Embed

Note: If you’ve added Flockler’s embed code to your website prior to November 22 2019, you might be using our previous version of the embed code. You can find the documentation for it here.

Most Embed code options can be adjusted from the Display tab after logging in to Flockler. The changes made will also be reflected automatically on your website without any code changes. The instructions provided here are intended for developers that have a special need to adjust/override the configuration options dynamically.

Different display styles can also be selected from the Display tab. The look and feel can be customized by overriding our default CSS styling on your website.

The Basics

Flockler Embed is a JavaScript component for embedding your social content to your website.

By default an embed code looks like this:

<div id="flockler-embed-16ea79d892f0a038af66109643d7479f"></div>
<script src="https://flockler.embed.codes/62wAnK" async></script>
See an example on CodePen

The administrators of your Flockler account can change the settings of the embed code (for example, load more text, number of posts, and timestamp format) straight from Flockler's user interface. By default, the embed code doesn’t need any changes on your website. However, below you’ll find some of the additional configuration and custom styling options to override the default settings when needed. Overriding the options will require some changes to the code on your website.

Customizing styles

Flockler’s embed code will render the content directly to the page where the embed code has been placed. Therefore you are able to override the default styles by adding some additional CSS to the page.

In the example below, we make the load more button blue by creating a CSS rule that overwrites the default background and text color for the button:

<style>
  .flockler-grid-items a.flockler-btn-load-more,
  .flockler-grid-items a.flockler-btn-load-more:hover {
    background: #0187d6 !important;
    color: #fff !important;
  }
</style>
See an example on CodePen

Would you like to edit the colours of the embed but not exactly sure how to do it? Contact us via team@flockler.com or via the chat, and we'll help you out.

Custom configuration

Sometimes it can be useful to dynamically override the configuration. You can override some of the configurations of the embed code by defining them in a JavaScript object as shown below. Please note that the UUID in the override (16ea79d892f0a038af66109643d7479f) needs to match the embed code’s UUID.

<div id="flockler-embed-16ea79d892f0a038af66109643d7479f"></div>
<script>
  var _flocklerOverride = _flocklerOverride || {};
  _flocklerOverride['16ea79d892f0a038af66109643d7479f'] = {
    tags: ['mythbusting', 'socialmedia']
  };
</script>
<script src="https://flockler.embed.codes/62wAnK" async></script>
See an example on CodePen

In the example above, we have added a tag filter to the configuration. As a result, embed will show only the posts that match one or more of the tags listed.

Custom configuration options

Note: Most of the options below are available on the embed code’s setting page on Flockler.

{
  count:          12,                    // How many items are shown "per page"
  tags:           ['burger', 'pizza'],   // Filter articles based on a tag or multiple tags. With multiple tags filter is OR: one of the tags needs to match
  only:           'twitter',             // Filter articles by type (options: facebook, instagram, linkedin, pinterest, twitter, videos, video_posts, yammer, youtube)
  loadMoreText:   'Load More',           // Override load more button text
  showMoreText:   'Show more…',          // Override show more button text
  extra: {
    wall_timestamps: true,               // Enable timestamps for wall items
    wall_timestamps_format: '%d/%m/%Y',  // Define the desired format using a strftime string (see https://foragoodstrftime.com/)
  },
}

Manual initialization

Sometimes you need to to render the embed manually, e.g., when displaying the embed in a single-page app.

First we need to load the JS for the embed before trying to render it. Compared to the default script, please note the special parameter ?autoload=false in the URL as well as the removed async attribute.

<script src="https://flockler.embed.codes/62wAnK?autoload=false"></script>

Next you will need to add a <div> element to your page to the place where you would like to display the content in. Be sure to check that the id attribute has the matching UUID.

<div id="flockler-embed-16ea79d892f0a038af66109643d7479f"></div>

Now after you’ve loaded the script synchronously and placed the container to the DOM, you can render the embed and save the reference to it with the following code:

var embed = window.flcklr.Embeds.create(
  window.flcklr.EmbedConfigs['16ea79d892f0a038af66109643d7479f']
);

When you’d like to destroy the rendered embed, do the following:

embed.destroy();
embed = null;
document.querySelector('#flockler-embed-16ea79d892f0a038af66109643d7479f').innerHTML = '';
See a full example on CodePen

Examples on Codepen

Troubleshooting

Styles are broken

Sometimes your website can include styling rules that are in conflict with Flockler’s embed code’s styling. In most cases these can be fixed quite easily. If you need help with the styling, please contact us via the chat.

Not working on WordPress?

Some WordPress installations seem to break the contents of the <script> tag. To solve this problem, make everything inside the script tag be on one line.

Support

If you have any questions or would like to know how to customize the look, don’t hesitate to contact our team at team@flockler.com or via the chat.