Display Tweets In Your Sidebar Without A Plugin

Posted on 22. Dec, 2009 by Shawn Ramsey in Articles

There are dozens of WordPress plugins available for displaying your tweets in the sidebar of your blog. I’ve tried just about all of them here at bluefaqs and just couldn’t find one that I was satisfied with. I needed something simple (minimalistic style) and easy to customize.

If you’re having the same problem and have given up on plugins, don’t quit just yet. Pulling your tweets from Twitter is much easier than you think.

Let’s walk through some easy steps for placing a neat little DIV in the sidebar of your blog that can display up to 20 of your latest tweets.

This is what we’re after

Of course there won’t be any shadowing and it will be in your sidebar not the middle of a page. You can also see a slightly customized version somewhere in my sidebar over there →

Situating the Code

I’m going to be pretty basic in the steps, so that whether you’re a complete novice or have been writing code for years you can easily understand where to place things.

Step 1

Find the stylesheet for your theme. You can get to it by going to Editor located under Appearance in the left-hand side of WordPress.

Take the following code and paste it into your stylesheet.css file:

/*Styling the DIV */

#twitter {
width: 250px;
margin: 10px auto;
padding: 10px;

}

/* Twitter Username */

#twitter h1 a {
font: 33px Arial, Helvetica, Sans-Serif;
color: #3251A2;
letter-spacing:-2px;
font-weight: bold;
text-decoration: none;

}

#twitter h1 a:hover {
text-decoration: underline;

}

/* For indenting the Tweets */

#twitter ul {
list-style: none;
padding: 0 0 0 0px;

}

/*Adds spacing between tweets */

#twitter ul li {
padding: 10px;

}

/* Styles the time stamp */

#twitter ul li a {
font: italic 14px Georgia, Times, Serif;
color: #3251A2;

}

#twitter ul li a:hover {
text-decoration: none;

}

/* Stlyes the tweet text */

#twitter ul li span {
font: 18px Helvetica, Arial, Sans-Serif;
color: #323232;

}

/* Styles any links within the tweet */

#twitter ul li span a {
font: 17px Helvetica, Arial, Sans-Serif;

}

Step 2

We’re already half-way done. Now, you see that HTML code way down below? We need to change four little sections so that you’re displaying your tweets and not mine. Unless you want to display mine, which is cool with me.

Go ahead and copy/ paste the HTML code into a blank HTML widget in WordPress. Then make the changes.

Once you have it in there, check it out on your site and make any changes to the CSS, such as font size, color etc. until you get it looking the way you want.

Here is the HTML:

<div id=”twitter”>
<h1><a href=”http://twitter.com/bluefaqs”>@bluefaqs</a></h1>
<ul id=”twitter_update_list”></ul>
</div>
<script src=”http://twitter.com/javascripts/blogger.js” type=”text/javascript”></script>
<script src=”http://twitter.com/statuses/user_timeline/bluefaqs.json?callback=twitterCallback2&count=5″ type=”text/javascript”></script>

Note:

This was designed to fit into a sidebar with a width around 260px. If your sidebar is smaller, you will have to change the width of the DIV and make some text size changes for aesthetic reasons.

Also, your sidebar may have some CSS already in place for styling lists but this could be a good thing as it should style it to look the same as other lists in the sidebar.