BlogKnowHow apologies for the technical problems with the site. We are working on it and hope to resolve the issue as soon as possible.

Wednesday, July 15, 2009

Add Twitter Badge Button to Blogger

In this tutorial you will learn how to add a Twitter badge aka Twitter button to your Blogger Blogspot blog to link your blog to your Twitter account. By adding a Twitter button you will give your readers the option to follow your blog on Twitter.

Display a Twitter Icon in the Sidebar of Your Blogger Blog
If you look at the top of the right sidebar you will notice that I have placed a Twitter icon with a link to my Twitter profile. Adding the Twitter badge and link is not difficult and requires no change to the template. We will simply be adding a gadget to the sidebar. I have assumed no knowledge of Blogger and widgets so that absolute Blogger beginners can follow this tutorial.



1. Login to Blogger if not already logged in

2. Navigate to Layout > Page Elements

3. Click on Add a Gadget in the sidebar or other location eg the footer if you prefer

4. Select HTML/Javascript from the list of available gadgets

5. Paste the following code into the content box depending on your choice of button:




<a href="http://twitter.com/Your Profile"><img width="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqCuPDFfmqsl7XdnbhXi93NdOUG8TQeKxApJhQ2uJXJwD7nnLzonxhWHvTN7cwEABTtB-zwgibzPJuOPJTiheRLEGpJJL88YjulfzZC6OZR_LeW5PoNzWtV0JRK_KsEHRFZ0S-hOiy-M/s200/twitter-bar.gif" height="34" title="Follow Your Blog Name on Twitter"/></a><br/>




<a href="http://twitter.com/Your Profile"><img width="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBvQLTQHmsPOF3DruarSuIn20syrVfzDaB8C6Qp4nGAaknoDudv1-4dLxpUgfQkC_wqf99FSAvC7W59yGDBqGXiCEuExJ4xQ6rbxCokiFubypwP_FiXLnOOLregEocMVzmasXHkXhyphenhyphenfcU/s200/twitter-35a.png" height="42" title="Follow Your Blog Name on Twitter"/></a><br/>




<a href="http://twitter.com/Your Profile"><img width="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg576Tg-6T69Cj-zaqL7K3qLq07Dli3X-sGD-oaroH9h97fkRM-ZMaVpUCyrGGe2QClgsRpuJJmsK17fBtUFoBQR28qifNRayT8fB75O6oeyLFMU9UUy1DDamglkxzobe4CPa4nRfMQKiA/s200/twitter-32a.png" height="58" title="Follow Your Blog Name on Twitter"/></a><br/>



6. Change Your Profile to your own Twitter profile. For example:

http://twitter.com/YourProfile

to

http://twitter.com/BlogWizz

7. Substitute your blog name in the title for your own blog name

title="Follow Your Blog Name on Twitter"

to

title="Follow Blog Know How on Twitter"

8. Click on Save.

9. Move your new Twitter widget to the desired location on your sidebar using drap and drop

10. Click on View Blog to admire your new Twitter button



In this tutorial you have learned how to add a Twitter button, badge, icon to your Blogger Blogspot blog so that readers can sign up to follow you on Twitter. I have supplied you with a choice of three different buttons to get you started. For more Twitter buttons try these free Twitter vector icons or these free Twitter graphics or just type Twitter icons into your favorite search engine

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add Twitter Followers Counter to Blogger

Subscribe to Blog Know How by Email

20 comments:

Anonymous said...

Thanks! That was simpler than I thought!

The Whizz said...

Congrats on your new Twitter badge.

Portable Softwares said...

Thanks for post

The Whizz said...

No worries Portable Softwares. Glad to help.

Top Restaurant Of Canada said...

thanks but I like only small image. have u any image?

The Whizz said...

Hi Top Restaurant of Canada. Try this collection of free Twitter icons which includes some smaller buttons. Thanks for your query

Anonymous said...

Followed directions for putting twitter widget and did not work. got html on my page not the widget. I substituted my twitter name PolCommSense . what i got on my page was this...

oops cant cut and paste here. well its html

The Whizz said...

Hi Richard

Not sure why this wouldn't be working for you. I have double checked the icons to make sure they work. I see you have a link to Twitter
on your blog now so that may be enough for you. However if you still want the icon link please send me a copy of your template with Expand
Widget Templates checked and I will take a look. BTW I have emailed you too.

Anonymous said...

muchisimas gracias :)

Tsudha said...

Thanks .. It Works

Glenn Evans said...

Thanks for sharing these tips. For sure these are very helpful for entrepreneurs to update their clients about their businesses.

Twitter is one of the best social sites today. It helps us to be updated of our contacts' activities, and ius also a good channel for networking especially if for people with businesses. If we put a Twitter button to our blog, it will be easier for us to know our friends' or potential clients' feedbacks.

Here in Indianapolis, web marketing is very crucial to have a successful online campaign. That's why some companies hire good SEO services (Indiana-based) for more effective online marketing.

Unknown said...

Adding a Twitter button is just as easy as putting any scripting code or an image with link to a sidebar. Thanks so much for posting this guide! I particularly like the buttons you shared here, as they will fit perfectly with one of these sweet Twitter backgrounds. Right now, I'm using a professional Twitter background.

Charlotte G said...

Thank ye kindly for you help :) It was super easy and even though I didn't use your icon, I couldn't have done it without ya! I wouldn't have know where to put my user name and blog address. Thanks!!!

Skulls said...

Thank you soo freaking much! You have no idea how long I've been trying to add a twitter widget to my blog! You made it simple and efficient. Thanks again!

Michele said...

You just saved me headache! Thanks!

I Am CAM Jr said...

I DID it!!! Yippee!! Thank you!!!

Lisa said...

Thank you!!!!

Dwayne "Dee" Priester said...

This was very helpful and easy to follow. Thank you! Dee

Adriana Orozco said...

Thank You very much.

Daisy May said...

Thank you.

Post a Comment