Youtube and Instagram added to Facebook and Twitter in Site Settings?

Are we limited to only Facebook and Twitter in the footer? We would like to have Youtube and Instagram reflected as well.

Official response from

Youtube and Instagram icons, along with others, are able to be embedded within the footer of a NationBuilder website.  It does require a bit of customization of the code to accomplish so I've demonstrated the procedure for an Instagram account setup below.  This procedure can be replicated for various social media icons.

First, you'll want to find an Instagram icon that you'd like to feature.  Doing a quick Google search for 'Instagram icon' should pull up some sufficient sources.  Save the image as we'll be uploading this image in a bit.

Within your NationBuilder dashboard, go into Website > Theme > Files and upload the icon image you have just saved.  Right click on the title of the image to open into a new tab/window and copy the cloudfront URL that is generated.  We'll be pasting this URL within our code shortly.

 

Screenshot_2017-06-04_17_53_19.png

 

From here, you'll want to open up your layout.html file by routing to Website > Theme.  Find the content after the <div class="span2 footer-right footer-social-links"> within the <footer> tag. 

Below the twitter and facebook if statements, you'll want to add the following code; substituting links that are relevant to your account. 

 

<a href="Insert Instagram Account Link" target="_blank"><img src="Insert Cloudfront Instagram Icon Link" alt="Instagram Page"</a>

 

 

Screenshot_2017-06-04_22_07_59.png

 

Click 'Save and Publish Changes' and sneak a peak at how your icon looks.  Depending on the size of the icon image being used, you'll probably need to resize or re-position the icon using inline CSS styling.  W3 schools has some useful documentation on styling that can be found here.

 

Complete and current information on how to use NationBuilder is available in the documentation section.

Share this post

Showing 4 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.