Add a Floating Follow Me/US on Twitter Button To Your Website Easily
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://img2.pict.com/91/e8/71/1279044/0/twitterfollowme.png" 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://img2.pict.com/91/e8/71/1279044/0/twitterfollowme.png” with your own twitter Follow Me/US image if you want.
And here is the link for Twitter Follow US button.
http://img2.pict.com/ad/29/8b/1279120/0/twitterfollowme.png
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.
Labels: Blogger Widgets, How to's, Twitter
posted by Amal at
Thursday, July 23, 2009
26 Comments:
Its nice to see on your website, will check it and following on twitter.
Thanks Anish. Hope to see you again.
This is helpful, but where exactly do i put the code...could you be more specific..ty
Its very easy. Just search for ]]></b:skin> in your template and paste the css code just before it and then search for <body> and paste the other code just after it. If you want to see where i have paste this code, just Press Ctrl + U on your browser and search for the code in the source code displayed. If not you can send me your template i can embed the code for you.
Cheers..
I had to look at your code and do copy and paste directly from your code then it worked. Stray spaces and such made not able to save the template in blogger
thx!
when you copy the second set of code, there is a space after the word follow and the code will not find the correct CSS. I noticed this after the badge appeared on top left and was not floating.
Thanks for the code, it does work with this minor issue corrected.
Thanks Friend for bringing it into notice. Corrected the code now. Now it works well. I checked.
Hi all
i faced a problem with the xml parser not correct.
the problem was i did not include the href link in single quotes.
so if you find any xml error regarding href, make sure that u write the link within quotes.
thanks
It doesn't work in IE8. Have a look at http://www.opencircle.co.za in Firfox and it displays correct but not in IE8
Yes it has a small problem with Internet Explorer.
WHere to find for Facebook logo ?
See This http://t1.gstatic.com/images?q=tbn:GdHFQ3Bas9UeHM:http://www.socialwork.utoronto.ca/Assets/Alumni/facebook-logo.png
I need floating facebook logo.
By the way i have test on IE8 and it is showing well without any problem.
You can easily add up the floating face book logo in your website. Just replace the image url in this post with the url of the facebook logo image.
Regards
i would like something like this, but with my twitter, facebook, youtube and all that. something little.
Think i can get there exploring a little bit, but any help will be welcomed.
But my question is, how can i make this but with the float in the end of the page (and not fixed 200) depending of the screen resolution?
Thanks :)
Do you want to get the floating buttons on the side like seen on this website (http://www.shoutmeloud.com/) ?
Just trim off the images sizes and add the images individually removing the position:fixed from the code.
Alternatively you can use coordinates like seen on labnol.org
@ Amal:
Yup something like that, thanks.
gonna try it when i get home ;)
Amal, your solution is simply brilliant. Not only does it work with Javascript disabled, it also solves the problem of the broken SSL lock icon (mixed http objects with https objects on the page).
We thus replaced the Go2web20 widget with your solution on our website.
We now follow you on Twitter as well.
Thank you!
Glad to know that my post is helpful to you.
Good Luck.
Works great! Thanks!
Thijs Schouten
www.thijsschouten.com
How should I put it in old (XML) template?
@ Jelena Jankovic FanSite
Try this piece of code.
<div style="border: 0;position: fixed; top: 200px; right:0;"> <a href=http://twitter.com/amalroy><img src="http://img2.pict.com/91/e8/71/1279044/0/twitterfollowme.png" alt="Follow Me on Twitter" /></a> </div>
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 "" :)
@Cool Vibe
Ah yes thanks for bringing it to my notice. Glad to see it on your site.
Post a Comment
Its your Turn now. Post Your Opinions and Doubts here. All comments are moderated. I will respond to your comments shortly. So, Do check back :) And This is a Do Follow Blog.
Subscribe to Post Comments [Atom]
<< Home