BytePost Brevi guide, dritti al punto!
BytePost
CSS HTML

Come Creare una Social Bar HTML

di |Pubblicato

Quante volte ti è capitato di navigare all’interno di un sito web e vedere un menu dedicato ai pulsanti social, che rimandano alle pagine dei profilo personale del creatore, o del sito web stesso, dei vari social media più conosciuti?

all social icons

Praticamente quasi ogni sito web ha una social bar dedicata all’interno delle varie pagine web, anche BytePost ha differenti menu dedicati al collegamento delle pagine social come Facebook o YouTube. Le potenzialità di questo strumento credo non necessiti nemmeno di spiegazione, e se stai leggendo questo articolo già conosci la sua importanza.

In questa guida ti spiegherò come creare la tua social bar personalizzata in HTML e CSS e come integrarla nelle tue pagine web, ti mostrerò il codice completo così da poterlo semplicemente copiare e incollare nei documenti HTML.

Creare una social bar in HTML e CSS

Le social bar o menu social, sono sezioni dedicate alla visualizzazione e all’interazione con pulsanti/link HTML collegate con pagine di differenti social media. Un creator può facilmente integrare una social bar in una pagina di blog, così che i lettori possano visitare la sua pagina social di riferimento e restare aggiornati sui futuri articoli o nuovi contenuti.

Le social bar hanno differenti stili e comportamenti (qui una raccolta di social bar CSS personalizzate per i tuoi progetti), e possono essere personalizzate tramite del semplice codice CSS. Questo significa che, se hai intenzione di modificare i codici presenti in questa pagina, dovresti già a vere un po’ di dimestichezza con il codice HTML e CSS. Nel caso puoi sempre seguire i nostri corsi gratuiti dedicati a HTML e a CSS.

Quella che andremo a creare sarà una social bar fissa (fixed), sempre visibile all’interno di una pagina web. Il lettore potrà sempre interagire con essa in qualsiasi posizione si trovi.

social bar html

Ciò che dovremo fare sarà:

  • Definire la struttura della social bar con codice HTML.
  • Recuperare un set di icone con i loghi dei rispettivi social media.
  • Definire lo stile e la posizione con regole di stile CSS.

Codice HTML

Il codice HTML ci permetterà di definire la struttura della social bar e dei pulsanti contenuti in essa. In questo, i tag HTML utili a questo scopo sono il tag <div> e il tag <a> per i collegamenti ai social.

   <div id="social-bar">
     <a href="#" class="facebook"> <i class="fa-brands fa-facebook"></i></a>
     <a href="#"class="instagram"> <i class="fa-brands fa-instagram"></i></a>
     <a href="#"class="twitter"> <i class="fa-brands fa-twitter"></i></a>
     <a href="#"class="youtube"> <i class="fa-brands fa-youtube"></i></a>
     <a href="#"class="linkedin"> <i class="fa-brands fa-linkedin"></i></a>
    </div>

Il div “social-bar” contiene tutti i pulsanti dei social di nostro interesse, ma come puoi vedere abbiamo anche dichiarato delle specifiche classi per ognuno di loro. Queste classi derivano dal set di icone che tra poco andremo a vedere.

L’unica modifica che dovrai fare in questo codice è quella di inserire i link alle tue pagine web social nel tag <a href="...">.

Set di icone – Font Awesome

Le social bar hanno sempre le icone dei social media più comuni, e queste icone devono necessariamente essere “prese in prestito” da fonti esterne. Font Awesome fa al caso nostro.

Font Awesome è una delle più grandi librerie di icone al mondo, la maggior parte dei siti utilizza questa libreria per mostrare icone di qualunque genere. Per integrare Font Awesome nel nostro documento HTML e nella nostra social bar ci basterà dichiarare il seguente tag, possibilmente all’interno del tag <head> (e già dovresti iniziare a vedere le icone all’interno del documento HTML).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />

La versione di Font Awesome dichiarata in fase di scrittura è la più recente disponibile (6.0.0 beta 3)

