Code customizations for date range, feed style, spacing, filtering, and more

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.

First things first, you'll be working with your Juicer embed code.

For standard websites:

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.

If your snippet looks like this below, it means that you are using our older embedding code. You can tweak it similarly, in case you still have it, although we would advise you to update the embed snippet:

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:

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:

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):

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:

Examples:

The list of modifications we will cover here:

Data Attribute: per
​Default: 100

Example:

The per attribute determines the number of posts displayed on each page of your Juicer feed. By default, Juicer shows 100 posts per page (or all your posts if you have fewer than 100).

When users reach the bottom of a page, one of two things will happen:

If you want to limit the feed to only the first page of posts without allowing further loading, you can use the pages attribute (explained in more detail below).

Data Attribute: pages
​Default: infinity
​Example:

The pages attribute controls how many times a visitor can load additional posts in your Juicer feed. Here's how it works:

You can combine the pages attribute with the per attribute to fine-tune your feed's behavior. For example:

This combination gives you precise control over the number of posts displayed and how many times visitors can load more.

Data Attribute: truncate

Default: infinity

Example:

The truncate attribute allows you to limit the text length of your social posts. Here's how it works:

Benefits of using truncate:

Example usage:

would display the first 150 characters of longer posts, followed by a "Read More" link.

Data Attribute: gutter

Default: 20 (or 0 on “image grid” style)

Example:

The gutter attribute controls the space between posts in your Juicer feed. Here's what you need to know:

Example usage:

would set a 10-pixel gap between posts. By adjusting the gutter, you can fine-tune your feed's visual density to match your website's design.

Data Attribute: columns

Default: 3

Example: columns=4 would set your feed to display in four columns, space permitting

The columns attribute allows you to adjust the number of post columns in your Juicer feed. Here's what you should know:

Data Attribute: interval

Default: 5000

Example: interval=7000 would make your feed advance every 7 seconds

The interval attribute determines how quickly your slider or widget advances to the next set of posts. Here's what you need to know:

Key Points:

Customization Options:

Data Attribute: visible

Default: none

Example: visible=12 would display 12 randomly selected posts on your living wall

The visible attribute allows you to control how many posts appear at once on your living wall feed. Here's what you need to know:

Key Features:

How it works:

Comparison with per attribute:

Benefits:

Data Attribute: filter

Default: none

Example: filter=Facebook,tbt would show posts from all Facebook sources and the #tbt Instagram source.

The filter attribute allows you to selectively display posts from specific sources in your Juicer feed. Here's how to use it effectively:

Filtering Options:

Data Attribute: starting-at and ending-at

Default: none

Example: starting-at=2024-06-01&ending-at=2024-06-30 displays posts from June 2024 only

The starting-at and ending-at attributes allow you to show posts from a particular date range in your Juicer feed. Here's how to use them:

Format:

Usage:

Examples:

Data Attribute: style

Default: none

Example:

The style attribute allows you to use different visual themes for the same Juicer feed across various pages of your website. Here's how it works:

Key Points:

How to Use: Add the style attribute to your embed code, like this:

Available Themes:

Example Scenario: You have a feed with the "modern" theme set in your dashboard, but you want to use:

Solution:

Data Attribute: overlay

Default: none

Example: overlay=true

The overlay attribute determines what happens when a visitor clicks on a post in your Juicer feed. Here's how it works:

Options:

Key Points:

When to Use:

Data Attribute: none

Default: none

Example:

Juicer publishes events that allow you to run custom JavaScript functions after your Juicer feed has been rendered. This powerful feature enables you to modify or interact with your feed programmatically.

Key Points:

Supported events:

Example: If you would like to catch the pagination, our example function would start like below.

Use Cases: