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 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
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.
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.
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.
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/)
},
}
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
<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
}
?body_class=example
— Sets the class="example"
for <body>
to enable dynamic styling for the embed
.example #flockler-embed-1781db4563b011176f6f45701f9d50b4 {
.flockler-wall-item__body a {
color: red;
}
}
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.
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
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.