For this article I’m going to assume you have a Twitter account and a basic working knowledge of how to use it. If you don’t, you can check out Twitter.com – where you can sign up and learn more about Twitter’s basic functionality.

STEP 1 – Adding Twitter’s basic widget to your site

-There are 4 different types of widgets, we’re going to be focusing on the first two. The first one adds a list of all the tweets from a certain user (Profile Widget). The second one lists all of the tweets that contain a certain keyword (Search Widget). I’m going to show you how to use the Search Widget; but don’t worry, embedding the profile widget is very similar.

-Under Search Query, I’m going to put: kitten OR puppy filter:links

This Query returns Tweets containing the keyword kitten or the keyword puppy that have links attached to them. Twitter gives you a nice amount of filtering options and the following chart should demystify some of these options:

The Title or Caption Doesn’t matter, as in this example we will be hiding them anyway. Under Preferences I checked the “Load all tweets” option, and under dimensions I selected “auto width.” It Should look something like this at this point:

STEP 2 – Stripping some of the default style

To get rid of the Twitter header and footer, add the following to your page’s CSS (either in your external style sheet or in your header):

.newer-entries, .older-entries {
display: inline;
}

.twtr-ft, .twtr-hd {
display: none;
}

Also in the pasted code, change your shell background and tweats background options to ‘none’

It should now look like this:

STEP 3 – Modifying Elements and Adding a Custom Header

You can get rid of any element by setting it’s display to none via CSS.

example:

.twtr-fav {
display: none;
}

Here is a list of the classes that the twitter widget uses:

.twtr-avatar img = the user picture

.twtr-timestamp = how long ago the tweet was posted

.twtr-reply = reply button

.twtr-rt = retweet button

.twtr-fav = favorite button

.twtr-widget a.hashtag = all hashtags (#tag)

.twtr-widget a.username = all usernames (@username)

.twtr-tweet = the whole tweet block

.twtr-widget = the entire twitter widget

You can also style these elements any way you want instead of hiding them. For example if I wanted to make the images have some padding and a drop shadow I would add:

Now for our example, I’m going to create a simple header image using photoshop and put the final touches on by adding a bottom border:

.twtr-widget {
border-bottom: 2px solid #33ccff;
}

It should Now look like this:

That’s really it. Once you strip some of the default styles from the twitter widget and add some of your own, it will much more seamlessly integrate with your website. Got any extra tips? Leave them in the comment section. Enjoy!