Here are directions for adding a Twitter widget to the sidebar of your website.
- First, you need to have, or create, a custom theme.
- Next, log in to your Twitter account and customize your Twitter profile widget.
- Go to Website > [name of site] > Theme and open the _columns_2.html file.
- (If you're using the stock theme Verve, see the instructions below)
- 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.
Verve Instructions
For the Verve stock 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.
- Go to Website > [name of site] > Theme and open the "layout.html" file.
- Scroll down to line 158 and hit enter so that one closing "</div>" is above your cursor and one "</div>" is below.
- 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:
<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.
Showing 41 reactions
Sign in with
If you’d like to have the twitter feed show up in the sidebar but only on certain pages, you can use liquid conditional (IF/THEN) statements: http://nationbuilder.com/liquid_basics#tags
For example, you could surround that twitter HTML code from the article above with the following two lines of code:
{% if page.slug == ‘learn_more’ %}
TWITTER CODE HERE
{% endif %}
If you would rather have the twitter feed on a page but not in the sidebar, the easiest method will be to generate an embed code from twitter and then paste that code into the “Template” tab of that particular page using this method: http://nationbuilder.com/how_to_add_a_widget_to_webpage
Here is where you can generate the embed code: https://support.twitter.com/articles/20170071
Shoot us an email at [email protected] if you have trouble with this.
I’ve got the Verve theme and then made it custom.
I then added my Twitter widget code to _columns_2.html (to lines 23 and 25 from the above example, as per Ian’s comments).
I also added the Twitter widget code to _supporter_nav.html (but have no idea where to place it).
No Twitter stream showing on my site (www.historycouncilvic.org.au).
Any tips or advice? Thanks
Hines Digital
Certified Architect
Certified Expert
-You’d actually need to paste the Twitter embed code into the template in two places. In the screenshot above (as an example), you’d want to past it on lines 23 & 25. That’d show it both for folks who’re logged in and logged out.I’m using the Verve theme.
Thanks.
Certified Expert
Joe, farther down in the Twitter documentation it gives an example of data-tweet-limit=5 placed into the code. Basically, you have to add it to the auto-generated embed code.
Caroline, Twitter does allow you to customize whether to use their header and footer. You’ll need to read and use the instructions here: https://dev.twitter.com/docs/embedded-timelines
Hines Digital
Certified Architect
Certified Expert
I have very limited understanding of code, and have not been able to figure out how to shorten the number of tweets displayed on my home page.
Twitter’s instructions say:
“To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit=”5" attribute with any value between 1 and 20 Tweets"
However, I do not see any “data-tweet-limit=”5" wording in the code that Twitter generated for my widget.
Any advice?
Thank you!
Twitter widgets are usually longer than they are wide, which is why we’d recommend putting it in the sidebar rather than in the header area of your page layout. But you can fully customize an embedded timeline from Twitter. Their full documentation is available here: https://dev.twitter.com/docs/embedded-timelines
Pasting it into the _columns_2.html file worked, so the Twitter feed shows up when a visitor IS logged in, but not when the visitor is NOT logged in. (which seems like the opposite effect from what the directions describe.
Finally, once the widget is embedded, how to I move it higher up on the page, so that it’s visible “above the fold”?