Aggiornato il: 06-09-2022 12:16
Se non riesci ad allineare i bottoni social di Facebook, Google Plus e Twitter, qui troverai un frammento di markup che fa al caso tuo.
Delle numerose tecniche suggerite in rete, il più delle volte poco adattabili e scarsamente valide, l’unica che ho trovato funzionare davvero è riportata su un fiddle (quindi è un frammento di markup funzionante e comprovato) e lo riporto qui di seguito per comodità.
Prima la parte HTML:
<div class="social"> <span class="twitter"> <a href="http://twitter.com/share" class="twitter-share-button" data-url="https://gist.github.com/thebigreason/1296097">Tweet</a> <script>!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');</script> </span> <span class="google"> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="medium" href="https://gist.github.com/thebigreason/1296097"></g:plusone> </span> <span class="Facebook"> <iframe src="https://www.facebook.com/plugins/like.php?href=https://gist.github.com/thebigreason/1296097&show_faces=false&layout=button_count" scrolling="no" frameborder="0" style="height: 21px; width: 100px" allowTransparency="true"></iframe> </span> </div>
Poi la parte CSS:
<style> /* 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; } </style>
Si adatta facilmente a qualsiasi pulsante sia integrato via HTML e, ad oggi, non funziona con i CMS come WordPress ma solo se editate il codice liberamente su HTML statico. Del resto la difficoltà nell’allineare i bottoni social di Facebook, Twitter e Google Plus deriva sostanzialmente dai diversi modi in cui sono stati implementati.
Il pastebin che ho ricopiato per comodità lo ritrovate anche qui.