Thursday, July 23, 2009

Add a Floating Follow Me/US on Twitter Button To Your Website Easily

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).

Add Twitter Follow ME button in WebsiteWhen 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;


Add a Floating Twitter Follow Me or US Button to your website

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.Add a Floating Twitter Follow Me or US Button to your website
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: , ,

26 Comments:

Anonymous Anish K.S said...

Its nice to see on your website, will check it and following on twitter.

July 24, 2009 at 7:07 AM  
Blogger Amal said...

Thanks Anish. Hope to see you again.

July 24, 2009 at 7:38 AM  
Anonymous Anonymous said...

This is helpful, but where exactly do i put the code...could you be more specific..ty

July 30, 2009 at 2:42 AM  
Blogger Amal said...

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..

July 30, 2009 at 4:04 AM  
Anonymous Anonymous said...

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!

August 11, 2009 at 9:34 PM  
Anonymous Anonymous said...

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.

September 18, 2009 at 2:45 AM  
Blogger Amal said...

Thanks Friend for bringing it into notice. Corrected the code now. Now it works well. I checked.

September 18, 2009 at 5:41 AM  
Anonymous Anonymous said...

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

September 25, 2009 at 2:33 PM  
Anonymous AntonRSA said...

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

October 4, 2009 at 12:29 PM  
Blogger Amal said...

Yes it has a small problem with Internet Explorer.

October 4, 2009 at 2:02 PM  
Anonymous Anonymous said...

WHere to find for Facebook logo ?

October 18, 2009 at 12:25 PM  
Blogger Amal said...

See This http://t1.gstatic.com/images?q=tbn:GdHFQ3Bas9UeHM:http://www.socialwork.utoronto.ca/Assets/Alumni/facebook-logo.png

October 18, 2009 at 1:31 PM  
Anonymous Sandeep said...

I need floating facebook logo.

By the way i have test on IE8 and it is showing well without any problem.

October 19, 2009 at 12:12 AM  
Blogger Amal said...

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

October 19, 2009 at 6:14 AM  
Anonymous Ed! said...

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 :)

October 21, 2009 at 4:44 AM  
Blogger Amal said...

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

October 21, 2009 at 6:45 AM  
Anonymous Ed! said...

@ Amal:
Yup something like that, thanks.
gonna try it when i get home ;)

October 21, 2009 at 8:22 PM  
Anonymous SoftwareCandy said...

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!

October 29, 2009 at 1:44 AM  
Blogger Amal said...

Glad to know that my post is helpful to you.
Good Luck.

October 29, 2009 at 5:18 AM  
Anonymous Thijs Schouten said...

Works great! Thanks!

Thijs Schouten
www.thijsschouten.com

November 12, 2009 at 3:29 AM  
Blogger Djole said...

How should I put it in old (XML) template?

November 12, 2009 at 6:21 PM  
Blogger Amal said...

@ 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>

November 13, 2009 at 6:52 AM  
Anonymous Praz said...

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

November 18, 2009 at 6:18 AM  
Blogger Amal said...

@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] -->

November 18, 2009 at 6:12 PM  
Anonymous Coolvibe said...

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 "" :)

November 24, 2009 at 7:55 AM  
Blogger Amal said...

@Cool Vibe

Ah yes thanks for bringing it to my notice. Glad to see it on your site.

November 24, 2009 at 6:31 PM  

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