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

Slow Android emulator

I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?

CCNA 1 Final Exam 2011 latest (hot hot hot)

  Hi! I have been posted content of ccna1 final exam (latest and only question.) I will post the answer and insert image on sunday. If you care, please subscribe your email an become a first person have full test content. Subcribe now  Some question  have not content because this question have images content. So that can you wait for me? SUNDAY 1. A user sees the command prompt: Router(config-if)# . What task can be performed at this mode? Reload the device. Perform basic tests. Configure individual interfaces. Configure individual terminal lines. 2. Refer to the exhibit. Host A attempts to establish a TCP/IP session with host C. During this attempt, a frame was captured with the source MAC address 0050.7320.D632 and the destination MAC address 0030.8517.44C4. The packet inside the captured frame has an IP source address 192.168.7.5, and the destination IP address is 192.168.219.24. At which point in the network was this packet captured? leaving host A leaving ATL leaving...