Prima di proseguire...
Potrebbe interessarti la nostra collezione di esercizi C risolti?
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
Barra semitrasparente social network(Social box – facebook-google +1-twitter) by cardinale claudio is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Pingback: Google +1 per wordpress « blog thecsea.it