How to place Floating Twitter Badge on your site

by George Serradinho on August 19, 2009



Some users have been asking how I have a floating Twitter badge/button on my site. This is so basic and should not take you more than 5 minutes to set up and implement.

Floating Twitter Badge/Button

Floating Twitter Badge/Button

Don’t worry about the question as I also had to ask another user. If you are keen to get the floating Twitter badge/button, then head over to floating Twitter badge and just fill in some fields and you are almost there.

Once you are by the floating Twitter badge site, you will see a form whereby you will have to enter your details. The field details are as follows:

  1. Twitter account – this will be incorporated in the code that will be inserted.
  2. Label – wording on the badge ranges from ‘Follow Me’, ‘Follow Us’, ‘Follow’ and ‘My twitter’.
  3. Color – this is the colour of the badge. It’s cool as you can pick a wide range of colours from the ColorPicker or you can use the hex value if you know it.
  4. Side – you will be able to select if the badge is on the left or right of your site.
  5. From top – you’ll be able to decide how far down it shows on your site. The default is set to 136 pixels. I actually changed mine to 200 so that it’s not to close to my page peel.
Floating Titter Badge/Button Form

Floating Titter Badge/Button Form

Implement on your site:

  1. Click ‘Update Code’ button.
  2. Copy the code that will show below the form.
  3. Paste it on your site template right before the “BODY” end tag (</body>).
  4. Note: The badge will not appear on IE6

For Thesis users, you can head over to Thesis Options panel. I suggest putting the code in your Footer scripts box, this will ensure it loads last.

Final Thought

I actually like this badge/button as one does not need to code it in your header/sidebar/footer, you just copy and paste and that’s it.

Do you have this badge/button on your site? Do you think it actually helps and stands out? Do you keep the standard light blue colour or did you change it?

Submit post to StumbleUpon Submit post to Twitter Submit post to Delicious Submit post to Digg Submit post to Reddit Submit post to Technorati Submit post to Facebook Submit to Shoutmeme.com

Other Interesting Posts:

WordPress & Thesis Customizations

This webiste is using Thesis theme & WordPress. I can create you a similar website or update yours.

View my services or portfolio for more details.

Author Information

Article by George Serradinho

I am the proud owner of Serradinho and have made this my second home. I'm into blogging, downloads, WordPress and the internet in general. I also love meeting and helping others and learning new techniques.

{ 1 trackback }

Best blog posts of the week | Tycoon Blogger
August 24, 2009 at 2:34 am

{ 59 comments }

1 Free Health Tips August 19, 2009 at 9:25 am

I was about to ask same question..but thanks u already judged what i want..let me add this in my blog too..thanks again for share
Free Health Tips´s last blog ..Using the swine flu facemask to avoid virus infection My ComLuv Profile

2 George Serradinho August 19, 2009 at 9:32 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Free Health Tips – not a problem, glad to be of help :) Let me know if you don’t come right.

3 Free Health Tips August 19, 2009 at 9:33 am

hey!! not able to find where to post these codes exactly..i dont have nay option of site template and not able to find</body tag anywhere is main page template :(
Free Health Tips´s last blog ..Using the swine flu facemask to avoid virus infection My ComLuv Profile

4 Ricky August 19, 2009 at 10:38 am

Follow on Twitter Follow @geniusgeeks on Twitter.



I guess I know that someone. Lol. Thank you for the post George.
Ricky´s last blog ..[How To]Save Blog From Malicious Iframe Codes-Part2 My ComLuv Profile

5 George Serradinho August 19, 2009 at 10:53 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Ricky – I had a few people ask me so I posted about it, not mentioning names at all :)

6 Stefan August 19, 2009 at 12:46 pm

Follow on Twitter Follow @ducedo on Twitter.



I really like you new floating sidebar. A shame it doesn’t work in IE though. Is it the same plugin you are using now?
Stefan´s last blog ..How to Install Wordpress on Hostgator My ComLuv Profile

7 George Serradinho August 19, 2009 at 1:58 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Stefan – would you be able to send me a screen dump of what you are getting and what version you are using?

8 George Serradinho August 19, 2009 at 5:16 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Stefan – it is working in IE 8 on my side now.

9 Stefan August 20, 2009 at 1:15 pm

Follow on Twitter Follow @ducedo on Twitter.



This is what it looks like in Windows XP with IE6:
http://pici.se/pictures/SKlWpQpFl.png

In Firefox 2 everything works like a charm, though.
Stefan´s last blog ..How to Choose a Theme For Your Wordpress Site My ComLuv Profile

10 George Serradinho August 20, 2009 at 1:21 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Stefan – why are you using IE6? There is already version 8, I checked and it looks fine to me. Maybe you should upgrade to never version.

11 Stefan August 24, 2009 at 4:28 am

Follow on Twitter Follow @ducedo on Twitter.



I’m using it when developing a website. On one of the websites I made for a local football team it’s still 6.75% who are using IE6, and this is why I always check my sites with it. Since you are approaching people who are up to date with the latest software I don’t think that is a problem for you.
Stefan´s last blog ..How to Backup and Restore Your Wordpress Blog My ComLuv Profile

12 George Serradinho August 24, 2009 at 7:28 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Stefan – If they are still using IE6, then you need to educate them to always get the latest software. Stay up to daye otherwise many websites would look bad.

13 Internethow Blog August 19, 2009 at 12:57 pm

Follow on Twitter Follow @internethow on Twitter.



I think it look cools. I might include it on my blog, when I have my new design sorted. Also, I liked the boomarking buttons at the end of the post.
Internethow Blog´s last blog ..How a simple taxi ride made me earn £110 per week? My ComLuv Profile

14 George Serradinho August 19, 2009 at 2:00 pm

Follow on Twitter Follow @gfserradinho on Twitter.



Internethow Blog – glad you liked it, thanks for the bookmarking info.

15 Greg Ellison August 19, 2009 at 1:32 pm

Follow on Twitter Follow @gregee on Twitter.



That is pretty cool. I like now you have all of your social networking sites on your left side of your website. Greg Ellison
Greg Ellison´s last blog ..Do you get upset at your Unsubscribers? My ComLuv Profile

16 George Serradinho August 19, 2009 at 2:01 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Greg – Stefan says it does not work in IE, trying to get a screen shot of it.

17 Tech-Freak Stuff August 19, 2009 at 3:24 pm

Follow on Twitter Follow @techfreaks on Twitter.



Good tut man! I have seen this on many websites, and I kept wondering how it was possible. I thought it was done with CSS.
Tech-Freak Stuff´s last blog ..Symptoms of Swine Flu in Geeks [Funny] My ComLuv Profile

18 Compute Live August 19, 2009 at 3:59 pm

Follow on Twitter Follow @computelive on Twitter.



Its really nice tut George..quite helpful..But I liked the social bookmarking icons which are currently floating in the left… I hope your next post will be about that.. ;)
Compute Live´s last blog ..Windows 7 RTM Theme for Windows XP My ComLuv Profile

19 George Serradinho August 19, 2009 at 4:17 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Compute Live – I will post about the icons once I have it working on all browsers and there are no problems what so ever :)

20 Extreme John August 19, 2009 at 4:04 pm

Follow on Twitter Follow @extremejohn on Twitter.



I like the floating badge George, I wonder how it will do on a wide screen blog design like mine. I might have to play with this bad boy if it fits in there nicely.

You always have the good stuff on here.
Extreme John´s last blog ..Strikeforce and Fedor Can Shove It My ComLuv Profile

21 George Serradinho August 19, 2009 at 4:21 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Extreme John – Let me know if you come right, I might be posting about my floating icons on the left when I’m satisfied.

22 Christie August 19, 2009 at 6:35 pm

Looks great! From FF or IE8.
When I have this post open I see two sets of everything though.
Christie´s last blog ..When is it worth outsourcing something? My ComLuv Profile

23 George Serradinho August 19, 2009 at 9:15 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Christie – I saw that as well. I reset the cached pages and all was ok.

24 Nehh August 19, 2009 at 7:15 pm

I added this blog to my blog.. had no problems.. I went for standard light blue colour, I didn’t wanted to change it.. Thanks for helping.
Nehh´s last blog ..Amber Rose topless My ComLuv Profile

25 Nehh August 19, 2009 at 7:20 pm

I added this badge* to my blog…. Please edit if possible.
Nehh´s last blog ..Amber Rose topless My ComLuv Profile

