Filter posts by a product dynamically on your webshop

Note: you’ll need to activate the Commerce add-on to use this feature. Learn more.

If you’d like the Wall, Grid, Carousel, or Slideshow layout to display posts where a specific product or products have been tagged, there are two options:

Manually choose the product for the embedded layout
Set the product filtering dynamically on your webshop

In this article, we will walk you through the second option. Using this option allows you to automatically show social media posts on each product page based on your product tagging.

If you’d like to use the first option and create the embed code manually, you can find step-by-step instructions here.

Set the product filtering dynamically on your webshop

This option requires a bit of development work from your developers as they will need to dynamically set the product id for the embed code depending on the page in question.

From below, you will find a simple and advanced method.

Simple method

To show an embed code with product filtering, you can use query parameters with product ids from your webshop. You can add one or multiple product ids from your webshop.

Follow these steps:

Tag products to social media posts on the 'Commerce' tab.
Create an embed code (Wall, Grid, or Carousel) on Flockler’s Display tab.
Copy the embed code and add a query parameter to the URL within the embed code like this: ?productIds[]=PRODUCT_1. Replace the PRODUCT_1 with the product id from your webshop.

Here’s an example embed code where the product ID is II1057118:

<div id="flockler-embed-17e7703250507cd5127e64e47c4023b9"></div>
<script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/17e7703250507cd5127e64e47c4023b9?productIds[]=II1057118" async></script>

Adding multiple products

You can add multiple products like this:

?productIds[]=PRODUCT_1&productIds[]=PRODUCT_2

Show all posts if there are no products tagged

Sometimes, you might not have any social media posts tagged with the product and you’d like to show all posts instead of loading the embed code empty. You can do that by adding:

&productShowAllFallback=true

Hide tagged products from your embedded layout

When you embed the product filtered feed on a product page, you might not want to have CTA buttons and the same product page link repeating on the social media feed. The CTA button leads to the same product page unless you have tagged multiple products to each social media post.

To show the product filtered feed without CTA buttons, add the following:

&extra[show_products]=false

Advanced method

The advanced method allows more control for your developers to integrate Flockler into your website.

For example, your team can add a fallback behaviour if the product in question has not been tagged to any of the social media posts yet. Also, if you happen to have the same product id for multiple products (e.g., language versions), you can define which product feed is in use.

In this demo grid layout, the first Instagram image on the left has a product tagged.

If I’d like to show only Instagram images tagged with that specific product, I’d follow these steps:

Tag products to social media posts on the 'Commerce' tab
Find the embed code for the layout on Flockler’s Display tab. Here’s an example embed code:

<div id="flockler-embed-17e7703250507cd5127e64e47c4023b9"></div>
<script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/17e7703250507cd5127e64e47c4023b9" async></script>

3. From the embed code, find the UUID needed in the next step. In my example embed code, the UUID is 17e7703250507cd5127e64e47c4023b9 and you can find it at the start of the embed code.

4. Then, I will place the embed code to my website together with an additional script in the middle:

<div id="flockler-embed-17e7703250507cd5127e64e47c4023b9"></div>
<script>
  var _flocklerOverride = _flocklerOverride || {};
  _flocklerOverride['17e7703250507cd5127e64e47c4023b9'] = {
    productIds: ['PRODUCT_ID']
  };
</script>
<script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/17e7703250507cd5127e64e47c4023b9" async></script>

_flocklerOverride has the UUID from step 3.

The product id is from your webshop.

Adding multiple products

You can add multiple products to the embed code, separated by a comma like this (['PRODUCT_1', 'PRODUCT_2'].

Show all posts if there are no products tagged

Sometimes, you might not have any social media posts tagged with the product and you’d like to show all posts instead of loading the embed code empty. You can do that by adding:

productShowAllFallback: true

Example code:

<div id="flockler-embed-17e7703250507cd5127e64e47c4023b9"></div>
<script>
  var _flocklerOverride = _flocklerOverride || {};
  _flocklerOverride['17e7703250507cd5127e64e47c4023b9'] = {
    productIds: ['PRODUCT_1'], 
    productShowAllFallback: true
  };
</script>
<script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/17e7703250507cd5127e64e47c4023b9" async></script>

Hide tagged products from your embedded layout

To show the product filtered feed without CTA buttons, add the following:

extra: { 
   show_products: false 
}

Example code:

<div id="flockler-embed-17e7703250507cd5127e64e47c4023b9"></div>
<script>
  var _flocklerOverride = _flocklerOverride || {};
  _flocklerOverride['17e7703250507cd5127e64e47c4023b9'] = {
    productIds: ['PRODUCT_1'], 
    productShowAllFallback: true,
    extra: { 
    show_products: false 
    }
  };
</script>
<script src="https://plugins.flockler.com/embed/17e7701554d05c6c6d1425ad3ede6c8c/17e7703250507cd5127e64e47c4023b9" async></script>

To learn more, see the custom configuration in Flockler’s developer documentation.