How to use Twitter's Widget for Displaying Tweets on your Blog

By Tom Collins

We got a question the other day about the "BlogPaws" on Twitter widget directed to @blogpaws from @boulderdog1 a/k/a Deborah Flick. I tried to point her toward the answer on Twitter, but 140 characters are not enough for a widget tutorial, so I thought I'd post one here.

Before starting, I wanted also to say that you should first go take a look - and do some reading - at Deborah's blog, Boulder Dog: For the love of dogs and their people. It is visually stunning and her writing is passionate and emotionally uplifting. The header image takes me straight to Ireland, though I suspect it may have been taken somewhere not that far from where I'm now sitting in Frederick, CO.

Anyway, go check out her blog ... the tutorial will be here when you come back ...

Okay, so if you want to display tweets on your blog, the tool we use at right is a widget available right from the Twitter website. Just scroll to the bottom of your Twitter page and find the "Goodies" link:

When you click the Goodies link, you'll open a page called *gasp* Twitter Goodies! Click on the "Widgets" link:

That will take you to the "Select Your Widget" page and offer you three choices. Since we're talking about putting the widget on your blog, select "My Website" (since the other choices are Facebook and MySpace). That will take you to another version of the Select Your Widget page, where you get to choose what kind of Tweets you want to display.

In this case, I selected the "Search Widget" in order to display tweets that mention BlogPaws (as opposed to just our own tweets, or just those from pre-determined Tweeps or Lists):

The great thing about this widget tool is that, from this point, you get to design the display to match your own blog's content and design. On the "Settings" page, you choose what term(s) you want the widget to "search" for tweets and you enter the "title" and "caption" you want to use:

When you click the "Test Setting" button, you see exactly what your widget will display! When you're happy with the settings, click on the "Preferences" link and decide things like whether the widget will automatically poll for new results, include Avatars, and so on.

Then, click on "Appearance" and you can make the widget match your blog's design. Here's how I changed the default Twitter colors above to what you see on our blog:

After that, click on "Dimensions" and set the size of your widget to fit in your blog's sidebar. That adjustment does not show in the preview, but you'll see the width and height settings in the code you'll be copying and pasting into your blog publishing tool.

So when you're ready, click the "Finish & Grab Code" button and paste it where you want it.

Hope this helps ... any questions, just leave a comment. 

Comments

[Deborah Flick]

Hi Tom

This is great! So helpful.

I do have a question. How did you determine the dimensions? I have a 2 column theme and want the twitter box to fit into the right column. But, I have no idea as to it's width. The height Twitter recommends is fine, it's the width I'm wondering about.

Can you help? Where would I go to find the width. Is it in the theme code?

Also, you asked about the picture. I love it too! I wish I could say I took the photo and it's from around here. NOT! It came with the theme.

However, that pic can be replaced. I've thought about taking scenic shots from around here (Boulder) and changing them with the seasons. But, I've never gotten around to it. Glad you like the picture.

And, thank you so much for the blurb about Boulder Dog on your site! What a lovely surprise.

I'm off to toot your horn to all my pals on twitter!

Thanks so much.
Deborah

[Deborah Flick]

Hi Tom, me again.

After you "finish & grab code" where do you put it? How did you know where to put it? I gather I have to access my theme's code (or is it wordpress's code). But, if that's what I need to do, then what?

I am so not a techie ;-(

Thank you for your help. And, if you haven't seen UP, the movie, I recommend it. It's very sweet.

Thanks again
Deborah

[Tom Collins]

Hi Deborah,

You're not a "techie"?? Please don't tell anyone, but neither am I ... lawyer by training, backyard mechanic or DIY-er by upbringing and genes! That's why I love TypePad: even I can figure it out!

On the width question, I took a quick look at your blog's source code and stylesheet and it looks like your sidebar is 200 pixels wide, with 10 pixels of padding on each side. So you should be able to set your widget's width as 180 pixels and have it display fine.

On the where to paste the code question ... hmmm ... it's been a while since I struggled with a Wordpress blog (sorry, I know that's like dissing somebody's Mac), but I think you need to go to the Appearance section of your dashboard and use the Widgets page to create a "Text" widget. That seems like the equivalent of the TypePad Notes TypeList that I used for ours.

You'd paste the code from Twitter into the editing box for the Text widget and give it a name, like the "BlogPaws on Twitter" one we used. Then save, or publish, or whatever the WordPress term is.

Any WordPress wizards out there who can give Deborah more helpful advice?

Tom

[Phil Gerbyshak]

There are a lot of ways to do this, with the easiest being to add a text widget and paste the HTML code in there. Or do a search for a twitter plug-in and try a few out.

[Nadine M. Rosin]

OMD! This was SO easy- Tom, would you please write up a step-by-step tutorial just like this for every other challenge in my life?!?!? :) Thank-you- that was easy, stress-free and successful. VERY grateful. You BlogPaws people are PAWSOME!!!!!!!!!!

[Ugg Outlet]

Great wits have short memories.