How can I display my latest Tweets?

Official response from

Here are directions for adding a Twitter widget to the sidebar of your website. 

  1. First, you need to have, or create, a custom theme.
  2. Next, log in to your Twitter account and customize your Twitter profile widget.
  3. Go to Website > [name of site] > Theme and open the _columns_2.html file.
    • (If you're using the public theme Verve, see the instructions below)
  4. You'll want to place the embed code in the files "_supporter_nav.html" and in "_columns_2.html"
    • Placing the code in the "_supporter_nav.html" file will place the widget in the side navigation bar when a supporter is logged in
    • Placing the code on the "_columns_2.html" file will place the Twitter widget in the sidebar for when a site visitor isn't logged into your nation. You still must add the code to your "_supporter_nav.html" file. 

insert Twitter widget code below this statement


 

Verve Instructions

For the Verve public theme, you'll want to follow steps 1 & 2 above, after completing those steps follow these updated directions. The Verve theme has it's supporter nav hidden until you click the gear at the top. 

  1.  Go to Website > [name of site] > Theme and open the "layout.html" file.
  2. Scroll down to line 158 and hit enter so that one closing "</div>" is above your cursor and one "</div>" is below. verve_twitter_insert.png
  3. Enter the code for the widget there. Make sure to click save and publish.
    • One additional thing that you might want to do is position your widget inside a new "<div>" tag and to give yourself a little room. Simply insert a new div with a margin-top value above the widget, it should look something like this: <div style="margin-top:20px;">
    • Then below your widget make sure to close your div by inserting a "</div>". The code you use should look something like the code below when your finished:

new_code.png

<div style="margin-top: 20px;">
<a class="twitter-timeline" href="https://twitter.com/kevinjcoleman7" data-widget-id="628656254479511552">Tweets by @kevinjcoleman7</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

If you followed the instructions correctly, it should display below the default social media share buttons at the bottom of your site and above the "Powered by people like you" section. 

twitter_work.png

 

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

Share this post

Showing 41 reactions

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