Most of the twitter users show their power by the number of followers they have. So its essential to get a good number of twitter followers if you want to become a power twitter user. Many websites out there put a small twitter icon, or a follow me on twitter statement near to their subscription button in their website to get followers. But actually these things go unnoticed for most of the visitors. So creating a floating Follow me/us on Twitter button in your website will surely grab viewers attention. (Each and Every visitor to your site will notice it for sure).
When i was looking for this i came across a website called Go2Web20 which gives the same. But it had many negatives. The most weird thing i found that it is based on JavaScript, so if a visitor with JavaScript disabled on his/her browser visits the site then its of no use. Secondly it does not work on Internet Explorer (Still most of the people use IE). So i needed an alternative for this.
I found it easier to implement the same Twitter Follow floating button with the help of CSS. So, Here is a Simple way to
Add a Floating Twitter Follow Me/US Button to your website
The advantages of this method are :
It is compatible with all browsers.
It doesn’t use JavaScript at all.
Add this CSS code to your Website First.
#twitter-follow { border: 0;position: fixed; top: 200px; right:0;}
(Blogger users should add this before ]]></b:skin> in your template)
In the above code top: 200px; the distance from the top you can adjust it to suit your website.
Now add the following code to your Website. (For blogger users add the code in your template just after the <body> tag)
<div id=”twitter-follow”> <a href=”http://twitter.com/amalroy”><img src=”http://4.bp.blogspot.com/_ACL511Lh6M8/TFWWxp92gqI/AAAAAAAAA0Y/rHevMwxLfyg/s1600/twitter+follow+us+button.gif” alt=”Follow Me on Twitter” /></a> </div>
Replace my name with yours. Also if you need the image to be shown on left side just replace right:0; in the css code with left:0;
You can replace “http://4.bp.blogspot.com/_ACL511Lh6M8/TFWWxp92gqI/AAAAAAAAA0Y/rHevMwxLfyg/s1600/twitter+follow+us+button.gif” with your own twitter Follow Me/US image if you want.
Here is the link for Twitter Follow US button.
http://4.bp.blogspot.com/_ACL511Lh6M8/TFWWxp92gqI/AAAAAAAAA0Y/rHevMwxLfyg/s1600/twitter+follow+us+button.gif
And here is the link for Twitter Follow Me Button
You will now have a Twitter Follow Me button in your website similar to mine.
If you have any doubts regarding this comment it down.
33 Comments
It is not working in Google Chrome and IE8. Working pretty well in Firefox and Opera. Amal can you say why? you can see my problem at http://www.clearglimpse.com
@Praz yes i saw you have problem with that twitter button in chrome and ie8. I suggest you to try the code given in above comment.
Also add another set of same codes between these two tags.
<!– [if lt IE 8]>
<! [endif] –>
Thanks, we just added it to our site (http://www.coolvibe.com).
Note that you forgot to quote the URL in your code, remember the "" :)
You solved the IE issue… I am beating my head against the wall. How did you resolve?
Just take a look at the above comments friend. You’ll get the solution. I have explained it there :)
Thanks for responding… unfortunately I am unable to get the code to work. No matter what I try the image remains locked in one position. Could it be because of the PHP code on the page?
It cant be the problem. Try adding the css code into the main css file and try this code.
</div
@Cool Vibe
Ah yes thanks for bringing it to my notice. Glad to see it on your site.
yo… love this thoughts.
thanks !! very helpful post!
Hey I have read your articale and cant seem to get it to work any suggestions
It works without any problems. I have tested it. The twitter button has problems only with internet explorer. Else it works perfectly. Do tell me your sites platform and name.
Hi,
Great tutorial, just what I needed. Is there anyway to stop the badge overlapping left content though? So if you have the badge to the right and you drag the window left the badge will not overlap the main site content rather it would stop. This is mainly so that users with small resolutions don’t have site content obscured.
@ CJ
As the twitter badge position is fixed it can’t be moved.
This is working for me except that in IE it is in the top corner, it is showing in the correct position in Firefox and Safari. Help.
It has certain compatibility issues with internet explorer. But try inserting the code once more between these two tags.
along with the other codes.
Ok so I noticed a bit of misinformation and a bunch of thanks, nothing really there to help people solve the IE8 problems with this syntax so here I go!
In MOZ or Chrome this code seems to work fine:
#twitter-follow {
border: 0;
position: fixed;
top: 123px;
right:0px;
}
With IE we experience the Microsoft effect (don’t wanna cooperate)
Depending on the application of this feature you might wanna check out other methods. But if just want something simple that should work then this should do it for you.
#twitter-follow {
border: 0;
position: fixed;
padding-top: 108px;
margin-right:-10px;
float:right;
}
IE seems to be a little stupid with positioning so using a float will produce the same result, as you can see I had to subtract some of the margin on the right side of the image.
Note: if you are using multiple ‘s you might want to apply a z-index property so that when the page is being viewed by a smaller screen (like a netbook) it does not distort your site design, as I have experienced.
#twitter-follow {
border: 0;
position: fixed;
padding-top: 108px;
margin-right:-10px;
float:right;
z-index:-1; /* <<– z-index property */
}
Remember all designs are diffrent so this may have to be adjusted according to the application type.
hope this helps, enjoy!
Thanks so much dear friend.
those who copied the code and doesn’t work, remove the quote marks and replace them with new ones
Thank you method77. After doing what you said it works great :)
And thank you amal :)
Thank you so much!!! I was very helpful for me.
it is showing in the correct position in Firefox and Safari. Help.
The useful information.thanks
sir ,
i am subhrajyoti , i have a blog
http://krazzycollections.blogspot.com
I want to use floating follow(google friend connect) button using html. please reply
just replace the twitter img url and link url with that of google friend connect button. You will get the floating button.
Has anyone tried this in blogger? I've tried to follow the directions exactly and got an error message when saving the edited html.
Yeah i've tried this in blogger and it works fine. Look for extra spaces or missing characters or brackets while pasting the code.
thanks! really helpful!
the "Follow Me" image seems to be missing.
@Ken
Thanks for notifying me about it friend. The images got removed from pict where it was hosted before. Re uploaded it now :)
Great instructions thanks. I searched for ages trying to find how to implement a 'floating' button like this until I came across this Post ;)
Thanks. Its working good….
Thanks Amal and all who helped with the fixes, it’s a great help as it would have taken ages for me to figure out! :)