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.

Juicer offers feed customizations beyond what is shown in your dashboard. You can make these changes by adding code into the feed or script element of your Juicer embed code.

If you are using a standard website, with our new version of the snippet that improves the accessibility of the feed, below is an example of the line you will be working with. This example has customization included (in bold) that limits the number of posts shown to 15 and a Load More button will appear after those 15: 

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

The older snippet looks like this, so you can tweak it in the similar manner, in case you have that one:

<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 both the <script> and <ul> versions of the customizations.

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=1'); ?>

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. 

The list of modifications we will cover here:

1. Change the number of posts displayed in the feed above the Load More button
2. Limit the number of total pages of your feed that can be loaded
3. Limit the length of the post text and add a “Read More” link
4. Change the space between posts
5. Change the number of columns
6. Change the timing of the widget or slider
7. Filter the posts based on a source in your “Social Media Sources”
8. Display posts in a certain date range
9. Use a different feed style than the one set in the dashboard
10. Open the overlay by clicking on a post
11. 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:
<ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-per="15"></ul>

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

The attribute per defines how many posts appear on each page of your Juicer feed. When you reach the bottom of a page of posts, Juicer will show a “Load More” button, or it will “infinitely scroll” if you have enabled this from your Feed Settings panel. If you do not want the feed to load more posts beyond the first page, see the “pages” attribute below. 

Juicer shows 100 posts per page by default (or all your posts if you have fewer than 100).

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

Data Attribute: pages
Default: infinity
Example:
<ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-pages="1"></ul>

<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 limits the number of times a visitor to your webpage can load more posts in your feed. By default, there is no limit, so the visitor can continue to load more posts until all of them have appeared. 

If you don't want the visitor to load more than a single page of posts, simply set this attribute to 1 . If you sent it to 2 , the visitor can load an additional page of posts. And so on. You can combine this with the “per” attribute explained above to set the number of posts per page.

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

Data Attribute: truncate
Default: infinity
Example:

<ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-truncate="500"></ul>
<script type="text/javascript" src="https://www.juicer.io/embed/YOUR-JUICER-FEED-NAME/embed-code.js?truncate=500" async defer></script>
Truncate allows you to limit the number of characters that appear in each of your social posts, before a “Read More” link appears. This is a way to bring more consistency to the size of your posts or to take up less space on your page overall. If a post is shorter than the number of characters you provide, it won't change.

Change the space between posts

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

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

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

The attribute gutter is the space between the posts in your feed in pixels. On the modern style, this defaults to 20, but you can edit this if you want to change the spacing.

Please note that this setting doesn't work for all feed styles, most notably slider.

Change the number of columns

Data Attribute: columns
Default: 3
Example:

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

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

This allows you to change the number of columns of posts within your feed. You can also edit this attribute in your feed dashboard (from the “Feed Settings” panel). 

Juicer will not allow a column to be less than 200px, because it becomes too difficult to see. Juicer has responsive design – if your feed is appearing with too few columns, you may need to increase the size of the container on your webpage that is showing Juicer. 

Change the timing of the widget or slider

Data Attribute: interval
Default: 5000
Example:

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

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

The speed with which your slider or widget progresses, in milliseconds. By default, this is 5000 or 5 seconds. If you do not want the feed to advance on its own, simply set this to 0 or to a very high number. You can also change this from the “Interval” field in the Feed Settings panel of your Juicer dashboard. 

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

Data Attribute: filter
Default: none
Example:

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

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

Enter the name of a social network (capitalized) like “Facebook” or “LinkedIn” to only show posts from that network. If you have multiple sources from one network, it will display all of them. 

Or, enter the name of the source account or hashtag, to only show posts from that particular source. For example, if you have an Instagram source of #tbt in your feed, you can pass in tbt to only show posts from that source.

You can filter for multiple sources by separating them with commas, like so:

data-filter="Source1, Source2”

For more complex source filtering situations (multiple accounts with the same name, etc.) please contact us for support. We can provide you with unique ID numbers for each source in your “Social Media Sources” panel, which can be used in this customization. 

Please note that this customization will only filter based on your sources. It will not filter based on terms within the social posts. Use the filters in your “Moderate and Filter” panel to accomplish that.

Display posts in a certain date range

Data Attribute: starting-at and ending-at
Default: none
Example:

<ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-starting-at="2014-03-01" data-ending-at="2014-04-01"></ul>

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

Pass in a date in the format YYYY-MM-DD HH:MM (HH:MM optional) to either starting-at (show posts newer than this date) or ending-at (show posts older than this date. To filter by dates.

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

Data Attribute: style
Default: none
Example:

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

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

If you wanted to use the same feed on different pages with different styles you can pass in the name of the template in lowercase (“user”, “colors”, “classic”, “widget” etc.) as the style attribute to overwrite the template on a certain embed.

Open the overlay by clicking on a post

Data Attribute: overlay
Default: none
Example:

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

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

Set to “true” if you want the feed to open an overlay when a post is clicked in your feed. If set to false, when you click on the post, it will instead take you directly to the post on the social media provider (except for LinkedIn posts, in which case it will take you to the LinkedIn Posts page). This can be set from your feed dashboard in the settings as well, but if you set it directly on your embed like outlined here, that will override your dashboard settings.

Run JavaScript after the feed has rendered

Data Attribute: after
Default: none
Example:

(if you have an older embed method)

<ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-after="updateFilters()"></ul>

(if you have a newer embed method)

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

If you want to run some arbitrary JavaScript functions after the Juicer feed has rendered (likely to modify it) you can pass in the name of the function to the after attribute. The updateFilters() function written above is only an example. 

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