Saturday, 24 December 2011

How-to: Include a Twitter Widget on Your Web Site

Twitter Widget"Widgets let you display Twitter updates on your website or social network page.  

Our widgets are compatible with any website and most social networks. Simply choose the one that matches where you would like to include it."

Most hosted sites and web development platforms now support Widgets for all manner of third-party sites, services and functions. Twitter is one of the most common, and one of the simplest and most reliable ways to include a Twitter feed on your site is to use the official Twitter Widget generator. You can find this on the Twitter site under Resources › Widgets.

This takes you to a very flexible and very neat on-line widget builder, which will allow you to configure a custom widget and give you the code to embed on your site. That is, the widget shell, for display; the code for pulling in the content is a Javascript call to code hosted on Twitter itself. Which makes life easy, so long as you have Javascript and third-party script-calls enabled.

This comes in two code flavours (for compatibility), the generic website/blog widget and the Facebook widget. Make your choice from Select Your Widget, and your are presented with the options for the type of content to include.
  • Profile Widget: Display your most recent Twitter updates on any webpage. So this isn't your profile, it's your actual Twitter stream.
  • Search Widget: Displays search results in real time! Ideal for live events, broadcastings, conferences, TV Shows, or even just keeping up with the news. So a generic feed from all around the Twitter-verse, not your stream.
  • Faves Widget: Show off your favorite tweets! Also in real time, this widget will pull in the tweets you've starred as favorites. It's great for moderation. Put another way, it's Top Tweets, other people's Tweets that you like,
  • List Widget: Put your favorite tweeps into a list! Then show 'em off in a widget. Also great for moderation.
Taking Profile Widget (actually a Twitter stream, not someone's profile) as an example, you can then walk through the content and styling options.
  • Settings is the Twitter username of the stream you want displayed.
  • Preferences contains more options specific to selecting and updating content.
  • Appearance is where you get to have fun with the look of it. It's important to blend in your widget with the colour scheme of your site, otherwise you'll get the default black, white and green colour scheme which will stick out like a cuckoo in the nest (unless your nest happens to be black white and green). You can change all the font colours, link colours, and background. It's worth getting the colour values from your site's style-sheet to make a precise match, unless you have a good eye. Bear in mind the Twitter logo at the bottom of the widget remains default white and can't be turned off
  • Dimensions allows you to set width and height for the widget according to the space into which you intend to place it.
As you update the widget options, you will see a real-time preview on the right, so you can fine-tune your widget. You can use the Test Settings button to update the preview on the right.

When you're done, you can select Finish and Grab Code, whereupon the centre panel displays the code to copy and paste into an HTML webpage. There's a button to insert directly into Blogger if that's your site (you have to be signed in).

You can always go back through the options and change it, regenerate this code, so long as the page is open, otherwise you have to start over anew. Once you have the widget code you can tweak most of the parameters in any text editor away from the page. If you want a different type of widget, you'll have to go back through the setup page.

As you can see from the Profile Widget code, below, the code is fairly simple and the entries correspond to the parameters selected in the online options.
  • Height, width and colours are self explanatory.
  • RRP is the number of Tweets to display
  • username is the name of the Twitter account to pull from.
  • Scrollbar, loop and live are true or false
  • Interval is the time interval between updates in milliseconds.
  Remember to keep a backup copy of the original code and any versions you like enough to use on your live site, just in case you mess it up or want to revert to a previous widget. RC

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#666666'
},
tweets: {
background: '#ffffff',
color: '#666666',
links: '#3a87bb'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('robincatling').start();
</script
>