Follow EyeHandy:

  • MORE

Adding Twitter to Your Website, Like a Boss

Kevin Daniels
April 11th, 2012
Adding Twitter to Your Website, Like a Boss

Most businesses fall into 1 of 6 scenarios when talking about Twitter use.

1.Twitter who?
We’re proud of you for choosing EyeHandy as your first web experience after escaping your Amish community. Boobies!

2. I’ve heard of Twitter, but I don’t bother with it because I don’t see how it can benefit me or my business
Check out this article, then keep reading!

3. I have a Twitter account, but don’t really use it. I just wanted to reserve my business name, cuz I’m gangsta like that
 Check out this article, then keep reading!

4. I use Twitter regularly, but have yet to integrate it into my website
Keep reading!

5. I use Twitter regularly and have Twitter’s default widget embedded into my website, but don’t think it looks very good
Keep Reading!

6. I have customized Twitter functionality that matches my website and looks sharp. I’m already like a boss!
Snow-shovel the dirt off your shoulder, then check out other great How-To’s!

_____________________________________________________________________________

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

-Go to https://twitter.com/about/resources/widgets

-Click “My Website”

-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:

.twtr-avatar img {
box-shadow: 1px 1px 3px #666;
padding:3px;
background: white;
}

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!

Desktop | Mobile

Facebook