Style Your Twitter Tweets Without Plugins

Did you know Twitter provides you with a list of CSS classes that you can use to change how your tweets look on your website? If you aren’t already logged into your twitter account, go ahead and login. Next, go here: http://twitter.com/badges. The ‘badge’ we’ll want to use isn’t readily available, because we’ll be customizing our own; So, check the radio button for the “Other” option.

tweetother.png

You’ll be introduced to three new choices: Flash, Flash With Friends, and HTML/Javascript. Go ahead and select the HTML/Javascript option.

badgetype.png

The next menu allows you to specify certain things that affect how your tweets are listed. Essentially there are two; The title of your tweet list and how many tweets you’d like to display. Have a look at the “Get The Code” box; This is what you would paste into your website.

tweetcode.png

Let’s have a look at my own Twitter code 

1
2
3
4
5
6

<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/CHennis.json?callback=twitterCallback2&amp;count=5"></script>

  • The first line specifies the CSS division twitter_div. This is our outer-most div container.
  • The second line contains a h2 tag class that specifies how we’d like our title to display.
  • The third line begins our unordered list and tells our browser to use the CSS ID twitter_update_list to style it.
  • The fourth line closes our outer-most div container.
  • And our last two lines are javascript supplied to us by twitter.com. The first line tells our web browser which javascript file to look for on twitter.com, and the second line displays our options that we’ve selected in our twitter account. Replace my username (CHennis) with yours, and replace the number after count= with the number of tweets you’d like to display on your website. I’ve selected to display 5.

The CSS Classes

Let’s start by me showing you my own CSS class specifications:

1
2
3
4
5

div#twitter_div { width:300px; height:auto; margin-top:35px; border:#000 1px solid }
h2.sidebar-title { color:#ddd }
ul#twitter_update_list { font-size:11px }
ul#twitter_update_list li { padding-top:15px }
ul#twitter_update_list a { color:#fe9148 }

  • Line one says I’d like my tweets to be contained in a 300pixel wide space that stretches in height to fit my tweets. I’d like this 35pixels from the top of whatever is above it, and I’d like a black border 1pixel wide to stretch around the space.
  • Line two says I’d like my title text to be in a gray color.
  • Line three says I’d like my list to have a font-size of 11pixels.
  • Line four says for each line listing, I’d like to have 15 pixels of padding from the top.
  • Line five says I’d like any link colors to be in the fe9148 color code.

And this CSS code produces this..

jungletweets.png

That’s pretty much it, folks! Have fun and don’t be nervous about experimenting to find that perfect look.

Related posts on JungleJar:

Tagged with: • • • • • • • •
Categorized as: CSS • articles • development • tutorials • twitter • webapplications • webdesign • webdevelopment

7 Brilliant Insights!

Have valuable insight?


CommentLuv Enabled
preload preload preload