WordPress Twitter widget

Filed Under: Programming;Wordpress

I’ve been wanting to dip my foot into WordPress widgets for while so when I noticed Twitter didn’t have a WordPress widget I decided to write one. Of course, I’m not the first.

The widget makes use of Twitter’s Javascript ‘badge’. It’s not sophisticated and there’s only 3 configuration options: Twitter account name, widget title and number of updates you want shown.

It saves you having to paste the code into your page and gives you a nice interface for changing the display options.

Installation

Download the WordPress Twitter widget from WordPress.org.
Unzip the downloaded file and upload/copy ‘twitter-widget.php‘ to your ‘/wp-content/plugins/widgets/‘ folder.
Activate the ‘Twitter‘ plugin in your WordPress’ Plugins admin.
Drag the ‘Twitter‘ widget to the sidebar in your WordPress’ Widgets admin.
Configure the widget with your Twitter account name, widget title and number of updates you want shown.
Save Changes and you’re done!

Thanks go to Mike Jolley for his handy widget tutorial.

Update – 2007-12-19

The widget is now hosted on WordPress.org. Thanks guys.

Also gotta send some love to the guys (and girls) that write Subversion, Aptana and Subclipse.

Comments

Just to let you know that this works on WP 2.3.1 . . . any way to get the URLs to link?

If it also could handle long URLs so they didn’t go out of the margin in my sidebar, like wrap them around, this plug in would be brilliant.

Thanks!

Works for me on 2.4-bleeding (latest Subversion checkout). Just a note–you don’t have to copy the PHP file into wp-content/plugins/widgets; just extracting it into the plugins folder made it show up in the admin interface, and I was able to add it to the sidebar from there.

Thanks for the compatability updates guys. Appreciate it.

[...] Plugin Homepage [...]

Is there any way to install this without using widgets? I’m not sure what the code is supposed to be to insert it into the sidebar.php

If you want to edit sidebar.php yourself you can get the HTML from Twitter’s “badges” page at http://twitter.com/badges/html

[...] le plugin wordpress qui balance mes 5 derniers feeds sur mon [...]

[...] WordPress Twitter Widget bindet die Kurzmeldungen direkt in eine WordPress-Seite [...]

[...] Twitter Widget ????????Widget?????Tweet??? [...]

It also works on 2.5 by the way. Nice plugin

Thanks Ray.

I’ll have to upgrade now

hi. Thanks for plugin

perfect.

regards

[...] winner is the cleverly named Twitter Widget. It doesn’t allow you to update your twitter status, but upon reflection I realized I [...]

[...] use “Twitter Widget” by Sean Spalding for my needs and things seem to work great. There are instructions at the site as well as files for [...]

[...] Twitter Widget – Integra las últimas actualizaciones de twitter en la barra lateral. [...]

[...] Twitter Widget ????????Widget?????Tweet??? [...]

Sean,

The widget isn’t currently working. Would it have to do with the Twitter API?

Yes, the widget relies on the API being available. Note, however, that javascript must also be enabled on your browser.

[...] 3?Twitter Widget [...]

Great widget, thanks!!
Supereasy to install….

[...] Twitter Widget ????????Widget?????Tweet??? [...]

[...] Twitter Widget – Adds a sidebar widget to display Twitter updates (uses the Javascript Twitter ‘badge’) [...]

[...] Twitter Widget [...]

[...] Another WordPress Twitter Widget [...]

[...] Twitter Widget ????????Widget?????Tweet??? [...]

[...] Connect WordPress Plugin from Sociable! and modified it slightly. I have also installed the WordPress Twitter widget (more on that [...]

[...] I have three new plugins to Data-stitches that readers may find useful. First, I added a twitter widget that allows user to see my last 5 tweets on twitter. I uploaded it to Senna, activated it and [...]

[...] WordPress Twitter Widget von Sean Spalding nutzt Twitter’s Javascript Badge und zeigt einige Daten des Twitter Kontos an. [...]

Hey there,

Thanks for the plugin.

Can you tell me how to customize the look and feel of this widget, i want to change the li details of this.

You can customize the addon by adding CSS to your theme’s CSS.

The content is built with javascript so to view the generated code you can use either Firefox’s “Web Developer” toolbar function “View Generated Source” or the Mouseover DOM Inspector.

[...] have "Twitter Widget" and "Twitter updater w/ TinyURL" running right [...]

[...] Twitter Widget ????????Widget?????Tweet??? [...]

[...] 2) Twitter Widget at http://seanys.com/2007/10/12/twitter-wordpress-widget/ [...]

Hi Sean,
Current Twitter link for html badges is:
twitter.com/widgets/html_widget

Best wishes, Mitch

Thanks Mitch.

Maybe updating the link in the docs will prompt me to complete the changes to the widget I’ve been working on for ages

[...] De tagsphere heet wp-cumulus (plugin), de twitterfeed (ook een plugin) heet – heel origineel – Twitter WordPress Widget. Het ‘Talk to me on MSN’-linkje kan je hier maken, de luchtwallpaper heb ik ooit eens [...]

Hi Sean. Thanks for the widget. We are getting an error “Undeclared entity warning at line 275, column 1″ when we add the widget. When we remove the twitter widget, it disappears. Any ideas what the problem may be?

[...] Twitter Widget Pro – v1.0.3 [...]

[...] I have also installed the twitter widget. [...]

What a great simple plug perfect!

Is there a way to put the widget is several sidebars? The add button disappears when added to a sidebar.

Not as far as I know. But then again, my blog design only has one sidebar.

If you copy the HTML that is generated by the javascript you can place that HTML anywhere and you’ll end up with two badges. You need something like Web Developer toolbar for Firefox to view generated source.

[...] twitter has a nice little widget with wordpress that I can use to update my Facebook status and my site at the same time. So now you [...]

I like your Twitter Widget plugin, but it ‘delay’ the rendering of my page. I have a sugestion. Could you put the ‘scripts’ at the end of the body? If you want i can send to you my own modifications.

[...] unter: Seanys.com. Dieses Widget ist bei den Blogs auf WordPress.com automatisch installiert – bei [...]

Thanks great Plugin.
Thanks for sharing.
Joachim

[...] ?? ?????? ?????, ????? ??? ?????? ????? ????? badge. ?????? ????? ????? ?????? ???? HTML/JS ???????? ?????? [...]

Hi there! Thanks for the widget. It’s great, except for one little thing. When I upgraded to the latest version of WP, it stopped working. It now takes a while to try to load my updates from twitter, but eventually leaves me with an empty box. It’s been like this for a couple of weeks now. Any idea why this might be happening?

Thanks.

The widget should work fine with WP2.8. It’s sounds like you’re seeing a high load on the Twitter site. This can make your tweets appear slowly or not all as the tweets are pulled directly from Twitter’s servers.

Works great, thank you, Sean! One request (possibly already voiced by others): can we add a “Follow me” link right after or instead of “4 minutes ago”? That would be awesome.

Sorry Alex, the content of the widget is decided by Twitter.

Your wordpress plugin page says it’s possible to use two instances of this widget? How? Once used, the widget is unavailable for a second account.

Where does it say that? My reply to Jonas on a similar question is “Not as far as I know.”

Great widget! Still working under WP 2.8.2 but I can’t figure out how to modify the CSS to have my own background. Which section do I do that in?

I’m below a CSS novice so any help you could give me would be appreciated!

The widget is in a div id=”twitter_div”. Apply your CSS to this object.

eg. #twitter_div {background-color:yellow;}

Thanks! That did the trick for me. Now I just have to adjust the text position and my graphic.

I appreciate the quick response!

[...] everything else is built. The Twitter tools are “Tweet This” by Richard X. Thripp, and “Twitter Widget” by Sean Spalding. The e-mail plug-in is “WP-EMail” by Lester Chan. The sitemap was [...]

[...] Another WordPress Twitter Widget [...]

[...] Twitter Widget (v. 1.0.3) by Sean Spalding. [...]

[...] Twitter Widget????????Twitter for WordPress?????????????????????????????????????????????????? [...]

[...] found this widget for WordPress which displays Twitter updates at http://seanys.com/2007/10/12/twitter-wordpress-widget/ . Simple and easy to understand it really applies the “Keep It Simple, [...]

Hello, I added 5 lines of code to make this plugin more optimized (loads after the blog is done).

See http://www.anders.bennehag.com/blog/2009/twitter-widget-modified-for-speed/ for more information.

