Adding a Social Media section to your NationBuilder site with Juicer

NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.

Get the code

Add a Social Media section into your NationBuilder site using Juicer.io.

Many organisations we work with want supporters to be able to easily get a glimpse of what the organisation has been doing, what recent resources they have created, and what events are upcoming. They often do this already via social media, but need their website to also be up to date, and consistent with their efforts on Facebook and Twitter.

A good way of achieving this is by embedding social media feeds directly onto a website - often the home page.

One tool we use to help clients with this is A useful tool we often use for this is Juicer and in this tutorial we’ll show you how we do it.

Step 1:

Create a Juicer.io account. There is an option to create a temporary free account if it is needed.

Step 2:

Choose the social media you want to display through the Juicer account. You can choose Facebook, Twitter, Instagram and more. You can also choose to display a mix of all social media streams.

Step 3:

Make customisations through Juicer, such as the number of columns, feed style and colours, embedding it into your site. Note that after embedding the code, any changes you make within Juicer will still be reflected on the live site.

Step 4:

Download the HTML file called “_partial_juicer_section.html” which will go as a 100% width section anywhere on your site.

Step 5:

Edit the “layout.html” file, adding the new partial anywhere on the site. For example, to add it to the homepage you can use liquid like:

{% if page is.homepage %}
   {% if page is.homepage %}
{% endif %}

Step 6:

Edit the “_partial_juicer_section.html” file replacing where it says “JUICER’S-SITE-ID” with the current id given by Juicer under the “Embed in your Site” tab.

Note: You can use the “iframe” version of Juicer but it isn’t as customisable and will leave a second scrolling bar in some browsers. You can also use the “standard” version of code given by Juicer to embed within the section, but this version might cause trouble with other custom javascrips, jquery or plugins in your site. That’s why we recommend using the “embed-no-jquery.js” file within our provided “_partial_juicer_section.html”.

So you do not need to use the complete code given by Juicer - just copy the data-feed-id that you see which we left as “JUICER’S-SITE-ID” and highlighted in the example below, then replace it in the HTML partial where it currently says “JUICER’S-SITE-ID”.

Step 7:

That’s it, you Juicer section should look something like the below image (which is from the Repoweralicesprings site).

Add any other HTML to the partial, like a title within the opening <div class="container"> and its closing div </div>, add styles to remove the Juicer default title or change the “loading more” button aspect. See the snippet below for an example of styles.

.juicer-feed h1.referral {
  display: none!important;
}
.juicer-feed a.j-paginate.juicer-button {
  width: 200px;
 padding: 7px 25px;
 font-size: 17px;
  background-color: transparent;
 color: orange;
 border: 1px solid orange;
}
.juicer-feed {
  a.j-paginate.juicer-button {
    &:hover, &:active, &:focus {
      background-color: orange;
      color: #fff;
    }
  }
}

Get the code