Regole di stile CSS

In questa parte andremo a dichiarare tutte le regole di stile CSS per la corretta visualizzazione del nostro menu social:

#social-bar {
  position: fixed;
  top:0;
  bottom:0;
  margin:auto;
  left:0;
  height:-webkit-fit-content;
  height:-moz-fit-content;
  height:fit-content;
}
#social-bar a {
  display: block;
  text-align: center;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  padding:15px;

  font-size: 20px;
  text-decoration:none;
  color: white;
}
#social-bar a:hover {
  opacity:0.8;
}
.facebook {
  background: #3B5998;
}
.twitter {
  background: #55ACEE;

}
.linkedin {
  background: #3985DD;

}
.instagram {
  background: #dd2a7b;

}
.youtube {
  background: #bb0000;

}

Puoi integrare queste regole in un foglio di stile css separato o nel tag <style>.

Queste regole permetteranno alla barra social di essere mostrata in posizione fissa al lato sinistro della pagina, e di restare sempre visibile in qualsiasi posizione.

Responsive social bar

Una pratica corretta sarebbe quella di ottimizzare la social bar per essere visualizzata correttamente anche all’interno di dispositivi mobili con display più piccoli (responsive design). Per fare questo basta dichiarare altre regole di stile CSS aggiuntive.

@media screen and (max-width:700px){
  #social-bar a {
    padding:8px;
  }
}

Una semplice regola @media screen con la variazione del parametro padding ci permetterà di non penalizzare la visualizzazione sui dispositivi mobili e smartphone.

social bar responsive
Con CSS responsivo i pulsanti vengono automaticamente ridotto per essere mostrati in uno schermo piccolo.

Non dimenticare ovviamente il tag meta viewport fondamentale per design responsivi.

<meta name="viewport" content="width=device-width, initial-scale=1">

Non ti resta che personalizzare ora la tua social bar ed inserirla nel tuo sito web.

Codice completo

Qui il codice completo HTML e CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>Social bar
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <style>
      .text{
        padding:20px 10%;
      }
      #social-bar {
        position: fixed;
        top:0;
        bottom:0;
        margin:auto;
        left:0;
        height:-webkit-fit-content;
        height:-moz-fit-content;
        height:fit-content;
      }
      #social-bar a {
        display: block;
        text-align: center;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        padding:15px;
        font-size: 20px;
        text-decoration:none;
        color: white;
      }
      #social-bar a:hover {
        opacity:0.8;
      }
      .facebook {
        background: #3B5998;
      }
      .twitter {
        background: #55ACEE;
      }
      .linkedin {
        background: #3985DD;
      }
      .instagram {
        background: #dd2a7b;
      }
      .youtube {
        background: #bb0000;
      }
      @media screen and (max-width:700px){
        #social-bar a {
          padding:8px;
        }
      }
    </style>
  </head>
  <body>
    <div id="social-bar">
      <a href="#" class="facebook"> 
        <i class="fa-brands fa-facebook">
        </i>
      </a>
      <a href="#"class="instagram"> 
        <i class="fa-brands fa-instagram">
        </i>
      </a>
      <a href="#"class="twitter"> 
        <i class="fa-brands fa-twitter">
        </i>
      </a>
      <a href="#"class="youtube"> 
        <i class="fa-brands fa-youtube">
        </i>
      </a>
      <a href="#"class="linkedin"> 
        <i class="fa-brands fa-linkedin">
        </i>
      </a>
    </div>
  </body>
</html>

Codice interattivo

Qui in basso puoi testare e vedere il codice completo interattivo, possibile grazie all’interazione con codewith.it.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti:

AUTORE

Simone Bernardo
Appassionato da sempre del mondo informatico, di ogni sua sfaccettatura. Ideatore, creatore e gestore di BytePost fin dalla pubblicazione. Studio come autodidatta e non smetto mai di imparare cose nuove ed interessanti.

Potrebbe anche interessarti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA