Juicer

The Juicer Blog

Customizing your Juicer Embedded Social Media Feed

Posted May 29th, 2015 by Ryan in

Juicer has a lot of hidden feed customization available, you can do pretty much anything you want to with your feed, and this post will show you how.

The way that this typically works is using data-attributes on your embed <ul> like so:

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

If you are using the wordpress plugin you can add these customizations to your shortcode or php function as well, just don't use the data part. The wordpress equivalent of the above embed code is:

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

and

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

If you are using the iframe code to embed your feed, you can add these parameters to the iframe src url like so:

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

Here's all the ways you can customize your juicer feed:

Change the number of posts that show up in my 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 my 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>

truncatemakes 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 my 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 social account

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

Pass in either a name of a social account (capitalized) like "Facebook" or "LinkedIn" to only show posts from that source (if you have two facebook sources it will show the posts from both).

Or pass in the name on the account to only show posts from that particular source. For example, if I had an instagram source of #tbt in my feed i could pass in tbt to only show posts from that source.

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. For example, if you wanted to change the text of the "all" filter you could do something like this:

<ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-after="updateFilters()"></ul>
<script>
  function updateFilters() {
    $('.juicer ul.filters li.all').text('Something else');
    // etc
  }
</script>

But really you can run any javascript you like here.