How to Add the Twitter Widget into a Wordpress Site

April 3, 2009 at 11:35 am - by Dale Dietrich

Categories: blogging • geek • how-to • social networking
Tags: twitter • widget • Wordpress

Taking a queue, once again, from Dave over at ZNF, I added the new Twitter Widget to the Daleisphere (currently below my Disqus comment box) and my other Wordpress sites.

Previously I had used Twitter Widget Pro and Twitter for WordPress for this purpose with mixed results.

The most important benefit of changing to this widget is that it works! The other widgets yielded spotty results with too many fail whales.

The other obvious benefit is that it allows me to embed many more tweets in my sidebar than the others did – through a scrollable interface.

Downsides:

Performance: Occasionally it doesn’t work. The result, a black fail whale rectangle with nothing in it. While annoying, so far the black rectangle appears less often than the fail whales I experienced with the other Twitter widgets. Also, sometimes the black box turns into the proper widget if you give it long enough. Odd.

Flash: On the downside the widget requires Flash. As a result, it does not work with the iPhone. Note: There is an html version of the widget available – though it’s not as nice or useful.

Installation

For Wordpress blogs:

go to this twitter widget page (you’ll need to be logged into twitter.com)
select ‘Other’ (there is no Wordpress-specific widget)
click ‘continue’
select the type of widget you wish (flash, or html)
click ‘continue’
continue picking options and clicking ‘continue’ until you get to the ‘Set up your Twitter widget’ page
choose your final options
add a Text widget to the appropriate column in your Wordpress dashboard
copy the resulting HTML into the Text box
Edit the width parameter (see below)
Save and you are done

Editing the Width Parameter

When generating the widget on the Twitter site, there are three width choices available to you (narrow, wide & full). I selected the ‘narrow’ option but it was still too wide for the width of The Daleisphere’s middle column. The ‘narrow’ width default is 290 pixels. My middle column is 275 pixels. At 290 pixels, the widget bled over into my third column.

Fortunately you can manually edit the width parameter in the HTML code that you cut and pasted into the Wordpress dashboard widget text box. You have to edit the width parameter in two places. Search for the text ‘width=”290” and change it to your desired width, in my case 275. Then search and replace again. The first instance is close to the top of the code, the second instance is lower down in the code. Save your Changes in the Wordpress dashboard and you should be good to go.

Digg Del.icio.us

Ash

Thanks for the step by step guide, Dale. I could get right upto copying & pasting the code in the TEXT widget, but the moment i click on the SAVE button, strangely the HTML code just disappears...i tried several times with no success!!!

...please help!..here's my blog: http://isocialmediafan.wordpress.com/

Dale Dietrich

Ash, it sounds to me that you have a Wordpress issue and not a widget issue. Can you create other text-based widgets? If you do, and click on Save, do those text widgets survive? If not, you need to look into your Wordpress implementation. I must say, of late I've been having problems with some of my wordpress widgets spontaneously disappearing - probably as a result of Wordpress upgrades. I've had to go back and re-create widgets that used to exist. But I've never experienced a text widget simply disappearing before my eyes.

Ash

Appreciate your prompt response Dale...you maybe right, as i tried the same process again, this time using Firefox and then IE and the same problem!!!!

Any idea, whom I can talk to about this?...does Wordpress has support?

Dale Dietrich

Sure they do. I'm not sure if you are self-hosting (wordpress.org) or using the hosted version (wordpress.com). I self-host.

You can ask questions in the wordpress.org forums here:

http://wordpress.org/support/

and, of course, the minutely detailed codex is here:

http://codex.wordpress.org/Main_Page

...Dale

Ash

Thank you SO MUCH Dale...your prompt responses and guidance is much appreciated!

Ash

As suggested, visited the support website and looks like it is a problem which is not yet sorted: http://wordpress.org/support/topic/261533

Spykid12

Um I need help cause when I save it, I get this

<div style="width:176px;text-align:center;">
follow Spykid12 at http://twitter.com</div>

Whats going on?

Dale Dietrich

Sounds like the script is being displayed as text and is not being acted on as a script. I don't know why this would happen. It may have to do with how you have set up your site. Do other scripts work on your site (for example google adsense scripts)?

Sue Yeap

Thanks Dale, have gone with the unpretty stock standard WP Twitter badge and feed. I started out trying to use Wordpress.org but wasn't technically proficient enough so switched to Wordpress.com. I got the info about no Flash on wordpress.com blogs from their FAQs and that then explained why when I posted the code, 2/3 disappeared when I tried to save it. Best wishes! Sue

