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:
Naturalmente dovrai scegliere il formato dei vari bottoni adatto per il box in modo da creare un insieme gradevole e ordinato.
Alla prossima 😉
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!! 😉
Hola Red 😉
Felice che possa servirti.
Fai pure se vuoi postarlo nel tuo blog.
Mmm.. Per il G+1, stesso codice che hai indicato tu, ma non mi visualizza un tubo, che può essere??
Hai ragione…avevo dimenticato un pezzo di codice 🙂
Ora dovrebbe andare.
ciao, anch’io avevo fatto un tutorial su una social bar, solo che la mia è molto più generale e applicabile a qualsiasi sito. un porblema della tua è che è solo per i singoli articoli e non per la home per quello secondo per wordpress è meglio usare dei plugin modificabili come WordPress plugin – Google +1
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 😉
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
Ciao Luca, nessuna intrusione figurati 😉
Grazie per la segnalazione in effetti intendevo in style.css…errore mio.
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.
Grazie Federico! Se la condivisione nei social porta visite e fa conoscere il nostro blog allora ben vengano i bottoni.