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 3 Final Exam => latest version

1 . Which security protocol or measure would provide the greatest protection for a wireless LAN? WPA2 cloaking SSIDs shared WEP key MAC address filtering   2 . Refer to the exhibit. All trunk links are operational and all VLANs are allowed on all trunk links. An ARP request is sent by computer 5. Which device or devices will receive this message? only computer 4 computer 3 and RTR-A computer 4 and RTR-A computer 1, computer 2, computer 4, and RTR-A computer 1, computer 2, computer 3, computer 4, and RTR-A all of the computers and the router   3 . Refer to the exhibit. Hosts A and B, connected to hub HB1, attempt to transmit a frame at the same time but a collision occurs. Which hosts will receive the collision jamming signal? only hosts A and B only hosts A, B, and C only hosts A, B, C, and D only hosts A, B, C, and E   4 . Refer to the exhibit. Router RA receives a packet with a source address of 192.168.1.65 and a destination address of 192.168.1.161...