Juicer

The Juicer Blog

Create a custom, embeddable, aggregate social media feed with CSS and Juicer

Posted January 24th, 2015 by Ryan in

Creating an embeddable social media feed with Juicer is super easy. All you do is enter your social media accounts names (no signing in required!) and the copy and paste the embed code. Juicer also includes several pre-build templates that will display your social media feeds in a variety of ways depending on your aesthetics and preferences, and whichever one fits in to your site's style the best.

But what if you want to customize the look of your social media feed? Is it possible? Of course it is! Juicer makes it easy.

Warning. This guide is going to require a small amount of coding, only in CSS. Even if you don't know a lick of CSS this guide should be pretty straightforward. Don't be scared, we'll walk you though every step.

What we will be doing

The page example below uses a Juicer feed with completely custom CSS. We're going to walk through every step required to get the Juicer feed up and running and styled just like this.

Getting Your Account Set Up

  • You'll need a Juicer account. Sign up and create a feed and add some sources. Read this to get you started.
  • The Descendants feed has two social media accounts. A Facebook page with the name descendantstv and an Instagram with the username descendantstv
  • Once we have the feed set up we went into the "Feed Settings" and made sure we had the default settings set:

Descendants Feed Settings

Obviously your settings don't need to be exactly the same but that's what we are working with for this feed.

Embedding the feed

The Descendants Juicer feed lives in an html file called lately.html We'll open it up and add the following lines (omitted irrelevant html)

<html>
  <head>
    <title>Descendants Lately</title>
    <link href="/assets/application.css" media="screen" rel="stylesheet" />
  </head>

  <body>
    <h1>Lately</h1>

    <script src="//assets.juicer.io/embed.js" type="text/javascript"></script>
    <link href="//assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
    <ul class="juicer-feed" data-feed-id="descendants">
      <h1 class='referral'><a href='http://www.juicer.io'>Powered by Juicer</a></h1>
    </ul>
  </body>
</html>

What we've got here is just the standard Juicer embed in a more or less blank HTML page. The most important part being:

<script src="//assets.juicer.io/embed.js" type="text/javascript"></script>
<link href="//assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
<ul class="juicer-feed" data-feed-id="descendants"><h1 class='referral'><a href='http://www.juicer.io'>Powered by Juicer</a></h1></ul>

Which is our Juicer embed code (you'll have to use your embed code for your feed). That makes the magic of the juicer feed happen.

Customizing the Styles

If we view lately.html we should see something like this:

Descendants Lately with Bad style

As you can see, there is something screwy going on here. Let's open the chrome inspector (right click "inspect element" on a weird looking element):

Descendants Lately with Bad style and inspector

As we can see here, the <p> tag is inheriting some styles from the sites base stylesheet, which we need to overwrite. Use the chrome inspector to determine some level of specificity for the Juicer CSS. In this case we need to fix this for the Juicer embed, so after our embed code we'll add a <style> block

<style>
</style>

Then add some css to this style block that will fix the visual error:

<style>
  .juicer-feed .j-message p {
    width: 100%;
    display: block;
    float: none;
  } 
</style>

Refresh the page and it's looking more like it should!

Descendants Lately fixed error

As you can see, the feed is working but it's currently white, which doesn't fit in with the black aesthetic of the site. The easiest way to deal with this is to overwrite the existing Juicer styles. So we'll use the chrome inspector again and determine what element gets the white background:

Descendants Lately Feed Item Inspector

it seems to be the .feed-item tag, but specifically it's getting it from this style rule .juicer-feed.modern li.feed-item so let's add some css to our <style> tag section to overwrite this:

.juicer-feed.modern li.feed-item {
  background: transparent;
}

Now when we refresh the page we see it's still looking a bit weird:

Descendants Lately No Background

So let's write a few more style rules to clean things up:

.juicer-feed.modern li.feed-item {
  background: transparent;
  border: none;
}

.juicer-feed.modern .j-message {
  color: white;
}

.j-poster h3 { color: white; }

.juicer-feed.modern .j-poster {
  padding: 14px 0 12px;
}

.juicer-feed.modern .j-text {
  padding: 20px 0;
}

Now when we refresh the page it will look something like this:

Descendants Lately Some Style

This is looking a lot nicer!

Let's remove the "likes" count (The client doesn't want them in this feed) and add the word "comments" to after the count of comments (we can do this with css pseudo-elements) and remove the comment icon from before this section:

