Quante volte avete voluto realizzare una barra con i principali social network(Social box) nel vostro sito? Magari per incrementare le vostre visite dal vostro pubblico più fedele? Ma probabilmente avete pensato che era troppo difficile e così vi siete arresi in partenza?
Bene non c’è niente di più facile ora vi mostrerò come fare a realizzare una barra fissa nella pagina che contiene i link per per la condivisone della pagina nei principali social network.
Pulsanti
Prima di tutto recuperiamo il codice per ogni social:
- Facebook, al momento il più importante. Potete anche personalizzare il codice, ma questo è il codice fatto su misura per la nostra barra:
<div id="like_facebook"> <div id="fb-root"></div><script src="http://connect.facebook.net/it_IT/all.js#appId=117294361684081&xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like> </div>
- Google +1, il nuovo strumento di google, al momento non è un vero è proprio social network, ma presto diventerà più importante di essi, dato che influenzerà molto le ricerche(tecnica SEO off page). In questo caso le personalizzazioni disponibili non sono tante:
<div id="google_piu_uno">
<!-- Inserisci questo tag nell'intestazione <head> o appena prima del tag di chiusura </body> -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'it'}
</script>
<!-- Inserisci questo tag nel punto in cui vuoi che venga visualizzato il pulsante +1 -->
<g:plusone></g:plusone>
</div>
- twitter, il secondo social network per importanza in Italia. In questo caso conviene crearsi il proprio codice, infatti twitter permette di suggerire automaticamente due pagine da seguire, quindi il mio consiglio è quello di creare una pagina del vostro sito da consigliare agli utenti che cliccheranno sul pulsante. Il tipo di pulsante adatto per la nostra barra è quello con conteggio laterale, il codice finale dovrebbe essere simile a questo:
<div id="twitter"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="thecsea" data-lang="it">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div>
N.B. Se personalizzate il codice dovete inserire il codice ottenuto all’interno del tag div esterno ad esempio nel caso di twitter dovete inserire il codice ottenuto tra <div id=”twitter”> e </div>
Codice
Adesso mettiamo tutto il codice all’interno di:
<div id="social"> <div id="sfondo_social"> </div>
e di
</div>
otterremo quindi una cosa tipo questa:
<div id="social">
<div id="sfondo_social"> </div>
<div id="like_facebook">
<div id="fb-root"></div><script src="http://connect.facebook.net/it_IT/all.js#appId=117294361684081&xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like>
</div>
<div id="google_piu_uno">
<!-- Inserisci questo tag nell'intestazione <head> o appena prima del tag di chiusura </body> -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'it'}
</script>
<!-- Inserisci questo tag nel punto in cui vuoi che venga visualizzato il pulsante +1 -->
<g:plusone></g:plusone>
</div>
<div id="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="thecsea" data-lang="it">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
CSS
Infine dobbiamo scrivere le proprietà css per posizionare correttamente la barra:
<style>
#social{
position : fixed;
height:30px;
width:300px;
left:50%;
margin-left:-150px;
bottom: 0px;
z-index:2;
}
#sfondo_social{
position:absolute;
height:30px;
width:300px;
background-color:#FF0000;/*cambiare qui il colore di sfondo*/
filter:alpha(opacity=80);
opacity: 0.80;
-moz-opacity: 0.80;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
z-index:1;
}
#like_facebook{
position:absolute;
left:8px;
top:5px;
z-index:3;
}
#google_piu_uno{
position:absolute;
left:115px;
top:3px;
z-index:3;
}
#twitter{
position:absolute;
left:195px;
top:5px;
z-index:3;
}
</style>
Spiegazione
Il css è abbastanza semplice, solo una precisazione: ho creato un div apposito per il colore di sfondo in modo da poter aggiungere la trasparenza solo nello sfondo e lasciare invariati i pulsanti, infatti è nella regola di “sfondo_social” che bisogna cambiare il colore di sfondo.
Se avete bisogno d’aiuto per adattare il codice o avete qualsiasi altro problema, non esitate a commentare.
N.B. La trasparenza e i bordi arrotondati non sono delle proprietà standard(fin quando non uscirà il css3)
P.S. Ancora non sono molto visibili i risultati di google +1 ma nel giro di qualche mese sarà uno dei principali fattori che influenzeranno le ricerche su google, che sta diventando sempre più un “social network”, nel senso che i suoi risultati dipendono sempre di più dagli utenti e dai social network
Potrebbero interessarti anche...
Tag: +1, barra, condividere, condivisione, facebook, google, google +1, mi piace, network, più 1, più uno, pulsante, pulsanti, segnalare, semitrasparente, social, Social box, social network, trasparente, twitter
[...] inserirlo nel mio sito e nel mio blog. All’inizio ho pensato di usare anche nel mio blog la barra fissa in basso, che ho già spiegato in un precedente articolo. Ma poi ho fatto una veloce ricerca su internet e ho scoperto l’esistenza di WordPress plugin [...]