Juicer offers feed customizations beyond what is shown in your dashboard. You can make these changes by adding code into the <ul> line of your Juicer embed code. This is typically the last line of the Juicer code on paid plans, and the second-to-last line of code on free plans. 

Below is an example of the line you will be working with. This example has a customization included (in bold) that limits the number of posts shown to 15: 

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

In your code, "YOUR-JUICER-FEED-NAME" will already have your unique feed ID shown. 

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

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


<?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. 

Change the number of posts displayed in the feed

Data Attribute: per
Default: 100
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-per="15"></ul>

The per attribute defines how many posts appear in 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>

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 "Read More" link

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

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>

The gutter attribute 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>

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>

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>

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>

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>

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 on post click

Data Attribute: overlay
Default: none
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-overlay="true"></ul>

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. 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: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-after="updateFilters()"></ul>

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. 

Did this answer your question?