Assigning Facebook like send div, tweet iframe, Google Plus dynamic width

Question

I am using facebook like send, tweet and Google plus like this. I am specifying width 320 for facebook div and width 105 for tweet. But the facebook and tweet button's (div/iframe) should be automatically increased and decreased on their own based on the content width inside them. Can someone suggest me a way to achieve this. My main idea is to cut the gap between these sections.

<script type="text/javascript">
    var SnImpl= "<%=SnImpl%>";

    if (SnImpl == "true") {
        (document, 'script', 'facebook-jssdk');
        (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'));
        (function() {
            var scrGooglePlus = document.createElement('script');
            scrGooglePlus.type = 'text/javascript';
            scrGooglePlus.async = true;
            scrGooglePlus.src = 'https://apis.google.com/js/plusone.js';
            var scrWriter = document.getElementsByTagName('script')[0];
            scrWriter.parentNode.insertBefore(scrGooglePlus, scrWriter);
        })();
    }

    <div class="fb-like" data-href="<%=strSNURL %>" data-send="true"
        data-width="320px" data-show-faces="false">
    </div>
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url=<%=strSNURL %>&via=SomeOne&text=Something" style="width: 105px; height: 25px;"></iframe>
   <g:plusone href="<%=strSNURL %>"></g:plusone>

Answer 1

You need to know ahead of time how wide to make the plugins.

If you specify 320px for Facebook, facebook's iFrame will become 320px. Facebook doesn't even know how much minimum width the iframe's contents will take, so it just follows your orders of 320px. (http://developers.facebook.com/docs/reference/plugins/like/) I would suggest trying to specify 120px and also changing the layout style to "button_count" as this one is fairly narrow as compared to the default "standard". "box_count" will be the most narrow choice of them all, taking up only 50px width.

For twitter (https://dev.twitter.com/docs/tweet-button), you can specify "vertical" for the count property and this will skinny it up to 58px wide.

For google (https://developers.google.com/+/plugins/+1button/), you can specify tall bubble to match the other two. This will give you a width of 50px.