28 febbraio 2013

Barra flottante orizzontale per Blogger con i bottoni di Facebook, Twitter e Google Plus.

Ci sono moltissimi social network ma soltanto tre sono assolutamente imprescindibili vale a dire Twitter, Facebook e Google Plus. Avere i bottoni per la condivisione dei singoli post è un importante atout in grado di aumentare non solo le visite ma anche l'autorevolezza del sito. In passato ho presentato delle barre verticali che riunivano insieme tutti questi bottoni, con questo post vado a illustrare come si possa installare una barra orizzontale che compaia solo negli articoli e solo quando il lettore scorra la pagina verso il basso.

All'interno della barra, che avrà un colore sempitrasparente personalizzabile, saranno presenti i bottoni di Facebook, Twitter e Google Plus.

barra-social-network 

Prima della sua installazione occorre salvare il template per sicurezza. Si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la riga </head> e subito sopra si incolla il codice della libreria JQuery. Si può evitare di farlo se fosse già presente nel modello. Si deve adesso mettere un marcatore per fissare il punto della pagina in cui durante lo scorrimento deve iniziare a visualizzarsi la barra. Si cerca la riga <data:post.body/> e si incolla subito sopra o subito sotto quest'altro codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='md-active-share-comment-marker'/>
</b:if>

Se lo si incolla sopra la barra sarà visualizzata quasi immediatamente mentre se lo si incolla sotto si vedrà solo verso la fine dell'articolo. Adesso si va verso la fine del template nella riga </body> e subito sopra si incolla questo ultimo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/barra-flottante.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 80px; '>
<div id='fb-root'/>
<script src='http://connect.facebook.net/it_IT/all.js#appId=362600930477422&amp;xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>           
<div style='display:block; margin: 0 30px; padding: 5px 0px 0px; color: #FFFFFF'>
<span style='color: #EEEEEE; font-size: 18px;'> Condividere i post che ti piacciono più che un dovere è un piacere! </span><br/>
<span style='color: #FFFFFF; font-size: 20px; font-weight:bold;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>

Finalmente si salva il modello. Le personalizzazioni più importanti riguardano i seguenti parametri
  1. Se si possiede un dominio personalizzato occorre scaricare il file javascript della seconda riga caricato su Google Sites e caricarlo sulla cartella Public di Dropbox.
  2. Il colore di sfondo della barra è dato dal codice rgba(235, 88, 60, 0.8); in cui 0.8 è la quantità di trasparenza (o opacità). Per maggiori informazioni leggete il post sui codici dei colori.
  3. Il pulsante di Facebook dovrebbe funzionare anche senza sostituire l'ID della applicazione. Se così non fosse create una vostra applicazione su Facebook
  4. L'espressione colorata di viola può essere personalizzata a piacere così come i colori e le dimensioni dei caratteri della scritta di invito e del titolo dell'articolo data dal tag di Blogger <data:blog.pageName/>
Fonte | MakingDifferent -


30 commenti:

  1. Che bellina!
    Ma quindi si può anche far diventare la barra completamente trasparente, lasciando che compaiano solo i pulsanti dei social e non la riga orizzontale?
    P.S. Non te l'ho mai detto, ma adoro il tuo pulsante rosso del demo. E' la prima cosa che cerco e premo quando entro in un tuo articolo ;P

    RispondiElimina
  2. bellissima!!
    senti ma il tutorial per i bottoni che hai tu sulla destra, sotto la strscia..cerca...
    come li metti..c'e' qui il tuo tutorial?
    Grazie!!

    RispondiElimina
  3. molto bella la barra continua cosi', mi stai dando molte ideee................good job

    RispondiElimina
  4. molto interessante e utile :) domanda da un milione di dollari: ma c'è un modo per far sì che i pulsanti di condivisione (anche quelli standard di blogger) "peschino" l'immagine contenuta nel post, quando lo si condivide, anziché pescarne una a caso dal blog???

    RispondiElimina
  5. @#
    @Giuliana
    Lo puoi fare basta che tu scelga il colore rgba(255,255, 255, 0.0). Ovviamente devi modificare i colori del testo altrimenti non si legge.

    @nonnapapera
    Si tratta di bottoni in 3D. Il tutorial sta qui
    http://www.ideepercomputeredinternet.com/2012/03/icone-sociali-con-effetto-3d.html

    @sarab
    L'unica cosa che si può fare è inserire le Preferenze di ricerca con Descrizione
    http://www.ideepercomputeredinternet.com/2012/03/la-descrizione-nelle-preferenze-di.html
    http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html

    RispondiElimina
  6. ciao Ernesto ho un problema con la condivisione dei post.quando vado per condividere un post su facebook,non si vede piu' l'immagine,come posso risolvere grazie mille

    RispondiElimina
    Risposte
    1. Anche a me ultimamente capita la stessa cosa con alcuni post, e non riesco a risolvere nemmeno con il debugger di Facebook, che prima invece risolveva...

      Elimina
    2. Mi si è cancellato il commento, lo riscrivo.
      Volevo aggiungere che debuggando di nuovo, l'immagine me l'ha postata.
      Per debuggare: scrivere "Facebook debugger" nel motore di ricerca --> entrare nella pagina "Debugger - Facebook Developers" --> inserire l'url dell'articolo di cui non compare l'immagine nell'apposita barra --> cliccare sul pulsante "Debug" --> riprovare a incollare l'url dell'articolo in questione su Facebook, magari dopo essere usciti e rientrati nel proprio account e dopo aver cancellato cronologia e cookies.
      A me l'80% delle volte funziona.

      Elimina
    3. @#
      Lady Bella segui il consiglio di Dieta e Dintorni
      @Giuliana Questo fatto del debug confesso di non averlo mai provato, sembra interessante :)

      Elimina
    4. Sì, molto.
      In genere funziona sia quando non si vedono le immagini (come in questo caso) che quando non funziona il pulsante Like in qualche post. Io per sicurezza debuggo quasi tutti gli articoli, tanto ci vogliono solo pochi secondi!
      Non funziona sempre, ma spesso sì. Meglio che niente :)

      Elimina
  7. ciao scusami ma quale delle url devo copiare?

    RispondiElimina
    Risposte
    1. Quella dell'articolo del blog di cui non si vede la foto su Facebook quando provi a pubblicarlo

      Elimina
    2. provato ma non si vede lo stesso ...pazienza...strano che fino a ieri l'altro non avevo problemi

      Elimina
    3. errata corrige..dopo 2 volte ci sono riuscita..grazie infinite dieta e dintorni grazie mille

      Elimina
    4. Prima di reincollarlo su Facebook sei uscita/rientrata nell'account e hai cancellato cronologia e cookies?

      Elimina
    5. fatto ci sono riuscita leggi sopra

      Elimina
    6. diventata follower tua :)

      Elimina
  8. Ciao Ernesto,
    conosci qualche sito dove posso trovare social button carini, poi ci penso io a inserire codice html...

    oppure qualche sito dove posso trovare tasti e possibilita di metterli semplicemente con un gadget in barra di blogger?

    Grazie
    Dino

    RispondiElimina
    Risposte
    1. @# Il concetto di carino è relativo ;-). Basta che fai una ricerca su Google e ne trovi quanti ne vuoi

      Elimina
  9. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. @# Ogni modello fa storia a sé e quindi non si possono risolvere a priori problemi di incompatibilità

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. La maleducazione di certa gente è inconcepibile :/

      Elimina
    4. Impara a scrivere in italiano, prima di criticare il lavoro altrui caro Luigi.Continua cosi Ernesto, il tuo blog è una risorsa troppo utile!

      Elimina
  10. E' possibile spostare tutto (3icone e scritte) un po' più a destra senza lasciare buchi di sfondo?

    RispondiElimina
    Risposte
    1. Questa riga determina la posizione del contenuto
      width: 800px; margin: 20px auto;'
      Larghezza 800 pixel e centrato nel layout. Se non lo vuoi centrare ma spostare a destra dipende dalla risoluzione dello schermo ma pogrtesti provare con
      width: 800px; margin-top: 20px; margin-left:350;

      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.