Embeds

Customize what’s shown by the embeds

Table of contents

Getting started#

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>

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 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 removedasync 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:

const 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 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) {
      if (event.origin === "https://plugins.flockler.com" && event.data.eventName === "FlockerIframeResizeEvent") {
        const 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
}

See a full example on CodePen →

Iframe URL parameters#

?body_class=example — Sets the class="example" for <body> to enable dynamic styling for the embed

Note: When utilizing a body class in an iframe, you’ll need to include the embed wrapper’s ID in the selector and nest the styles in SCSS syntax:

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

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 can break the contents of the <script> tag. To solve this problem, make everything inside the script tag be on one line.

Learn more: How to add Flockler to WordPress

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.