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
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:
- Twitter account – this will be incorporated in the code that will be inserted.
- Label – wording on the badge ranges from ‘Follow Me’, ‘Follow Us’, ‘Follow’ and ‘My twitter’.
- 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.
- Side – you will be able to select if the badge is on the left or right of your site.
- 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
Implement on your site:
- Click ‘Update Code’ button.
- Copy the code that will show below the form.
- Paste it on your site template right before the “BODY” end tag (</body>).
- 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?
I am the proud owner of Serradinho Blog and have made this my second home. I'm into blogging, downloads, WordPress, meeting and helping others, etc. Basically the internet in general :) Serradinho Web Services is my own company whereby I offer my services to clients. This ranges from web design, website upgrades, theme customizations, support, premium WordPress plugins and many more .....
View all posts by George Serradinho, there might be other posts that interest you.
{ 59 comments }
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 =-.
@Free Health Tips – not a problem, glad to be of help
Let me know if you don’t come right.
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 =-.
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 =-.
@Ricky – I had a few people ask me so I posted about it, not mentioning names at all
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 =-.
@Stefan – would you be able to send me a screen dump of what you are getting and what version you are using?
@Stefan – it is working in IE 8 on my side now.
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 =-.
@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.
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 =-.
@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.
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? =-.
Internethow Blog – glad you liked it, thanks for the bookmarking info.
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? =-.
@Greg – Stefan says it does not work in IE, trying to get a screen shot of it.
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] =-.
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 =-.
@Compute Live – I will post about the icons once I have it working on all browsers and there are no problems what so ever
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 =-.
@Extreme John – Let me know if you come right, I might be posting about my floating icons on the left when I’m satisfied.
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? =-.
@Christie – I saw that as well. I reset the cached pages and all was ok.
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 =-.
I added this badge* to my blog…. Please edit if possible.
.-= Nehh´s last blog ..Amber Rose topless =-.
@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.
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 =-.
@Nehh – no problem buddy, just thought I would point it out.
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 =-.
@gautam – thanks for letting me know, always nice to know about other sites.
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 =-.
@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.
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 =-.
@Klaus – I have a post coming out next week Monday explaining how I did it as many have asked me.
Yeah. That badge was so cool, I replaced it with a subscribe option once !
.-= S.Pradeep Kumar´s last blog ..The What, Why And Whodunit – August 2009 =-.
@Pradeep – good to hear. I have flaoting icons now on my site and removed the Twitter badge.
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 =-.
@Jacob – glad you like them, had some fun with them.
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? =-.
@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.
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 =-.
@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.
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 =-.
@Ana – thanks a lot. I have a post set up explaining how I got it to work.
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 =-.
@Doug – don’t be jealous, your site is amazing to. You provide a lot of great information that we all can use.
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! =-.
@Gooroo – it’s coming in a post later today.
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 =-.
@Tycoon – it’s coming out in a post later today. Many have asked how I did it.
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 =-.
@Kurt – it’s not a widget, but just some coding that can be used.
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 =-.
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 =-.
@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.
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? =-.
@Lisalicios – if you copied the code and filled in the fields, then it should work 100%
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 =-.
@Ana – glad it helped you, let me know if you need anything else.
Comments on this entry are closed.
{ 1 trackback }