Verizon cell phones

Integrating The Twitter Profile Widget Into Your Website

Twitter has become one of the most popular social networking sites on the Internet in recent years. If you have customers who use Twitter as a marketing strategy, you no doubt want to place the Twitter Widget on the website. This article will discuss how to do this quickly and easily.

Basic Installation Of The Twitter Profile Widget

Twitter has made available some useful Twitter Goodies for you. Go to the Twitter Widget page and click on the My Website link to see four choices:

  • Profile Widget
  • Search Widget
  • Faves Widget
  • List Widget

Lets use the Profile Widget. Enter in your username and then click on the Preferences, Appearance, and Dimensions options to customize your widget. If your widget is small, its probably best to avoid showing avatars.

If you want a cool looking real time scroll of all your tweets, choose the Timed Interval button and loop the results.

Test the settings and click on the "Finish and Grab Code" button.

Next, copy and paste the code into the area in your webpage that you want the widget to show. Its probably best to wrap the widget with a DIV.

If you want to fiddle with the widget, you don't have to go back to the code generator - you can change the settings in the created code. Most of it is self explanatory.

Twitter Profile Widget Does Not Work With IE8 and Opera

Note that the Twitter Widget does not work in IE8 and also in Opera 9.64 as of this writing. I have found that it works well in Firefox 3 and Safari 4.05.

There is a fix for this as mentioned here.

What you should do is surf to http://widgets.twimg.com/j/2/widget.js with your browser and then copy and paste it into your text editor. Look for the following text very early on in the code:


Array.forEach

and replace it with:


Array.prototype.forEach

Save it as a file called twitterwidget.js. FTP the file up to your webserver and then change the javascript code you use in your webpage to point at this file and not at Twitter's.

After trying this fix, it worked in all the following browsers:

  • Firefox 3
  • Opera 9.64
  • IE 8
  • Safari 4.05

Here s KerryOnWorld's Twitter Profile feed as an example:

And the code:

Filed under: