Embed

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.

React Component

The easiest way to add Flockler’s embed to a React.js project is by using our React component:

https://www.npmjs.com/package/@flockler/react-flockler-embed

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>

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>

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>

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 = '';

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 iframe code of the embed:

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

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;
        flocklerIframe.contentWindow.postMessage({ eventName: "FlockerIframeResizeReceivedEvent" }, "*");
      }
    }

    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
}

Iframe URL parameters

.example #flockler-embed-1781db4563b011176f6f45701f9d50b4 {
  .flockler-wall-item__body a {
    color: red;
  }
}

Examples on Codepen

• Customizing styles
• Customizing configuration
• Manual initialization
• Tabs for different social media channels / content types

Troubleshooting

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.