Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Align Facebook Like, Twitter Tweet and Google +1 buttons
<div class="social">
<span class="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="[your-url-here]">Tweet</a>
</span>
<span class="google">
<g:plusone size="medium" href="[your-url-here]"></g:plusone>
</span>
<span class="Facebook">
<iframe src="https://www.facebook.com/plugins/like.php?href=[your-url-here]&amp;show_faces=false&amp;layout=button_count" scrolling="no" frameborder="0" style="height: 21px; width: 100px" allowTransparency="true"></iframe>
</span>
</div>
/* This gets Google to fall into place */
.social {
font-size: 1px;
}
/* This gets Facebook to fall into place */
.social iframe {
vertical-align: middle;
}
/* Set an optional width for your button wrappers */
.social span {
display: inline-block;
width: 110px;
}
/* Adjust the widths individually if you like */
.social .google {
width: 75px;
}
@shaharsol

This comment has been minimized.

Copy link

@shaharsol shaharsol commented Dec 18, 2012

This is so awesome, and saves a lot of inspect-element time. Thanks so much for sharing this!

@Zarioza

This comment has been minimized.

Copy link

@Zarioza Zarioza commented Jan 16, 2014

For new Facebook share button I suggest:

.social iframe,.social>span {
vertical-align: middle;
}

@Aaronius

This comment has been minimized.

Copy link

@Aaronius Aaronius commented Jan 31, 2014

Thank you for this!

@aleemb

This comment has been minimized.

Copy link

@aleemb aleemb commented Feb 17, 2014

JSFiddle demo.

@lekhnath

This comment has been minimized.

Copy link

@lekhnath lekhnath commented Mar 28, 2014

A big thanks.

@makaroni4

This comment has been minimized.

Copy link

@makaroni4 makaroni4 commented Apr 2, 2014

👍

@tsirolnik

This comment has been minimized.

Copy link

@tsirolnik tsirolnik commented Nov 18, 2014

Thanks! Also @Zarloza made a good edit. Thank you both

@gheghici

This comment has been minimized.

Copy link

@gheghici gheghici commented Dec 4, 2014

Thanks! Still working!

@mayaibuki

This comment has been minimized.

Copy link

@mayaibuki mayaibuki commented May 5, 2015

Doesn't work anymore :(

@tarik90

This comment has been minimized.

Copy link

@tarik90 tarik90 commented May 27, 2015

thanks. working

@llahnoraa

This comment has been minimized.

Copy link

@llahnoraa llahnoraa commented Aug 4, 2015

Is it me or Twitter button doesn't show up at all?

@asantos

This comment has been minimized.

Copy link

@asantos asantos commented Nov 4, 2015

@llahnoraa same here. Something's happening with twitter's button.

@iTrim

This comment has been minimized.

Copy link

@iTrim iTrim commented Jan 10, 2016

@asantos
@llahnoraa
@mayaibuki

To fix twitter button issue copy script below and paste it in the header section of your website in between script /script Tags

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

@Webinator2129

This comment has been minimized.

Copy link

@Webinator2129 Webinator2129 commented Apr 6, 2016

how would the new facebook button be incorporated?

@fabiowitt

This comment has been minimized.

Copy link

@fabiowitt fabiowitt commented Apr 9, 2016

For people having problems in the newer versions, just change the specificity ".social > span {"

@howtomakeaturn

This comment has been minimized.

Copy link

@howtomakeaturn howtomakeaturn commented Apr 26, 2016

Thank you very much! You save my day!

@howtomakeaturn

This comment has been minimized.

Copy link

@howtomakeaturn howtomakeaturn commented Apr 26, 2016

For ppl who have issue with new version facebook like/share button, try this


    /* This gets Facebook to fall into place */
    .social iframe {
        vertical-align: bottom;
    }
@howtomakeaturn

This comment has been minimized.

Copy link

@howtomakeaturn howtomakeaturn commented Apr 26, 2016

Guys, if you meet issues in 2016, try this

<style>
    /* This gets Google to fall into place */
    .social {
        font-size: 1px;
    }

    /* This gets Facebook to fall into place */
    .social iframe {
        vertical-align: bottom;
    }

    /* Set an optional width for your button wrappers */
    .social span {
        display: inline-block;
        width: 110px;
    }

    /* Adjust the widths individually if you like */
    .social .google {
        width: 75px;
    }

</style>
<div class="social">
    <span class="Facebook">
        <div class="fb-share-button" data-href="[[ URL ]]" data-layout="button_count"></div>
    </span>
    <span class="twitter">
        <a href="http://twitter.com/share" class="twitter-share-button" data-url="[[ URL ]]">Tweet</a>
    </span>
    <span class="google">
        <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300"></div>
    </span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment