Come inserire un Social box di condivisione nel tema

In molti siti possiamo notare un box fixed, che segue lo scroll della pagina, contenente i link di condivisione nei Social, un esempio lo vedi anche in questo blog. In questo articolo vedremo come implementarlo per condividere il nostro post su Facebook, Twitter e +1 di Google.

Un file per i codici dei Social

Per comodità consiglio di creare un file social-button.php nella root del tema dove inserirai i codici per visualizzare i vari bottoni di condivisione, in questo caso Facebook, Twitter e +1 di Google, naturalmente potrai inserirne anche altri a piacere. Apri il file appena creato e inserisci il codice mostrato qui di seguito:

[php]

[/php]

Ora andremo a richiamare social-button.php nel nostro tema, in questo caso nel template single.php (la pagina del post singolo). Generalmente dovrebbe andar bene l’inserimento appena dopo il div content, naturalmente dipende molto da che tema stai usando:

[php]

[/php]

Non ci resta che dare uno style e un posizionamento al Social Box e per farlo useremo come sempre i CSS quindi apri il file style.css del tuo tema e inserisci questo codice:

[css]#social-buttons{
position:fixed;
width:70px;
margin:0px 0px 0px -120px;
background:#fff;
border: 2px solid #000;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.buttons{
margin:10px 0px;
text-align:center;
}[/css]

Anche qui dovrai adattare la posizione del box in base al tema che usi modificando i valori dove serve.

Dove trovo i codici dei bottoni?

Il codice per i singoli bottoni lo puoi trovare qui di seguito:

• Facebook
• Twitter
• Google +1 

Naturalmente dovrai scegliere il formato dei vari bottoni adatto per il box in modo da creare un insieme gradevole e ordinato.

Alla prossima 😉