How to make a facebook like button not scroll on your web site with CSS. ~ Designer's World

This photo was provided by Nick Molinaro @ MiamiWebz.com

So you want to keep your facebook like button fixed in one spot on your page?

There are many ways to skin a cat and do this in CSS. I am showing you my take on it.

Step 1. Go to the facebook like button page to get your code

Your code should look something like this:

<div class="likeButton"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%

2F%2Fwww.facebook.com%2Fpages%2FMiami-FL%2FMiamiwebzcom%23%21%

2Fpages%2FMiami-FL%2FMiamiwebzcom%

2F173211482688856&amp;layout=box_count&amp;show_faces=true&amp;width=4

5&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;hei

ght=65" scrolling="no" frameborder="0" style="border:none; 

overflow:hidden; width:45px; height:65px;" 

allowTransparency="true"></iframe></div>

Step 2. Create a CSS class called likeButton.

The code should look like this: 


.likeButton {
 position: fixed;
 right: 0px;
 height: 0;
 top: 300px;
 
}

That is all it takes to create a fixed position element such as a like button or anything else using CSS.

Designer's World

How to make a facebook like button not scroll on your web site with CSS.

So you want to keep your facebook like button fixed in one spot on your page?

Step 1. Go to the facebook like button page to get your code

Step 2. Create a CSS class called likeButton.

Related Post