Website Additions: Adding a Twitter Widget

Ever wondered how you display your tweets on your website automatically? It might seem like a complex procedure – having to deal with “web code,” a.k.a. HTML – and can be nerve-wracking to the inexperienced coder. Fortunately, both Real Web Solutions and Twitter have made it easy for you to implement on your website.

To get started, you first need to obtain the code from Twitter. Visit Twitter’s Widget Page. Today let’s focus on the PROFILE Widget, which will display your most recent tweets.

There are 4 customizable components:

Settings: provide your Twitter tag, i.e. RealWebTweets

Preferences: decide which options you would like included on your widget
Poll for News Results - increases the speed in which your feed updates with new tweets, bringing it closer to real time updating; recommended enabled.
Include a Scrollbar - if displaying more tweets than fits in the allotted space, this allows the user to manually scroll up and down to view each tweet.
Behaviour – Timed Interval/Tweet Interval or Load All Tweets – what’s the difference? Timed Interval will rotate through your latest tweets at the specified Tweet Interval; Loop Results will also loop through the available tweets. Load All Tweets will load the specified number of tweets, and always update to display the latest tweet.
Number of Tweets – specify the number of tweets you want displayed
Show Avatars – displays the image associated with your profile next to each tweet
Show Timestamps  – displays the number of days since each tweet was originally tweeted
Show Hashtags – if you have associated any Hashtags to the tweet, they will be included by enabling this option. Hashtags allow you to broadcast a tweet to a specific group of people that are following the Hashtags, i.e. #realestate or #Toronto

Appearance:
It is recommended to colour match your Twitter widget to the rest of your website, this way it blends in nicely with the surrounding content, and doesn’t stick-out like a sore thumb. For example, on my site, http://www.bryan.myrws.com/, I’ve placed the widget on the left column and the homepage's content area - giving you a chance to see both layout options. The surrounding dominant colour is orange, with a complimentary shade of blue and black. So I’ve chosen these Widget Colours:

Shell Background = #FD6A37 (same orange as used on the website)
Shell Text = #FFFFFF (plain white)

Tweet Background = #D5E4E1 (same blue as used in the menu)
Tweet Text = #000000 (plain black)

Links = #FD6A37 (same orange as used on the website)

If you’re unfamiliar with how to determine which colours have been used on your website, you can double-check through your account’s Website Editor.

Dimensions:

If you’re familiar with determining the exact pixel width and height for the allotted widget space on your website, feel free to manually adjust the settings. Otherwise it is recommended to use the “auto width,” option and leave the height at the default 300 pixels.

Nearing completion...! Click “Test Settings,” and see how the widget will display. If you’re satisfied with the results, click “Finish & Grab Code”. Clicking on the coding box will automatically select all the code, right-click and click Copy. Now that the code is copied, it is time to install it on your website.* Want a more visual approach? Check out each completed step:

*For a detailed walkthrough on how to add the Twitter Profile Widget to your Real Web Solutions’ website, click here.

Stay Tuned -- Next week's article is on Facebook's Like button.

Authored By: Bryan Coughlin, Client Relations