Posted on Monday, August 24th, 2009 at 8:28 pm.
For Web Designers, the popular mico-blogging service Twitter is a great channel to define yourself (Check out Creare on Twitter). Whether you are tweeting about your latest website design portfolio piece or just looking to network with fellow web designers, Twitter is a great communication tool.
Twitter offers several types of widgets or ‘badges’ that allow you to easily display & embed your latest tweets onto your own website.
This tutorial will show you how-to add a simple Twitter widget to your own website in 3 simple steps. For experienced Web Designers, you can also find advice here on how-to setup a customisable HTML & CSS Twitter widget.
STEP 1 – LOCATING THE TWITTER WIDGET/BADGE
If you haven’t already, firstly, login to your Twitter account. Proceed to the ‘Goodies’ link in the footer navigation. Once this is loaded, simply select the option called ‘Widget’. Now, you will be presented with a page asking what type of Widget you are looking for, select ‘My Website’.
STEP 2 – WEB DESIGNERS: HOW TO CUSTOMISE YOUR TWITTER WIDGET
Within this section, you’ll find an easy-to-use wizard, to start, simply input your Twitter username into the correct box. Next, proceed to the ‘Appearance’ tab.
Here, you can define the look and feel of your Twitter Widget, including setting Background Colours, Link Colours and more using HTML Hexadecimal color codes (which if you’re a Web Designer, you should be familiar with). For more advice on these, check out this page on W3C Schools.
Lastly, select the ‘Dimensions’ tab where you can set the custom size of how big/small you wish your Twitter badge to appear on your Website.
STEP 3 – DISPLAYING YOUR TWITTER WIDGET ON YOUR WEBSITE
Once you’ve followed all of the on-screen instructions and you are happy with the look and feel of your Twitter badge, finish by simply clicking the ‘Finish & Grab Code’ button. You’ll be presented with HTML code which all you need to do now is copy & paste into the coding of your website.
It’s as simple as that, if all goes well, your Tweets should now be displaying on your website!
HTML/CSS CUSTOMISABLE WIDGET FOR WEB DESIGNERS
For experienced Web Designers, I suggest using the more advanced Twitter widget which can be completely customized using HTML & CSS. To find this badge, navigate to the below web address and follow the instructions:
http://www.twitter.com/widgets/html_widget
For more Web Designers advice, check out our latest Video Blog post which tells you How to embed a Google Map onto a Website, or alternatively, read my recent blog post on CSS Resources for Web Designers.
If you’re on Twitter, please feel free to check out our profile and follow us
http://www.twitter.com/crearegroup
Channel
on September 3rd, 2009 Says:
Thanks for the information. Twitter is the most popular microblogging site on which we can add to our site and to our blog as well.
on January 13th, 2010 Says:
These days Twitter is the most talked about thing. More and more people are realizing how powerful it can be and are taking advantage of it. Thank you for this review!