Come allineare i pulsanti social in un sito o blog

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&amp;show_faces=false&amp;layout=button_count" scrolling="no" frameborder="0" style="height: 21px; width: 100px" allowTransparency="true"></iframe>
</span>
</div>

Poi la parte CSS:

Ads: V-Hosting è l'hosting italiano: scoprilo adesso
<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.



Questo blog pubblica contenuti ed offre servizi free da 11 anni. – Leggi un altro articolo a caso – Per informazioni contattaci
Non ha ancora votato nessuno.
Come allineare i pulsanti social in un sito o blog
7779461090 5228aae90f pastebin
Torna su