26 George Serradinho August 19, 2009 at 9:18 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Nehh – you need to input your Twitter username and then click the update button and copy just as it. I see your Twitter details on your button is not right.

27 Nehh August 20, 2009 at 1:44 pm

Hey thanks George for pointing it out.. I was in a hurry I didn’t checked it.. but now it’s working properly.
Nehh´s last blog ..Amber Rose topless My ComLuv Profile

28 George Serradinho August 20, 2009 at 3:37 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Nehh – no problem buddy, just thought I would point it out.

29 gautam hans August 19, 2009 at 10:05 pm

Follow on Twitter Follow @virtuosoblogger on Twitter.



There are many others as well , tweetboard and many other ways to add twitter to your blog.
great post! stumbled.
gautam hans´s last blog ..50+ Awesome Twitter Tips to become a Pro My ComLuv Profile

30 George Serradinho August 19, 2009 at 10:44 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@gautam – thanks for letting me know, always nice to know about other sites.

31 Klaus at TechPatio August 19, 2009 at 10:22 pm

Follow on Twitter Follow @TechPatio on Twitter.



I actually added the Twitter badge to my site a few days ago because I saw it here :)

But I don’t think it has given me any more followers – I get about one or two followers a day without me doing anything, and this hasn’t changed since I added the badge to my website. So I’ll just leave it there for a bit and maybe remove it later if I don’t see a change in Twitter followers soon.

I’m sure mileage varies :)
Klaus at TechPatio´s last blog ..TechPatio Is A “Do Follow” Blog – Spreading The Link Love For Free My ComLuv Profile

32 George Serradinho August 19, 2009 at 10:48 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Klaus – I don’t think it will give you hundreds or even thousands of followers. It just helps if you have that space open and you are not using it. You can at least have something there now. Thanks for sharing your opinion. I have just removed the button and add icons on the left side of my site, it has links to various pages/sites.

33 Klaus @ TechPatio August 20, 2009 at 8:24 am

Follow on Twitter Follow @TechPatio on Twitter.



How do you setup those icons in the left side, then? I think they may be more useful than the “follow me”- twitter badge from the right side :)
Klaus @ TechPatio´s last blog ..Most Popular Camera On Flickr: iPhone My ComLuv Profile

34 George Serradinho August 20, 2009 at 9:39 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Klaus – I have a post coming out next week Monday explaining how I did it as many have asked me.

35 S.Pradeep Kumar August 20, 2009 at 2:34 am

Follow on Twitter Follow @hellblog on Twitter.



Yeah. That badge was so cool, I replaced it with a subscribe option once ! :D
S.Pradeep Kumar´s last blog ..The What, Why And Whodunit – August 2009 My ComLuv Profile

36 George Serradinho August 20, 2009 at 7:02 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Pradeep – good to hear. I have flaoting icons now on my site and removed the Twitter badge.

37 Jacob Yap August 20, 2009 at 11:16 am

Follow on Twitter Follow @jacobyap on Twitter.



Good one, George. And I like your social bookmark icons on left sidebar. ;)
Jacob Yap´s last blog ..Envato Birthday Bundle – $300 Of Files For Just $20 My ComLuv Profile

38 George Serradinho August 20, 2009 at 1:17 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Jacob – glad you like them, had some fun with them.

39 Asswass August 20, 2009 at 6:47 pm

Follow on Twitter Follow @Asswass on Twitter.



I had that badge on my sidebar but I thought it was too big so I decided to remove it.
Asswass´s last blog ..Where the Hell is Matt going to dance next? My ComLuv Profile

40 George Serradinho August 21, 2009 at 6:51 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Asswass – I liked it, but I thought I could do better and so I decided on the floating icons I have now on my site.

41 Nihar August 20, 2009 at 7:47 pm

Thank you very much for sharing this. I have seen in some blogs and wanted to ask. But you gve me the answer.

I would like to know how did achieve the icons that are fixed ni the left of the screen?

Are you coming up with a post on this?
Nihar´s last blog ..How to Move Feeds from FeedDemon / Newsgator to Google Reader My ComLuv Profile

42 George Serradinho August 21, 2009 at 6:54 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Nihar – glad to have helped you. The floating icons is in a post next week, so make sure to come and visit and see how I did it.

43 Ana August 21, 2009 at 2:34 am

Follow on Twitter Follow @TruAnaGoncalves on Twitter.



Very useful and easy to set up. Thanks. :)
I also like your new icons on the left.
I am more fond of those as they are fixed, than the twitter that usually appears on the right hand side, and goes up and down the page.
Looks like you are definetly having fun, with the tweaks. Good on you. :)
Ana´s last blog ..Dream as your light = live bright My ComLuv Profile

44 George Serradinho August 21, 2009 at 6:56 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Ana – thanks a lot. I have a post set up explaining how I got it to work.

45 Doug Dillard August 21, 2009 at 6:40 am

Looks good in IE7 and Firefox! Actually your whole site design George is looking great! I am extremely jealous :)
Doug Dillard´s last blog ..Comment Spam Detective Trick My ComLuv Profile

46 George Serradinho August 21, 2009 at 6:57 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Doug – don’t be jealous, your site is amazing to. You provide a lot of great information that we all can use.

47 The Gooroo @ iBlogPlanet.com August 22, 2009 at 9:38 pm

I don’t see the button on your site anymore for some reason George.

Btw, may I ask how you placed the buttons on the left of your page (Twitter, Feedburner, etc..)?
The Gooroo @ iBlogPlanet.com´s last blog ..Second Time’s A Charm! My ComLuv Profile

48 George Serradinho August 24, 2009 at 7:21 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Gooroo – it’s coming in a post later today.

49 Tycoon Blogger August 23, 2009 at 1:28 am

Follow on Twitter Follow @tycoonblogger on Twitter.



I have seen the badge on other sites it is cool but I love the floating icons you have up right now. Waiting on a tutorial for that :-)
Tycoon Blogger´s last blog ..pay you to blog sites that I use My ComLuv Profile

50 George Serradinho August 24, 2009 at 7:22 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Tycoon – it’s coming out in a post later today. Many have asked how I did it.

51 Kurt Avish August 25, 2009 at 6:27 am

Follow on Twitter Follow @kurtavish on Twitter.



Wonderful Man! Thanks for sharing… Going to add it on both blogs today. I really like this widget as it has an intelligent usage of space without being too intrusive.
Kurt Avish´s last blog ..24 Awesome Lord Ganesha Wallpapers My ComLuv Profile

52 George Serradinho August 25, 2009 at 7:03 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Kurt – it’s not a widget, but just some coding that can be used.

53 Typhoon September 2, 2009 at 1:05 pm

Follow on Twitter Follow @smartbloggerz on Twitter.



Oh ok That’s a very interesting thing which I will surely try to add on my blog and will see is it looking good and appropriate.

Thanks for it..
Typhoon´s last blog ..The importance of cloaking affiliate links & how to do it My ComLuv Profile

54 Typhoon September 2, 2009 at 1:35 pm

Follow on Twitter Follow @smartbloggerz on Twitter.



Ok I tried it but the sad thing is that my blog theme is not compatible with it as when I installed it on my left side of the blog; the Tags widget at footer disappeared due to it, so I removed this but I think it’s really a good thing.
Typhoon´s last blog ..The importance of cloaking affiliate links & how to do it My ComLuv Profile

55 George Serradinho September 2, 2009 at 2:05 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Typhoon – sorry to hear, it have worked. Would be nice if you actually contact them about it as it might be a bug in your theme.

56 Lisalicious September 13, 2009 at 2:54 pm

I just wonder why that code doesn’t work on my blog
Lisalicious´s last blog ..Do you believe in third party in a relationship? My ComLuv Profile

57 George Serradinho September 13, 2009 at 3:17 pm

Follow on Twitter Follow @gfserradinho on Twitter.



@Lisalicios – if you copied the code and filled in the fields, then it should work 100%

58 Ana October 26, 2009 at 7:58 pm

Follow on Twitter Follow @TruAnaGoncalves on Twitter.



That’s extremely helpful Serradinho!
I came over to your site specifically to find this kind of tutorial.
I have just tested it on my site, and changed the colour to black!
Ana´s last blog ..Music for the Soul My ComLuv Profile

59 George Serradinho October 27, 2009 at 7:00 am

Follow on Twitter Follow @gfserradinho on Twitter.



@Ana – glad it helped you, let me know if you need anything else.

Comments on this entry are closed.

Previous post:

Next post: