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 show up in each page of your Juicer Feed. When you get to the bottom of your feed Juicer will automatically "infinitely scroll" it will add the next page of results to the bottom of the feed. If you want to prevent this behavior, see the next section pages.

Juicer by default shows 100 posts (or all your posts if you have less than 100) but if you want your feed to be smaller, this is the attribute for you.

Limit infinite scrolling in the feed

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 your feed will infinitely scroll. By default this is infinity, meaning if you scroll down, the juicer feed will keep adding more posts to the feed until all your posts are visible.

If you set this to 1 your juicer feed will not infinitely scroll, it will only show the first page of results.

If you sent it to 2 it will infinitely scroll just once.

If you want to limit the number of posts that show up in total you may want to combine this with the above per attribute, to only show the first 15 results, and not infinitely scroll, for example.

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 makes it so that Juicer will only show as many characters as you provide as your value in each post (at the max), for any posts longer it will display a "Read More" link. If the 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 your posts in your feed in px. 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 your feed will display in. You can also edit this attribute in your feed editor itself.

Juicer will not allow a column to be less than 200px (as it doesn't look good) so if it's not showing the correct number of columns you probably need a bigger containing element for your feed.

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. Set to a really high number if you don't want it to progress at all.

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>

Pass in 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, pass in 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?