Aggiornato il: 27-08-2023 14:51
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.
Ingegnere informatico per passione, consulente per necessità, docente di informatica; ho creato Trovalost.it e ho scritto quasi tutti i suoi contenuti. Credits immagini: pexels.com, pixabay.com, wikipedia.org, Midjourney, StarryAI, se non diversamente specificato. Questo sito non contiene necessariamente suggerimenti, pareri o endorsement da parte del proprietario del progetto e/o espressi a titolo personale. Per contatti clicca qui
