Vai al contenuto

Come allineare i pulsanti social in un sito o blog

7779461090 5228aae90f pastebin

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:


Vuoi pubblicare il tuo articolo su questo portale? Cercaci su Rankister (clicca qui) .

<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:

<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 12 anni. – Leggi un altro articolo a caso – Per informazioni contattaci
Non ha ancora votato nessuno.

Ti sembra utile o interessante? Vota e fammelo sapere.

cyberpunk 12

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

Ti potrebbe interessare:  Errore del server (5xx): cosa significa in Google Search Console (e come risolverlo)

Segui il canale Youtube @Tecnocrazia23