How to Embed a Stylized Twitter Timeline to your Website

Twitter offers several widgets for you to embed a timeline of your tweets in your website. But the problem with these widgets is that they are essentially inflexible boxes that can take up more room than needed. On top of that, the style of these widgets will likely clash with your website's design if it uses a different style than the widget.

But before Twitter began offering this widget, Twitter offered a much more flexible script that allowed you to embed your tweets. Though I admit, it's somewhat more confusing and less appealing to the average Twitterer, it's nonetheless the much preferred Twitter embed among web designers. And even though Twitter no longer promotes it, it still works! Here's a comparison with the current widget on the left and the older one on the right using the @IceCaves account as an example:

Twitter's Profile Widget

Previous Embed with Added Styles for IC

twitter.com/IceCaves

The Code

The first part of the code is the where the tweets are displayed:

The tweets will be added via JavaScript each as an individual list item. It's so simple, that you can easily use CSS to manipulate the tweets and the area where they are displayed.

This part of the code is what calls up and executes the JavaScript that calls up the tweets:

You can change "IceCaves" to your account name and "5" to the number of tweets you want to call up. Since this directly loads from Twitter, if Twitter goes down (think fail whale), then this script also goes down. Twitter recommended placing this part of the code just before the </body> end tag so that your site isn't slowed down whenever Twitter is down.

Stylizing and Adding to the Code

Now I will go through some things you can do to stylize the code.

Add a link back to you main Twitter profile somewhere. The text can read anything. It could just say "follow me" or "Twitter" to name just a couple of ideas.

One of the things you can do is place it in a scrollable area. This will allow you to embed several more tweets and allow your users to scroll through more of your recent tweets. It might just be the thing that will encourage them to follow you.

CSS:

If you want, you can remove the bullet points as well as the margin and padding for the <ul> list items like I did in the example above.

You can also change the list from unordered (<ul>) to ordered (<ol>) to instead of showing bullets next to the tweets, you can display numbers if you want.

CSS:

Whether or not you remove the bullet points, it might help to add a border to separate the tweets from each other.

CSS:

What the above code will do is stylize the hyperlinks of the list items, but that's not all! The second line of the code above affects only hyperlinks in the tweet, which means that the first line affects everything else, which is the tweet's time and date. What I did with the code above was apply the display:block element to the time so that it could stand alone in its own line, apart from the tweet message. What the second line does is change the color of the links in the tweets to emphasize them and make the tweets more readable. Both links are in bold.

Take it Further

The purpose of the codes above aren't for copying but so you know some of the things you can do. Take it further and your own styles and effects. Get creative!

What other techniques do you use on your Twitter embeds? Please share in the comments!