Code customizations for date range, feed style, spacing, filtering and more

With easy changes to your Juicer embed code, you can unlock more customizations to your social feed.

Mario

Updated 5 months ago

Juicer offers various ways to customize your social feed beyond the dashboard options. You can achieve this by modifying the embed code for your feed.

Embed Code Examples

First things first, you'll be working with your Juicer embed code.

For standard websites:

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js" async defer></script>

For WordPress plugin:

[juicer name="YOUR-JUICER-FEED-NAME"]

For PHP function:

<?php juicer_feed('name=YOUR-JUICER-FEED-NAME'); ?>

For the iframe version:

<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe" frameborder="0" width="1000" height="1000"></iframe>

Customization Options Basics

Standard feed embed

This example has customization included (per=15) that limits the number of posts shown to 15 and a Load More button will appear after those 15 posts:

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?per=15" async defer></script>

⚠️ If you want to add multiple customizations to the embed code, simply add an & symbol between them.

If your snippet looks like this below, it means that you are using our older embedding code. You can tweak it similarly, in case you still have it, although we would advise you to update the embed snippet:

<ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-per="15"></ul>

You can also still create your HTML element for the feed yourself with the new snippet, in that case, you would be using the same setup as for the <ul> element:

<div class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-per="15"></div>

⚠️ In your code, “YOUR-JUICER-FEED-NAME” will already have your unique feed ID shown.

In the later examples, we'll provide only the customization examples for our new embed version <script>. You can follow the logic for the <ul> (old) code as shown in the example above.

WordPress feed embed

If you are using the WordPress plugin and the corresponding Juicer shortcode or PHP function, the way you make these customizations will be slightly different. It will look like this:

[juicer name="YOUR-JUICER-FEED-NAME" per="15"]

⚠️ All data attributes in the WP shortcode, e.g., data-per, data-after, etc., can be used with or without the prefix data-. So, per, after, etc. is also OK.

Or, if you're using a PHP function:

<?php juicer_feed('name=YOUR-JUICER-FEED-NAME&per=15'); ?>

iframe feed embed

Finally, if you are using the iframe version of the Juicer embed code, you can make customizations by adding them like this example (with a question mark followed by the attribute):

<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe?per=1" frameborder="0" width="1000" height="1000"></iframe>

⚠️ If you want to add multiple customizations to the iframe code, simply add an & symbol between them.

Combining Multiple Customization Parameters

Before we dive into all the individual parameters, please note that you can apply several customizations to your Juicer feed simultaneously by combining multiple parameters. Here's how to do it effectively:

Key Point: Use the ampersand symbol (&) to join different parameters in your embed code.
Syntax: parameter1=value1&parameter2=value2&parameter3=value3

Examples:

Show 15 posts in 4 columns: per=15&columns=4
Display posts from June 2024 in slider style: starting-at=2024-06-01&ending-at=2024-06-30&style=slider
Filter Facebook posts with the overlay enabled: filter=Facebook&overlay=true
Set 10-pixel gutter and truncate long posts: gutter=10&truncate=150

☀️ Tips:

There's no limit to the number of parameters you can combine
Ensure each parameter is correctly formatted to avoid errors
- Example: Use straight quotes (") instead of curly quotes (” or “)
  - Correct: filter="Facebook"
  - Incorrect: filter=“Facebook“
Test your feed after adding multiple parameters to verify the desired outcome.
The order of parameters doesn't matter, but maintaining a consistent order in your code can help with readability and maintenance.

The List of Customization Parameters

The list of modifications we will cover here:

Change the number of posts displayed in the feed above the Load More button
Limit the number of total pages of your feed that can be loaded
Limit the length of the post text and add a “Read More” link
Change the space between posts
Change the number of columns
Change the timing of the widget or slider
Change the number of tiles shown on the theme "living wall"
Filter the posts based on a source in your “Social Media Sources”
Display posts in a certain date range
Use a different feed style than the one set in the dashboard
Open the overlay by clicking on a post
Run JavaScript after the feed has rendered

________________________________________________________

Change the number of posts displayed in the feed above the Load More button

Data Attribute: per
Default: 100
Example:

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?per=15" async defer></script>

The per attribute determines the number of posts displayed on each page of your Juicer feed. By default, Juicer shows 100 posts per page (or all your posts if you have fewer than 100).

When users reach the bottom of a page, one of two things will happen:

A "Load More" button will appear, or
The feed will "infinitely scroll" if you've enabled this option in your Feed Settings panel.

If you want to limit the feed to only the first page of posts without allowing further loading, you can use the pagesattribute (explained in more detail below).

Limit the number of total pages of your feed that can be loaded

Data Attribute: pages
Default: infinity
Example:

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?pages=1" async defer></script>

The pages attribute controls how many times a visitor can load additional posts in your Juicer feed. Here's how it works:

By default, there's no limit. Visitors can keep loading posts until all are displayed.
Setting pages=1 restricts the feed to a single page of posts, with no option to load more.
Setting pages=2 allows visitors to load one additional page of posts, and so on.

You can combine the pages attribute with the per attribute to fine-tune your feed's behavior. For example:

per=20&pages=3 would show 20 posts initially, with the ability to load two more sets of 20 posts.

This combination gives you precise control over the number of posts displayed and how many times visitors can load more.

Limit the length of the post text and add a “Read More” link

Data Attribute: truncate
Default: infinity
Example:

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?truncate=500" async defer></script>

The truncate attribute allows you to limit the text length of your social posts. Here's how it works:

It sets a maximum character count for each post's visible text.
If a post exceeds this limit, it's trimmed and a "Read More" link is added.
Posts shorter than the specified limit remain unchanged.

Benefits of using truncate:

Creates visual consistency across posts of varying lengths.
Helps manage the overall space on your webpage.
Encourages user interaction through "Read More" clicks.

Example usage: truncate=150 would display the first 150 characters of longer posts, followed by a "Read More" link.

⚠️ Remember, truncate affects only the text display. It doesn't alter the original post content, which remains accessible via the "Read More" link.

Change the space between posts

Data Attribute: gutter
Default: 20 (or 0 on “image grid” style)
Example:

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?gutter=10" async defer></script>

The gutter attribute controls the space between posts in your Juicer feed. Here's what you need to know:

It sets the gap between posts in pixels.
For the modern theme, the default gutter value is 20 pixels.
You can customize this value to increase or decrease spacing.

Example usage: gutter=10 would set a 10-pixel gap between posts. By adjusting the gutter, you can fine-tune your feed's visual density to match your website's design.

⚠️ Important: This attribute doesn't work with all feed themes, most notably the slider theme.

Change the number of columns

Data Attribute: columns
Default: 3
Example: columns=4 would set your feed to display in four columns, space permitting

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?columns=4" async defer></script>

The columns attribute allows you to adjust the number of post columns in your Juicer feed. Here's what you should know:

You can set this both in your embed code and in the Feed Settings panel of your dashboard.
Juicer enforces a minimum column width of 200px for readability.
The feed is responsive, adapting to different screen sizes.

⚠️ Important Notes:

If your feed shows fewer columns than expected, you may need to increase the size of the container on your webpage that displays the Juicer feed.
The actual number of columns displayed may vary based on the viewer's screen size due to the responsive design.

Change the timing of the widget or slider

Data Attribute: interval
Default: 5000
Example: interval=7000 would make your feed advance every 7 seconds

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?interval=7000" async defer></script>

The interval attribute determines how quickly your slider or widget advances to the next set of posts. Here's what you need to know:
Key Points:

Measured in milliseconds (ms)
Default value: 5000 ms (5 seconds)
You can set this in your embed code or the Feed Settings panel of your Juicer dashboard

Customization Options:

Faster progression: Use a lower value (e.g., interval=3000 for 3 seconds)
Slower progression: Use a higher value (e.g., interval=10000 for 10 seconds)
Stop automatic progression: Set to 0 or a very high number (e.g., interval=0 or interval=999999)

☀️ Tip: Adjust the interval to match your content and your audience's reading speed. A slower interval gives more time to view each set of posts, while a faster one shows more content quickly.

Change the number of tiles shown on the theme "living wall"

Data Attribute: visible
Default: none
Note: Works only with the "living wall" theme
Example: visible=12 would display 12 randomly selected posts on your living wall

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?visible=12" async defer></script>

The visible attribute allows you to control how many posts appear at once on your living wall feed. Here's what you need to know:

Key Features:

Displays a set number of posts at a time
Randomly selects posts from all approved content
Useful for feeds with numerous approved posts

How it works:

Set the number of visible posts (e.g., visible=12)
Juicer randomly selects that number of posts from your entire approved collection
This selection refreshes periodically, showing different posts

Comparison with per attribute:

visible: Randomly selects from all approved posts
per: Shows only the most recent posts

Benefits:

Showcases a diverse range of content
Ideal for smaller grids or limited space
Keeps your feed dynamic and interesting

☀️ Tip: Adjust the visible value to find the right balance between variety and content density for your feed.

Filtering the posts based on a source in your “Social Media Sources” panel

Data Attribute: filter
Default: none
Example: filter=Facebook,tbt would show posts from all Facebook sources and the #tbt Instagram source.

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?filter=Facebook" async defer></script>

The filter attribute allows you to selectively display posts from specific sources in your Juicer feed. Here's how to use it effectively:

Filtering Options:

By Social Network:
- Use capitalized network names (e.g., "Facebook", "LinkedIn")
- Shows all posts from the specified network
By Specific Source:
- Enter the source account name or hashtag
  - Example: filter=tbt for posts from an Instagram #tbt source
Multiple Sources:
- Separate sources with commas
  - Example: filter=Source1, Source2

⚠️ Important Notes:

For complex filtering (e.g., multiple accounts with the same name), contact Juicer support for unique source ID numbers.
This attribute filters based on sources, not post content. For content-based filtering, use the "Moderate and Filter" panel in your dashboard.

Display posts in a certain date range

Data Attribute: starting-at and ending-at
Default: none
Example: starting-at=2024-06-01&ending-at=2024-06-30 displays posts from June 2024 only

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?starting-at=2024-06-01&ending-at=2024-06-30"" async defer></script>

The starting-at and ending-at attributes allow you to show posts from a particular date range in your Juicer feed. Here's how to use them:

Format:

Use the date format: YYYY-MM-DD
Optionally, add time: YYYY-MM-DD HH:MM

Usage:

starting-at: Shows posts newer than the specified date
ending-at: Shows posts older than the specified date

Examples:

starting-at=2024-01-01: Displays posts from January 1, 2024 onwards
ending-at=2024-12-31: Shows posts up to December 31, 2024
starting-at=2024-06-01&ending-at=2024-06-30: Displays posts from June 2024 only

☀️ Tips:

Use these attributes together to create a specific date range for your feed
Time is optional but can be useful for precise control
Ideal for showcasing content from events, campaigns, or specific periods

⚠️ Remember: Dates should be in UTC (Coordinated Universal Time) for consistency across different time zones.

Use a different feed theme than the one set in the dashboard

Data Attribute: style
Default: none
Example:

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?style=slider" async defer></script>

The style attribute allows you to use different visual themes for the same Juicer feed across various pages of your website. Here's how it works:

Key Points:

Overrides the default theme set in your dashboard
Use lowercase theme names (e.g., "slider", "classic", "widget")
Applies only to the specific embed where it's used

How to Use: Add the style attribute to your embed code, like this: style=slider

Available Themes:

modern (default)
night
polaroid
image-grid
widget
slider (no YouTube support)
living-wall (no Twitter and YouTube support)
hip

Example Scenario: You have a feed with the "modern" theme set in your dashboard, but you want to use:

The slider theme on your homepage
The image grid theme on your About page

Solution:

Homepage embed: style=slider
About page embed: style=image-grid

☀️ Tip: This feature is great for maintaining consistent content across your site while adapting the presentation to suit different page layouts or purposes.

Open the overlay by clicking on a post

Data Attribute: overlay
Default: none
Example: overlay=true

<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?overlay=true" async defer></script>

The overlay attribute determines what happens when a visitor clicks on a post in your Juicer feed. Here's how it works:
Options:

overlay=true: Opens an overlay within your page, displaying the post details
overlay=false: Directs users to the original post on the social media platform

Key Points:

The default behavior can be set in your feed dashboard settings
Using this attribute in your embed code overrides the dashboard setting
This applies to the specific embed where it's used

When to Use:

Set to true to keep visitors on your site and provide a consistent viewing experience
Set to false to drive traffic to your social media profiles

☀️ Tip: Consider your goals for user engagement when choosing between these options. Keeping users on your site might increase time spent there while linking out could boost your social media following.

Run JavaScript after the feed has rendered

Data Attribute: none
Default: none
Example:

Juicer publishes events that allow you to run custom JavaScript functions after your Juicer feed has been rendered. This powerful feature enables you to modify or interact with your feed programmatically.

Key Points:

The function runs after feed load, pagination, or overlay opening
Use the function parameter to determine which event triggered it

Supported events:

juicer:feedLoaded – Initial feed load
juicer:feedPaginated – More posts loaded
juicer:overlayRendered – Overlay window opened

Example: If you would like to catch the pagination, our example function would start like below.

document.addEventListener('juicer:feedLoaded', 
function(event) {
    // Do your stuff here
});

Use Cases:

Modify feed appearance dynamically
Integrate feed interactions with other page elements
Track user interactions with your feed

⚠️ Important: Ensure your custom function is defined and accessible in your page's JavaScript before the Juicer feed loads.

☀️ Tip: Start with simple modifications and test thoroughly to avoid conflicts with Juicer's built-in functionality.

If you have any questions or need any help, please email us at hello@juicer.io.

Did this answer your question?

😞 😐 😃

Juicer.io Support Center