ul.juicer-feed .j-meta li:last-of-type {
  display: none;
}

ul.juicer-feed .j-meta .comment {
  font-size: 12px;
  font-weight: bold;
}

ul.juicer-feed .j-meta .comments:before {
  content: '';
}

ul.juicer-feed .j-meta .comments:after {
  content: ' comments';
}

.juicer-feed .j-meta {
  border-top: 1px solid #808080;
  padding-top: 10px;
}

Descendants Lately Meta Partial

Finally for the most difficult thing we are going to do. We are going to use custom icons to display which feed type it is in the bottom left. Luckily we can leverage existing classes on the Juicer feed to determine which image to show:

ul.juicer-feed .j-meta a:before {
  content: '';
}

ul.juicer-feed .j-meta .facebook, ul.juicer-feed .j-meta .instagram {
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  display: block;
}

ul.juicer-feed .j-meta .facebook {
    background-image: url(/images/facebook-icon.png);

ul.juicer-feed .j-meta .instagram {
  background-image: url(/images/instagram-icon.png);
}

This will show the correct icon depending on what social media source it is.

Descendants Lately Final

That's it!

After refreshing the page we realized the Juicer loader was orange, but we wanted to make it white to blend in with the rest of the site, so we also added this css:

.j-loading {
  border-color: #fff;
}

.j-loading:before {
  background-color: #fff;
}

As you can see, it's not terribly difficult to customize the appearance of a Juicer feed to anything you like! It certainly helps to have some experience in CSS but even if you don't it's not impossible to guess your way through it.

You can see the live custom feed here. Let us know if you have any questions or comments, or feel free to contact us as always.

Here's the entire <style> tag:

<style>
  .juicer-feed .j-message p {
    width: 100%;
    display: block;
    float: none;
  }

  .juicer-feed.modern li.feed-item {
    background: transparent;
    border: none;
  }

  .juicer-feed.modern .j-message {
    color: white;
  }

  .j-poster h3 { color: white; }

  .juicer-feed.modern .j-poster {
    padding: 14px 0 12px;
  }

  .juicer-feed.modern .j-text {
    padding: 20px 0;
  }

  ul.juicer-feed .j-meta li:last-of-type {
    display: none;
  }

  ul.juicer-feed .j-meta .comments {
    font-size: 12px;
    font-weight: bold;
  }

  ul.juicer-feed .j-meta .comments:before {
    content: '';
  }

  ul.juicer-feed .j-meta .comments:after {
    content: ' comments';
  }

  ul.juicer-feed .j-meta {
    border-top: 1px solid #808080;
    padding-top: 10px;
  }

  ul.juicer-feed .j-meta .j-facebook, ul.juicer-feed .j-meta .j-instagram {
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    display: block;
  }

  ul.juicer-feed .j-meta a:before {
    content: '';
  }

  ul.juicer-feed .j-meta .j-facebook, ul.juicer-feed .j-meta .j-instagram {
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    display: block;
  }

  ul.juicer-feed .j-meta a:before {
    content: '';
  }

  ul.juicer-feed .j-meta .j-facebook {
    background-image: url('/assets/map/facebook.png');
  }

  ul.juicer-feed .j-meta .j-instagram {
    background-image: url('/assets/map/instagram.png');
  }

  ul.juicer-feed .j-meta .j-facebook {
    background-image: url('/assets/map/facebook.png');
  }

  ul.juicer-feed .j-meta .j-instagram {
    background-image: url('/assets/map/instagram.png');
  }

  .j-loading {
    border-color: #fff;
  }

  .j-loading:before {
    background-color: #fff;
  }
</style>