Dale Dietrich

I took a quick look at your site Sue. May I suggest you adjust the CSS for your sidebar. If you adjust the css to add bullets for unordered list items in your sidebar, it will be much easier to distinguish each individual Twitter post in the list.

For example you can see my category lists on the far right column on my blog. The original css didn't place bullet points before each and it was very hard to read the list. It's much easier now with the bullets.

...Dale

Sue Yeap

Hi, I really like the look of the Twitter Flash widget but I am wondering if your blog is perhaps powered by wordpress.org not wordpress.com? All the FAQs on Wordpress imply they strip flash for security reasons and I cannot get it to work for the life of me. The code does appear to get stripped and I get left with a "follow me on Twitter" line or nothing at all. Thanks!

Dale Dietrich

Sue, yes indeed I have a self-hosted Wordpress installation from Wordpress.org. I am not hosted on Wordpress. com. It's news to me that Wordpress.com sites do not permit Flash though.

There are non-flash versions of this plugin you can use too. Not as pretty, but still pretty good. It's too bad Wordpress.com doesn't permit flash. I'm very surprised by that.

Dave Zatz

I've gone back and forth on this. I agree it sometimes fails, but so did the others (albeit, with a message). The real issue is that it seems to load kinda slow and the text, as far as I know, is *not* indexed by Google. But I find it visually appealing and functional. Looks like you independently used the same hack I did to narrow the widget - in my case, to 234.

Also, because it's slow I wasn't able to keep Mari's up at the same time. Ultimately, I'd like to create a single feed (was testing Yahoo Pipes) of ALL our tweets and run that. But it's a project for another day. I also want to archive all my tweets EVER on ZNF somehow. Hm.

Dale Dietrich

I don't understand why you want tweets indexed on google? They are constantly changing? Do you think tweets embedded i a sidebar will bring google searchers to the site? to individual posts? Your tweets don't necessarily relate to the content of a post?

I was hoping you'd create a whole new Twitter account for ZNF so that every time you post a new article on ZNF I'd get that in my feed. That way I don't have to keep checking your site. Or, looking at it another way, I"m more likely to go to your site if I see an article referenced in a tweet that I'm interested in.

Dave Zatz

Look at Analytics, the sidebar stuff has definitely brought people in. In fact, I specifically set the sidebar to display 6 tweets and tried to average exactly six a day to be captured by a crawl. (I also deleted off-topic tweets regularly, for the same reason.)

But I also want my own archive, under my control. There's probably some good stuff in there I might want to revisit one day.

I could do a ZNF twitter feed, but given what you're looking for maybe you should re-evaluated FriendFeed? Mine has ZNF and Twitter in it. I definitely won't do it in my personal account. I drop most folks that just auto-link their blog posts.

Dale Dietrich

Yes, I know you drop people that auto-link their blog posts. I don't really understand that. If I'm interested in them I'm interested in their posts. But, that's why I suggested a second twitter so you won't offend people from your primary twitter feed who feel like you do on that point.

I don't auto-link my blog posts into twitter but I thought about it. If a blog post is topical or current I will add a link to it into my tiwtter feed. But if its very narrow in focus or deals with old stuff (like an old movie review) I tend not to. I don't want to bore my twitter followers. It's a balance.

I haven't abandoned Friendfeed. It's still there. There's just not enough time in the day and I find I spend way more time in twitter and so do most people - hence that's where I focus my effort. If friendfeed overtook twitter, I'd move there.

Dave Zatz

Only if it's 90% of what they write. Chances are I follow them because I follow their site. But my newsreader(s) let me know when new posts are up. Whereas in Twitter, it's just stuff to ignore. Personally, I'll periodically drop an interesting or timely ZNF link in Twitter. But it's a small % of what I post.

Heard friendfeed is getting a facelift. I need to research that.

Dale Dietrich

Ahh! That explains it. I've NEVER used RSS readers. I browse by tab groups. For example, I have a tab group for everyone in the ZNF network. One click and all the ZNF contributor sites open at once. Then I move on to the next group. I find with Twitter, I'm doing even less of that because the calibre of the tweets of the people I follow is so high, most of the interesting stuff just comes to me now in twitter - hence I miss some of the ZNF stuff I'd want to see faster. Obviously I'll still look at ZNF stuff once a week at the minimum, but for me, I'd rather see it all show up in my Twitter feed. Now, if only there was a way to get the ZNF RSS feed, feed ZNF titles into Twitter with links back, that would be an ideal solution.