Pubblicato il 03/06/11e aggiornato il

Barra con i pulsanti di Facebook, Google PlusOne, Stumbleupon, Twitter, Digg e Google Buzz.

Dopo l'introduzione di Google PlusOne è il caso di aggiornare il codice della barra flottante di condivisione che è stata adottata da molti di voi. Per il momento non sono riuscito a includere lo script di Google PlusOne direttamente nell'elemento pagina e quindi bisogna incollare una riga di codice nel modello. Potrebbe dipendere dal fatto che questo bottone ha solo un giorno di vita. Se ci fossero delle novità sarà mia cura aggiornare questo post. Dopo la installazione sarà visualizzata nel blog una barra verticale per condividere gli articoli sui vari social network che rimarrà immobile allo scorrere della pagina, come è possibile vedere in questa

barra di condivisione bottoni 

Potrà essere inserita sulla sinistra prima dell'area del post oppure sulla destra tra area dell'articolo e sidebar. Per prima cosa dobbiamo installare lo script di Google PlusOne andando su Design > Modifica HTML e cercando la riga </head>. Immediatamente sopra si incolla la riga

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>{lang: &#39;it&#39;}</script>

e si salva il modello. Quindi si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice in Sezioni del sito

<!-- Share Button Start --> 
<style>
#condivisione {position:fixed; bottom:30%; margin-left:-95px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#condivisione .sharebutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='condivisione' title="Installa da Idee per Computer ed Internet">
<div style="clear: both;font-size: 10px;text-align:center;">Condividi</div>
<div class='sharebutton'>
<a name="fb_share" type="box_count" href="
http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sharebutton'>
<a class='twitter-share-button' data-count='vertical' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='
http://twitter.com/share' rel='nofollow'>Tweet</a>
<script src='
http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</div>
<div class='sharebutton'>
<script src="
http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div
>
<div class='sharebutton' id='digg' style='margin-left:3px;width:48px'>
<script src='
http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sharebutton'>
<a class='google-buzz-button' data-button-style='normal-count' href='
http://www.google.com/buzz/post' title='posta su google buzz'>
<script src='
http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>
<div class='sharebutton' id='gplusone'>
<g:plusone size="tall">
</g:plusone></div>

<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://goo.gl/I8Wsp">Install</a></div>
</div>
<!-- Share Button End - www.ideepercomputeredinternet.com -->

I codici dei singoli bottoni sono stati colorati di diverso colore. Si possono quindi inserire solo quelli che riteniamo ci servano e eliminare i superflui. Si trascina l'elemento pagina con il drag & drop nella parte bassa del layout. Si può optare per metterlo sotto Post sul blog o alla fine della sidebar 

bottoni di condivisione e di voto

Se sotto l'area del post avete Disqus può darsi che ci siano delle interferenze e allora è meglio metterlo nella Sidebar. Se decidete di inserire il pulsante di Twitter ricordate di sostituire il mio username (parsifal32) con il vostro.

Posizionamento della barra flottante in relazione al layout

La stringa evidenziata di rosso dà solo una idea dei parametri che possono essere inseriti per posizionare al meglio i pulsanti.

bottom:30%; indica che la distanza dalla parte bassa del layout sarà il 30% della lunghezza della pagina. Si può sostituire bottom con top per fissare la distanza dalla parte alta e si può sostituire la percentuale con un valore assoluto (Es: top:200px; )

margin-left:-95px; fissa la distanza in pixel dal layout di sinistra. Il dato è negativo in modo da togliere la barra con i bottoni dall'area del post. Se si vuole spostare verso sinistra bisogna diminuire il valore mentre per lo spostamento a destra va aumentato. Ricordo che, in presenza di numeri negativi, diminuire -95px significa passare a -100px.

Questi pulsanti saranno visibili anche nelle pagine statiche. Se per esempio avete tolto le sidebar da quelle pagine, il risultato estetico potrebbe essere negativo in quanto la barra potrebbe sovrapporsi a delle gallerie fotografiche o a moduli di contatto. In questo caso si possono usare i tag condizionali per non mostrare la barra flottante nelle pagine statiche.

Si dà un titolo al widget in modo da poterlo trovare più facilmente andando su Design > Modifica HTML dopo aver messo la flag a espandi modelli widget. Dopo aver individuato il codice del gadget, si dovrà incollare

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
subito dopo la riga
<b:includable id='main'>
e il tag
</b:if>
immediatamente prima di
</b:includable>

Si termina salvando il modello e eliminando il titolo del widget che a questo punto non ci serve più.





15 commenti :

  1. sono riuscito a inserirlo ma la pagina ci mette ben 15 secondi a caricarsi! inoltre non riesco proprio a levarlo dal bel mezzo dei post...help me please!

    RispondiElimina
  2. @watching...
    Il caricamento oggi è molto lento dipende da Twitter che ha probabilmente dei problemi ma anche Facebook è più lento del solito. Aspetta domani o dopodomani per un giudizio migliore.
    Ho visto il tuo sito. Se il problema è quello di avvicinarlo alla destra, cambia
    margin-left:-95px;
    con
    margin-left:-70px;

    RispondiElimina
  3. Inserito e tutto perfetto, non sai mica qual'è la stringa html da inserire per il bottone di frind feed.
    Grazie

    RispondiElimina
  4. @Pivo
    Non la conosco, bisognerebbe andare a vedere le API di FriendFeed
    http://friendfeed.com/api/
    ma non so se sia possibile creare il bottone. Comunque puoi provare con questo codice

    <div class='sharebutton'>
    <a expr:href='&quot;http://friendfeed.com/share?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Condividi su FriendFeed' border='0' src='URL_ICONA'/></a>
    </div>

    dove al incolli l'indirizzo della icona con la giusta dimensione. Però non si vedrà il contatore per FF.

    RispondiElimina
  5. Scusa non ho capito, come faccio a renderlo grande come gli altri bottoni?
    Ma il tasto di google +1 non pubblica automaticamente su google plus vero?

    RispondiElimina
  6. @Pivo
    L'icona di FriendFeed te la devi procurare da solo poi puoi ridimensionarla a piacere per esempio tramite Pixlr
    http://www.ideepercomputeredinternet.com/2011/01/pixlr-per-modificare-foto-e-immagini.html
    Una icona potrebbe essere questa
    http://min.us/leviXG

    RispondiElimina
  7. Hi there,
    Ho trovato questo post dopo lunghe ricerche, ma purtroppo ho visto che si riferisce all'uso di questa "bar" per lo sharing solo su Blogger.
    Mi permetto di chiedere se sai dove posso trovare una spiegazione su come personalizzare l'uso di questa barra su un "normal" web site.
    Grazie comunque, ho letto molti articoli interessanti
    Lio

    RispondiElimina
  8. @Lio
    Non so a cosa ti riferisci con normali website. Se hai un blog con wordpress sicuramente ci sarà un plugin ma non saprei adesso darti l'indirizzo. Prova a fare delle ricerche in tal senso in lingua inglese.
    Per siti con Joomla o altri CMS onestamente non so neppure indirizzarti :(

    RispondiElimina
  9. scusa no riesco a metterlo invece che a sinistra a destra, perchè?

    RispondiElimina
  10. @Manager
    Puoi metterlo anche a destra. Prova a mettere margin-left:800px; e poi setta bene la distanza

    RispondiElimina
  11. Grandissimo!!! il tuo blog è davvero utile. Volevo chiederti se c'è un modo di bloccare la serie di pulsanti a fine post. Insomma, che non vadano a finire nel footer. Magari bisognerebbe mettere un margine anche sotto o c'è già e non me ne sono accorto?... grazie

    RispondiElimina
  12. Ottimo!! Ma perchè per il pulsante di Twitter è è necessario inserire l'username?
    Non lo prende automaticamente l'username di chi si collega al sito?

    RispondiElimina
    Risposte
    1. @Livio
      La stringa
      data-via='parsifal32'
      con un nome utente qualsiasi la puoi anche eliminare e funziona lo stesso. Serve per inserire nel tweet in automatico la menzione all'autore del post, nel mio caso se clicchi sul pulsante oltre al link del post si visualizzerebbe @parsifal32

      Elimina
    2. Ho capito.
      E' possibile avere anche il codice per inserire i pulsanti in orizzontale? come in questa pagina (sopra 'RICERCA PERSONALIZZATA').
      Grazie

      Elimina
    3. @Livio
      Ti riferisci ai tre pulsanti con contatore Mi Piace, Twitter e Google Plus o ai sei bottoni subito sopra?
      Nel primo caso puoi consultare questo post
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      Nel secondo caso invece l'articolo è questo
      http://www.ideepercomputeredinternet.com/2012/03/come-inserire-bottoni-animati-con-i.html

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.