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>
🌿 Using a platform that needs a separate container?
Some website builders (e.g., Wix, Squarespace) work better when the feed has its own HTML container. In that case, add a <div> element alongside the script:
<div class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME"></div><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.
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"]
☀️ Tip: 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>
☀️ Tip: 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¶meter2=value2¶meter3=value3
Examples:
Show 15 posts and filter to Facebook only:
per=15&filter=FacebookShow 20 posts per page and truncate long captions (iframe embed):
per=20&truncate=150Display posts from June 2024 only (iframe embed):
starting-at=2024-06-01&ending-at=2024-06-30
☀️ 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
❗️ Feeds 2.0 note (pill-shaped bottom toolbar): On the Feeds 2.0 script embed, only per and filter still work as URL parameters. Layout, spacing, columns, slider speed, overlay, truncation, date range, and template selection are all controlled from the dashboard's bottom-toolbar panels (Templates, Post settings, Settings, Filtering). The full URL-parameter set below still works on the iframe embed.
Missing a dashboard control you need to fully transition to Feeds 2.0? Contact us—we'd love to hear from you.
The list of modifications we will cover here:
Change the number of posts displayed in the feed above the Load More button
Data Attribute: per
Default: 100 (or the value set in your dashboard's Templates panel for Feeds 2.0)
Works with: Feeds 2.0 script embed ✓, iframe embed ✓
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.
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 the dashboard.
🌿 Tip: You can also set this directly from your feed dashboard. On Feeds 2.0, open the Templates panel from the bottom toolbar and change Posts Per Page. See Limiting the number of posts shown in your feed for details.
Limit the number of total pages of your feed that can be loaded
Data Attribute: pages
Default: infinity
Works with: iframe embed ✓ — not supported on the Feeds 2.0 script embed.
Example:
<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe?pages=1" frameborder="0" width="1000" height="1000"></iframe>
The pages attribute controls how many times a visitor can load additional posts in your Juicer feed.
By default, there's no limit. Visitors can keep loading posts until all are displayed.
Setting
pages=1restricts the feed to a single page of posts, with no option to load more.Setting
pages=2allows 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.
Limit the length of the post text and add a "Read More" link
Data Attribute: truncate
Default: infinity (or the value set in your dashboard for Feeds 2.0)
Works with: iframe embed ✓. For Feeds 2.0 script embed, set this from the dashboard instead.
Example:
<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe?truncate=500" frameborder="0" width="1000" height="1000"></iframe>
The truncate attribute limits the visible text length of each post. If a post exceeds the limit it's trimmed and a "Read More" link is added. Posts shorter than the limit are unchanged.
For example, truncate=150 displays 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.
🌿 Tip: On Feeds 2.0, open the Post settings panel from the bottom toolbar and set Truncate at characters.
Change the space between posts
Data Attribute: gutter
Default: 20
Works with: iframe embed ✓. On Feeds 2.0, set this from the dashboard instead.
Example:
<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe?gutter=10" frameborder="0" width="1000" height="1000"></iframe>
The gutter attribute sets the gap between posts in pixels. Adjust it to increase or decrease the feed's visual density to match your website's design.
🌿 Tip: On Feeds 2.0, open the Templates panel from the bottom toolbar and adjust the Spacing slider.
Change the number of columns
Data Attribute: columns
Default: 3
Works with: iframe embed ✓. On Feeds 2.0, set this from the dashboard instead.
Example: columns=4 would set your feed to display in four columns, space permitting
<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe?columns=4" frameborder="0" width="1000" height="1000"></iframe>
⚠️ 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.
🌿 Tip: On Feeds 2.0, open the Templates panel from the bottom toolbar and pick a Columns value.
Change the timing of the slider
Data Attribute: interval
Default: 5000
Works with: iframe embed ✓. On Feeds 2.0, set this from the dashboard instead.
Example: interval=7000 would make your slider advance every 7 seconds
<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe?interval=7000" frameborder="0" width="1000" height="1000"></iframe>
The interval attribute determines how quickly the slider advances to the next set of posts. Values are in milliseconds.
Faster progression — use a lower value (e.g.,
interval=3000for 3 seconds)Slower progression — use a higher value (e.g.,
interval=10000for 10 seconds)Stop automatic progression — set to
0or a very high number
🌿 Tip: On Feeds 2.0, open the Templates panel from the bottom toolbar, switch to the Slider layout, and set Slider Settings → Speed.
Filter the posts based on a source
Data Attribute: filter
Default: none
Works with: Feeds 2.0 script embed ✓, iframe embed ✓
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.
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=tbtfor 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 us for unique source ID numbers.
This attribute filters based on sources, not post content. For content-based filtering, use the Filtering panel in your Feeds 2.0 dashboard.
Display posts in a certain date range
Data Attribute: starting-at and ending-at
Default: none
Works with: iframe embed ✓. Not supported on the Feeds 2.0 script embed today — use the iframe embed if you need URL-driven date ranges, or filter from the dashboard.
Example: starting-at=2024-06-01&ending-at=2024-06-30 displays posts from June 2024 only.
<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe?starting-at=2024-06-01&ending-at=2024-06-30" frameborder="0" width="1000" height="1000"></iframe>
Format:
Use the date format
YYYY-MM-DDOptionally, add time:
YYYY-MM-DD HH:MM
Usage:
starting-at: Shows posts newer than the specified dateending-at: Shows posts older than the specified date
⚠️ Dates should be in UTC (Coordinated Universal Time) for consistency across different time zones.
Use a different template than the one set in the dashboard
Data Attribute: style (iframe embed only; not supported on the Feeds 2.0 script embed)
Default: uses the template set in your dashboard
Works with: iframe embed ✓. On Feeds 2.0, template selection is handled exclusively from the dashboard — style URL overrides do not apply.
🌿 Tip: On Feeds 2.0, open the Templates panel from the bottom toolbar to switch between Grid, Slider, and List layouts and pick a template within each. If you need the same source feed to render differently on two pages of your site, the cleanest path today is to duplicate the feed with a different template and embed each one where appropriate. Contact us if you'd like per-embed template overrides on Feeds 2.0 — we'd like to hear how you'd use it.
Open the overlay by clicking on a post
Data Attribute: overlay
Default: uses the setting from your dashboard
Works with: iframe embed ✓. On Feeds 2.0, set this from the dashboard instead.
Example: overlay=true
<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe?overlay=true" frameborder="0" width="1000" height="1000"></iframe>
The overlay attribute determines what happens when a visitor clicks on a post in your Juicer feed.
overlay=true— opens an overlay within your page, displaying the post detailsoverlay=false— directs visitors to the original post on the social media platform
🌿 Tip: On Feeds 2.0, open the Settings panel from the bottom toolbar and toggle Open overlay on post click.
Run JavaScript after the feed has rendered
Data Attribute: none — listen for the events from your own JavaScript on the host page.
Works with: Feeds 2.0 script embed ✓ (juicer:feedLoaded and juicer:feedPaginated).
Juicer dispatches DOM events when your feed finishes rendering. This lets you run custom JavaScript that modifies the feed or reacts to its behavior.
Supported events:
juicer:feedLoaded— fires on the initial feed renderjuicer:feedPaginated— fires after more posts are loaded (Load More, infinite scroll, or page change)
Example:
document.addEventListener('juicer:feedLoaded', function(event) {
// Runs after the initial feed render
});
document.addEventListener('juicer:feedPaginated', function(event) {
// Runs after more posts are loaded
});Use cases:
Modify feed appearance dynamically
Integrate feed interactions with other page elements
Track user interactions with your feed
⚠️ Ensure your custom function is defined and accessible in your page's JavaScript before the Juicer feed loads.
If a parameter from this list doesn't take effect, contact us with the page URL where you've embedded the feed and the embed snippet you used, and we'll take a look.