Barra semitrasparente social network(Social box – facebook-google +1-twitter) 1

Pubblicato in css facebook google +1 social network twitter con 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 in da

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.

barra social network(social box)

Pulsanti

Prima di tutto recuperiamo il codice per ogni social:

1
2
3
<div id="like_facebook">
<div id="fb-root"></div><script src="http://connect.facebook.net/it_IT/all.js#appId=117294361684081&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like>
</div>
1
2
3
4
5
6
7
8
9
<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:
1
2
3
<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:

1
2
<div id="social">
<div id="sfondo_social">&nbsp;</div>

e di

1
</div>

otterremo quindi una cosa tipo questa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="social">
<div id="sfondo_social">&nbsp;</div>
<div id="like_facebook">
<div id="fb-root"></div><script src="http://connect.facebook.net/it_IT/all.js#appId=117294361684081&amp;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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<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

CC BY-SA 4.0 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.

Ti è piaciuto il contenuto?

Guarda ORA la nostra collezione di esercizi C risolti

Lascia un commento

Un commento su “Barra semitrasparente social network(Social box – facebook-google +1-twitter)”