Skip to main content

How can I make the Facebook Like button"s width automatically resize?



I'm implementing the Facebook Like Button , but I'm running into some trouble with the width. I'm using the JavaScript SDK implementation, not the direct iframe.





According to the documentation, the default width is 450 . That's fine, and I understand that the width can be changed by way of the width attribute on the <fb:like> tag. However, my problem is that I really cannot specify a fixed width. Due to the nature of the button, the width is not constant in all states. For example, if no one has liked the page yet it displays "Be the first of your friends to like this"; if someone has, it displays "XXX people like this. Be the first of your friends"; and still if you have liked it, it displays "You like this" or "You and XXX people like this." In other words, there are many states of the button, none of which share a constant width.





This wouldn't be much of a problem if it weren't for the fact that I want to display the button floated on the right-hand side of a <div> . To be clearer, this is what I'm doing:







<div id="wrapper">

<span class="fb-like"><fb:like show_faces="false" width="450" font="lucida grande""></fb:like></span>

...

</div>

<style type="text/css">

.fblike {

display: inline-block;

padding: 0.5em;

position: absolute;

right: 0;

top: 0;

}

#wrapper {

position: relative;

}

</style>







This works fine, but the problem is that the iframe now has a constant width of 450 pixels. Since the iframe is left-aligned, when the text is shorter there is extra space to the right. I've tried various applications of text-align: right to no avail. And the problem is further compounded by the fact that this is really just fancy markup for an iframe that is added by the FB SDK, so I'm powerless to change any of its contents with CSS or JavaScript.





I need a solution that will either (a) keep the width of the button area dynamic (i.e., it changes according to the content); or (b) right-align everything in the button area.





Thanks for any help anyone can give me!



Source: Tips4all

Comments

  1. #fblike iframe {
    width: 95px !important;
    }

    #fblike .fb_edge_comment_widget iframe {
    width: 330px !important;
    }


    And

    <div id="fblike"><fb:like show-faces="false" layout="button_count"></fb:like></div>


    This way both comment and like button iframes are fixed width. No funny effects. Hope it helps.

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...

Is it possible to have IF statement in an Echo statement in PHP

Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.