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://plugins.flockler.com/embed/16e88f68c280078e6c3cc65257156295/16ea79d892f0a038af66109643d7479f" 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://plugins.flockler.com/embed/16e88f68c280078e6c3cc65257156295/16ea79d892f0a038af66109643d7479f" 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"
  section:        [12345, 12346],          // Filter articles based on section IDs
  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
  tagFilterType:  'all',                   // This changes the tags to be AND so posts need to include all of the listed tags
  only:           ['twitter', 'youtube'],  // Filter articles by type(s) (options: facebook, instagram, flickr, linkedin, pinterest, tweets, twitter, youtube, rss)
  loadMoreText:   'Load More',             // Override load more button text
  showMoreText:   'Show more…',            // Override show more button text
  locale:         'en',                    // Override the current locale. Supported values are: en, fi, fr, de, it, es, sv s
  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://plugins.flockler.com/embed/16e88f68c280078e6c3cc65257156295/16ea79d892f0a038af66109643d7479f?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

Auto-resizing <iframe>

Sometimes you might need to display the embed inside an iframe. The problem however is that iframes do not automatically resize based on their content. We have devised a solution to this that involves listening to resize events sent by the iframe and changing its size accordingly.

Start by copying the preview URL of the embed, appending ?resize_events=true to the URL, and placing the URL to an iframe:

<iframe
  src="https://plugins.flockler.com/embed/preview/16e88f68c280078e6c3cc65257156295/16ea79d892f0a038af66109643d7479f?resize_events=true"
  id="flockler-embed-iframe-16ea79d892f0a038af66109643d7479f"
  style="display: block; border: none; width: 100%;"
></iframe>

Please also make sure that the id attribute matches your embed’s UUID. The embed’s UUID is the last part of the embed’s preview URL (emphasized in bold below):

https://plugins.flockler.com/embed/preview/16e88f68c280078e6c3cc65257156295/16ea79d892f0a038af66109643d7479f

Next step is to subscribe to listening for the events sent by the iframe by placing this JS snippet after the iframe element:

<script>
  (function () {
    function handleFlocklerIframeResizeEvent(event) {
      var flocklerIframe;

      if (event.origin === "https://plugins.flockler.com" && event.data.eventName === "FlockerIframeResizeEvent") {
        flocklerIframe = document.querySelector(
          "#flockler-embed-iframe-" + event.data.embedUuid
        );
        flocklerIframe.height = event.data.nativeHeight;
      }
    }

    window.addEventListener("message", handleFlocklerIframeResizeEvent, false);
  })();
</script>

The payload for the event is:

{
  eventName: "FlockerIframeResizeEvent", // Name for the resize event
  embedUuid: "16ea79d892f0a038af66109643d7479f", // UUID of the embed
  nativeHeight: 1234 // Height of the document inside the iframe in pixels
}
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.