Sean, if you’re reading, I think you should add these 5 lines to your code as well.

[...] 2. WordPress Twitter Widget [...]

[...] WordPress Twitter Widget: Useing the Javascript, adds a sidebar widget to display Twitter updates. It’s not sophisticated [...]

[...] Twitter Widget (v. 1.0.3) by Sean Spalding. [...]

[...] WordPress Twitter Widget [...]

[...] ongi vastava WordPress plugina näol (Twitter Widget) loodud võimalus näha Nahkanuia säutse otse ajaveebi menüüs. Võib olla ma väsin sellest aga [...]

[...] WordPress Twitter Widget: Useing the Javascript, adds a sidebar widget to cisplay Twitter updates. It’s not sophisticated [...];

[...] WordPress Twitter Widget: Usando o Javascript, adiciona uma barra lateral widget para exibir atualizações de Twitter. Não [...]

is it possible for the existing widget to display more than one twitter feed?

add on to that question…when I say twitter feed, I mean tweets from different accounts…sorry

No, it can only display one feed.

[...] Twitter Widget (v. 1.0.3) by Sean Spalding. [...]

[...] Twitter Widget [...]

[...] Twitter Widget - There are a ton of these. I tried all ton of them While slightly boring, this is the only one which didn’t upset me immensely. Puts your latest tweets in your sidebar. [...]

[...] 2. WordPress Twitter Widget [...]

[...] Twitter Widget ????????Widget?????Tweet??? [...]

[...] Twitter Widget 18. Dezember 2009 | Autor: tweethelpers Das WordPress Twitter Widget nutzt das Twitter’s Javascript Badge. Man kann den Twitter Kontennamen angeben, den Widget Titel [...]

hi, nice plugin, thanks you very much..

Hallo und schönes fest erst einmal

Habe mal einen Link zu deiner Seite gesetzt da du dich ja mit Twitter beschäftigst Oki…

Bis dann lars

[...] Third-party applications and services like this WordPress Widget [...]

Thanks for an easy to use widget. This is the third Twitter I have tried and it actually works and displays with my theme fine. Just upgrated to WP 2.9.1 and it looks great.

[...] 9.Twitter Widget [...]

Just installed it to my StudioPress word theme and works great. Thanks for making it so easy.

[...] Twitter Widget – A sidebar widget showing recent posts from Maxwell [...]

Color me stupid, but I cannot get this to show up in my widgets. I am running 2.9.1 with News Magazine Theme 640 1.6.8 by antisocialmediallc.com and just getting it configured. I had to create a [widgets] folder where indicated as there was not one. It did not show up in the widgets section, so I uploaded to [plugins] and activated, but still cannot see it. Any thoughts to help out a moron?

Thanks

Jeff, look in the source code of any page the widget is supposed to appear on for the string “twitter_div”. This means the widget is installed OK. The display of tweets relies on Javascript and if the tweets aren’t appearing it’s *probably* because there’s some other (poorly written) Javascript on your page that’s conflicting.

[...] Twitter Widget – Installs a live feed of your Twitter account to display in your [...]

[...] Software, Alex Rabe! Um meine letzten Tweets in der Seitenleiste anzuzeigen, habe ich das Plugin “Twitter Widget” von Sean Spalding installiert. Danke [...]

[...] WordPress Twitter Widget: Useing the Javascript, adds a sidebar widget to display Twitter updates. It’s not sophisticated [...]

Hello Sean, The widget is perfect. But may i know how can i move the timestamp to a new line everytime ? where can i do that in php ? please help me.

Hi Sean,

I’m using your widget on http://www.sapnamagazine.com. It’s great! Two questions:

(1) how do I edit the code so that a profile pic thumbnail is shown at the top?

(2) how can I delete that gray bar from the top? that’s my widget header background, but I don’t want this widget to have a title (since I added another text widget on top as my title).

Thanks in advance!! loving the widget.
Mar

Short answer: you can’t. The javascript that builds the feed is hosted on twitter.com. You can’t edit it.

Long answer: maybe. This is the javascript that builds the feed. You could copy it, edit it to taste and host it on your own site, copyright/legal issues permitting.

1. The article already has a link to a widget editing tutorial.

2. Any visual styling the widget has is taken from your blog’s theme. You’ll have to edit that. Note, there are already replies in these comments about editing CSS.

[...] 9.Twitter Widget [...]

Great widget! I have on 2.9.1 and it’s working perfectly. One question though.

Is there a way to edit this widget so it will cache the tweets and only update the list at a set interval (half hour, hour, day, etc)? I have this on my site, but since Twitter’s connection is spotty, it can cause ungodly load times. And if Twitter is down, my page breaks completely. Thanks!

There are other Twitter WP plugins that cache tweets. I suggest looking at one of those.

[...] WordPress Twitter Widget Using the Javascript, adds a sidebar widget to display Twitter updates. It’s not sophisticated and there’s only 3 configuration options: Twitter account name, widget title and number of updates you want shown. [...]

Hey Sean, Just grabbed WP Twitter Widget and … so far, so good. One small problem: URL’s that are wider than the box don’t wrap around. I’m looking into how this might be fixed in code and will let you know.
In meantime, check out my blog: http://www.dalecoweb.com/thetroubleshooter.
Cheers, Dale

Hehe, you’re not the first to anguish over URL wrapping. I prefer to use bit.ly.

This link has an interesting answer to the issue.

I activated the widget, but only Sean’s tweets are showing just like above. How do I change this. I know nothing about HTML
Alex

[...] Twitter Widget : Adds a sidebar widget to display updates (using the Javascript Twitter ‘badge’) [...]

Alex, you have to enter your Twitter username into the widget’s settings.

[...] 9.Twitter Widget [...]

Hi there,
Nice widget, however I’d like a little bit of space between each tweet posted. Is there a way in either the settings, or exactly what file and what code/where do I need to make the change? I noticed a nice break between the tweets on this page.

There is no styling present in the widget. It takes all the styling from the CSS already present in your WP install. Please see my replies to other comments for help with this.

This is a great widget, however as Twitter is getting more and more popular I’ve noticed that there is a big lag on page load when the widget attempts to contact Twitter. It would be great to see an option to enable a cache, so that the last Tweet could be from a cache rather than a call to the Twitter server.

Once again, thanks for the widget.

Thanks Adam. Certainly Twitter’s performance varies but there are many other WP Twitter plugins and some that do caching. You should investigate those.

I have add twitter plugin in wordpress but i active the plugin there is an error

[...] you’re not too sweary or you’re like me and weary but don’t care, you can put a twitter gadget on your page. Not entirely sure how useful it is to display your own twits (like I’m doing) but maybe [...]

[...] Software, Alex Rabe! Um meine letzten Tweets in der Seitenleiste anzuzeigen, habe ich das Plugin “Twitter Widget” von Sean Spalding installiert. Danke [...]

Thanks for a quick and hassle free widget! Love it.

Thanks for the Widget! Was super easy to install and works great…

Thanks for the comments guys. Glad the widget serves your needs.

The widget code is very simple. If you’re getting an error it’s probably conflicting JavaScript from something else in your site.

[...] Twitter Widget ????????Widget?????Tweet??? [...]

[...] Twitter Widget zeigt meine letzten Tweets in der Sidebar an [...]

My Twitter feed only shows up if I am logged into WordPress. Otherwise it says “No public Twitter messages” Any advice?

Thanks.

Thank you plugin work really fine.

Ich habe das plugin installiert, habe aber Probleme mit den Umlauten, die es ja in der deutschen Sprache gibt. Kann man da was ändern?

Great widget, works great, but I have one issue. What is controlling the color of the text of the actual Twitter post that shows up on the sidebar in your widget. The Widget Title and the time stamp on the twitter post show up fine using the website colors, but the twitter post text does not. It’s a problem becuase it is black (or very dark) and I have it over a dark background. Any way to change the text colors of the Twitter post that is taken from Twitter?

Never mind. Figured it out based on an earlier post. in the CSS, added,
#twitter_div {color:#ffffff;}
Thanks.

Well done.

Comments RSS feed | TrackBack URI

Line and paragraph breaks automatic, HTML allowed:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WordPress Twitter widget

Installation

Update – 2007-12-19

Comments

Leave a comment

Right now, Sean...

Sponsored Links

Blogroll

Recent Posts

Recent Comments

Search seanys.com

Categories

Archives