CODEWITHSUNDEEP
facebookfacebook-like
Nathan
Nathan

Reputation: 319

fluid facebook "like" button?

I have a facebook "like" button on my website, I'd like to make it fluid as the container it is in is fluid and when the container is smaller than the button there is an overflow. I'd like to keep the text and buttons the same size, id just like to have the overflowing text break off to the next line... there is plenty of results in a google search for customizing this, but I havent found anything that will do line breaks according to a fluid width. Thanks!

Upvotes: 1

Views: 1287

Answers (1)

Floyd Wilburn
Floyd Wilburn

Reputation: 1842

Perhaps I'm not understanding what you're after, but text wrapping should happen automatically with something like this:

<style type='text/css'>
#wrapper { width: 250px }
#like { border: none; width: 100%; background-color: transparent }
</style>

<div id='wrapper'>
<iframe id='like' src='http://www.facebook.com/plugins/like.php?href=xxx' scrolling='no' frameborder='0' allowtransparency='true'></iframe>
</div>

You can change the width of the wrapper div and the Like text will wrap as needed.

The XFBML doesn't work the same way, but you can cut off the text by fixing a width:

<style type='text/css'>
#like { width: 104px; overflow: hidden }
</style>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<fb:like id='like' href="xxx" send="true" show_faces="false" layout="standard"></fb:like>

Upvotes: 2

Related Questions