Come inserire un Social box di condivisione nel tema

social-box-wordpress

social-box-wordpress
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:

<!-- facebook button -->
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div class="buttons"><fb:like send="true" layout="box_count" show_faces="false"></fb:like></div><br />
<!-- twitter button -->
<div class="buttons">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="WordpressStyle" data-lang="it">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div><br />
<!-- Google+1 button -->
<div class="buttons">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'it'}
</script>
<g:plusone size="tall"></g:plusone>
</div>

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:

<div id="social-buttons"><?php include (TEMPLATEPATH . '/social-button.php'); ?></div>

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:

#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;
}

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:

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

Alla prossima 😉

10 thoughts on “Come inserire un Social box di condivisione nel tema

  1. Grandissimo post!! Mi piace.. E lo adotterò nel mio blog.. Anzi, se non mi dispiace, avrei intenzione di riportare anche la procedura per realizzarlo, ovviamente citando la fonte!! 😉

  2. Ciao,
    in verità i codici sono uguali ai tuoi, la differenza sta nel fatto che io li ho inseriti in un file separato da includere tramite funzione (non solo in single.php ma anche in index.php).
    Riguardo al plugin secondo me non vale la pena intasare la nostra installazione di plugin se si ha la possibilità di integrare le stesse funzioni via codice nella pagina.
    Poi ognuno ha le sue idee naturalmente 😉

  3. scusate per l’intrusione ma forse non ho capito io, volevi dire di inserire il codice css nel file “style.css” non style.php giusto ? ciao

  4. Ottimo tutorial! dovrei iniziare a mettere anche io sti bottoncini sul mio blog, anche se non nascondo di odiarli !! Comunque in caso prenderó come punto di riferimento questo post.

Lascia un commento

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