Twitter has become one of the most useful social applications for bloggers. Many bloggers choose to feature their latest updates in a widget visible in their blogs. Here at Blogger Buster, for example, you can see a Twitter widget in the header section which features my latest "tweet".
Many readers have emailed me to ask how I customized this widget, so in this post I'll explain some methods you could use to create and customize your own Twitter updates widget, including a simple widget installer for you to add a widget similar to the one used here.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
Twitter does offer a "Blogger" widget which can be installed using a one-click installer. This widget does not have any styling associated with it, ensuring your updates will appear in the same fonts and colors as other widgets in your blog.
If you have already added a Twitter widget to your blog, you can easily customize the appearance of this widget using some simple CSS techniques.
The widget code for your Twitter badge will most likely appear like this:
<div <--Add Style Here --> id="twitter_div"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/amandafazani">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/amandafazani.json?callback=twitterCallback2&count=5" type="text/javascript"></script>
As you can see from the comments I added in red, you can add inline CSS styling to your widget code, in order to add borders, background color or even an easily recognizable icon.
Here are some examples of the code you can add in this section:
style="border: 3px solid #cccccc; padding: 5px;"
<--This will add a wide grey border around the widget with some padding to ensure the text doesn't get too close to the edges.
style="background: #ffcc00;"
<-- This will add a bright yellow background to the widget, ensuring this contrasts with other elements in the page.
style="background: url(http://imagehost.com/youricon.jpg) top left no-repeat; padding-left: 50px;"
<--This will add an icon as a background image to your widget. The padding declaration ensures the text does not overlap the icon (this is the solution I use to feature the blue bird in my Twitter icon in the header section).
To add these style declarations into your Twitter widget, simply go to Layout>Page Elements in your Blogger dashboard and click on the "Edit" link for your Twitter widget. Then locate the section of code which begins like this:
<div id="twitter_div"
and add your styling code to this section.
Here is an example of the Twitter widget code with style declarations added in red:
<div style="background: url(http://bloggerbuster.com/images/twitter-icon.gif) top left no-repeat; padding-left: 50px;" id="twitter_div"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/amandafazani">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/amandafazani.json?callback=twitterCallback2&count=5" type="text/javascript"></script>
Add a Twitter Widget using this Widget Installer
For those of you who would prefer a simple method of adding a stylized Twitter widget to your Blogger powered blog, here is a widget installer which will add a widget with an easily recognizable "Twitterific" icon, like this:
The colors and fonts of this widget will blend with other elements of your blog, while the Twitterific icon will be easily recognized and help your readers associate this widget with Twitter.
To add this widget to your blog, simply fill in the details in the form below. Your Twitter username is the one which you have chosen to represent you on Twitter. For example, my username us "amandafazani" and my Twitter URL is http://twitter.com/amandafazani. Add this username into the appropriate box, then change the title and number of tweets to display as suited to your needs.
I hope this post has been informative in explaining how you can add style to your Twitter badge/widget in your Blogger blog. Please let me know what you think by leaving your comments below.
63 comments:
Very nice thank you
Amanda, I use your page all the time, it's the best. Is there any way to put multiple people's tweets on the same site. eatsalem.com
landed from google, thanks for the great info.
Information Review
thanks amanda..this is just the right post that i been looking for..now my blog http://www.efzec.com looks great.all thanks to most of your tutorials..cheers~~
I really do not like social networking but it represent a great tool for promoting. So thank you for help.
www.computorial.blogspot.com
Thanks! This is awesome, but there is a kink I haven't been able to fix. I have my background image for the Widget, but the heigth of it changes depending on how much I type into Twitter. Is there a code I can insert that will make the background image stay the same dimensions regardless of how many letters I type into Twitter? Please help! :-)
heather@espanaphotography.com
http://www.espanaphotographyblog.com
Thanks, very helpful :)
great thing
Thanks a lot
thanks this is great! but do you know how to limit the number of tweets it shows on the blog? it just keeps on going like the ever ready bunny pushing down all the other widgets into the wild deep... i'de rather it only post the last 5 or so... hmmm... any thoughts most appreciated.
thanks, And
Hi Amanda,
I'm having problems with trying to adjust line spacing and paragraph spacing. Would you help me out please? Thank you!
My site is: http://maitaiinjapan.blogspot.com/
Yippee! I did it - with your awesome help! Thanks so much!
thanxx amanda >> :)
Great!
but how can I show only one twitter message?
I thought that this could be done by the &count=1 variable, but 5 twitter messages continue to appear at my blog widget.
Can someone help?
Thank you very much.
http://webdoispontozeroplus.blogspot.com
This is great but how do i make the twitter updates go to the right?
I understand how to add another widget to the header but not make i go right.
hope you understand me and can help thanks
this is what I looking for. Great share!
Thanks much. It works nicely
Okay, COOL! As always! :)
nice info
Thanks for sharing these relevant information! However, have you ever heard that twitter is now breaking down the wall of separation between celebrities and their fans? Yes, that’s right! Twitter, the social networking site, and cyberspace phenomenon, has been utilized by personalities such as Ashton Kutcher and wife Demi Moore, the director Kevin Smith, singer Lily Allen, and LaVar Burton, the actor known for his role on Star Trek as Geordie the engineer, as well as host of the Reading Rainbow and his role in Alex Haley's Roots. Users post updates, whatever they want to say, questions and answers, in 140 word clips called Tweets. Membership is free, so you don't have to get installment loans to get onto Twitter.
manage twitter followers
The Completely Automated Twitter Growth & Money Making System for People that Want to Set Up A System ONCE, Forget About It, and Have it Grow and Make Money EVERY Day!
http://875f81xab56p9w8aqfx7183x0f.hop.clickbank.net
cool. is there any way you can turn it around and have your blogger blogs appear on twitter?
An excellent post....thanks for sharing your nice work.
Thanks a bunch for your tips. From Malaysia.
Really breathtaking further informative topic. Thank you seeing sharing this.
thaaaaanks
http://www.kh-girl.com
hi, thanks for this :)
love it!
Thanks ! But not work with me :D
http://nqhuy.net
I'm happy with the Twitter widget I have. What's the difference between this gadget and the one I already have on my blog?
Thanks for the twitter image URL
nice info
Muy bueno!
Really great!
Hi,
I have gone through ur post.You are imparting knowledge no doubt....Don't be so clever and cunning.Don't cheat reader.........In ur code,that is ur twitter page that will enhance ur website rank not person using ur mentioned code....
Is there a way to customize the Twitter badge on my Blogger page so that it doesn't include the Tweets I post in response to other people's Tweets (the ones that start with a @...)?
It seems like Twitter has changed its policy lately so that people don't see those Tweets on my Twitter page unless they're following both me and the person I'm responding to. Am I correct about that?
But those sorts of posts are still showing up in the Twitter badge on my blog. I think it's sort of confusing for people to say my responses to people there without seeing what I'm responding to, so I'd love to filter out those Tweets if possible.
I like your widgets there is another twitter widget but this one is more attractive. NIce desing
Love it!
uffh.. finally i found what i need .. thx alot
Thanks! ^_^ Helped a lot.
Cool stuffs ,thank you for the share.
Thanks for the useful information.
nice posting, thanks
Visit my page: http://itassist.blogspot.com - FREE Computer Assistance and Advisory
thank you so much for sharing...^^
Great
Te astept pe blogul meu: http://itassist.blogspot.com - Asistenta si Consultanta GRATUITA IT
Cheers, thanks for sharing
nice little widget. thanks.
Thank you.... I used your Blog's help to add a widget to my Blog and the little blue bird looks CUTE!
Thanks, again!
Thanks for the very clear instructions! Appreciate it tremendously.
Awesome! Thanks so much!
this is FABULOUS! thank you!
Did anyone answer @Robert Loerzel above because I want to know that answer too! How do we get direct messages and retweets out of the widget?
thanks for article very
Thanks for the tip.
I managed to embed the badge to my posts:
MobileSpoon
thank you very much
that's is really good article.. people always looking for easy way to get latest update with twitter..
Hi Amanda. Great post (I found you through Google). Do you know how I can format it just to bring through tweets and not replies?
It's awesome. I was in search of this scrip for long days. finally i got this scrip here.
Thanks thanks thanks
Thanks for the useful information.
thanx alot
I'm trying to install more than one twitter widget in my blogger blog but it doesn't work. It just load the first widget and the two others are out.
Can you help me please ?
Hello,Ma'am i have tried to place this widget in my blog,but the widget is not showing my recent updates.If possible would you please help,the link is http://bestsurfer.blogspot.com/2009/09/representative-post.html
It's a great idea to put that widget in a blog.
Thanks for the useful information.
It worked! Very helpful tip... Thanks a lot!
Post a Comment