Pubblicato il 17/06/10 - aggiornato il  | 41 commenti :

Come inserire i bottoni di condivisione in automatico con Blogger in Draft.

Come certo saprete le personalizzazioni da utilizzare sulla piattaforma Blogger vengono prima introdotte e testaste in Blogger in Draft, che non è altro che un'altra Bacheca con maggiori funzionalità. Moltissimi blog hanno inserito nel modello i bottoni di voto e condivisione sui vari social network.

Il team che si occupa di Blogger deve aver preso atto della situazione e ha finalmente proposto una versione nativa di alcuni di questi bottoni. Specificatamente si tratta di

  1. Invialo per email
  2. Postalo sul blog
  3. Condividi su Twitter
  4. Condividi su Facebook
  5. Condividi su Google Buzz

Dopo essere entrati in Blogger in Draft si va su Design > Elementi pagina > Post sul blog > Modifica, si mette il segno di spunta a Mostra i pulsanti per la condivisione

bottoni-condivisione-blogger

Andando più in basso si può, attraverso il mouse collocare tali bottoni nella posizione che più ci piace nell'anteprima dei post

pulsanti-blogger

Infine si clicca su Salva per applicare le modifiche.

Esiste il problema che in molti modelli questi bottoni non si riesce a vederli nonostante questa personalizzazione; questo vale anche per modelli molto semplici. Si può ovviare all'inconveniente inserendo il codice relativo direttamente nel modello. Prima occorre decidere in quale punto del post vogliamo che compaiano. Si possono visualizzare all'inizio dell'articolo o alla fine. La differenza sta tutta nella zona del template in cui si incollerà il codice.

A titolo di esempio poniamo che gli vogliamo mettere alla fine del post, nella stessa posizione in cui solitamente sono presenti gli altri bottoni di condivisione. Andiamo su Design > Modifica HTML > espandi modelli widget e cerchiamo la riga seguente

<div class='post-footer'> o alternativamente quest'altra

<div class='post-footer-line post-footer-line-1'> se gli vogliamo inserire ancora più in basso.

Incolliamo il seguente codice immediatamente sotto a una di tali righe

<!-- BOTTONI CONDIVISIONE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>
<!--BOTTONI CONDIVISIONE FINE-->

e clicchiamo su Salva Modello. L'aspetto dei bottoni sarà simile a questo

pulsanti-blogger-2

Saranno grigi e si coloreranno quando ci si passa sopra con il mouse. Se si clicca sulla icona della email comparirà un modulo per inviare il post a un amico mentre se si va su quella di Blogger apparirà la lista dei nostri blog in cui postare l'articolo con il pulsante Pubblica post.

Un discorso diverso va fatto su Twitter: in questo caso l'URL viene automaticamente accorciato mediante il servizio goo.gl. Per Google Buzz e Facebook si aprono le solite finestre di condivisione già viste con altri pulsanti o bookmarklet.



41 commenti :

  1. a me nn appare nè in un caso nè col codice uff :(

    RispondiElimina
  2. Finalmente il team di Blogger comincia a svegliarsi.

    Grazie della dritta.

    Ciao Parsi. :)

    LeNny

    RispondiElimina
  3. uff, se utilizzo questo codice col mio template i bottoni compaiono sotto le etichette :-(

    RispondiElimina
  4. @filokalos
    La prima riga del codice rappresenta la condizione che i pulsanti si vedano solo nei post. Mi sembra difficile che il tuo modello non la rilevi.

    RispondiElimina
  5. non è che non lo rileva, me lo fa vedere solo nei post ma nella posizione sbagliata, compare sotto le etichette anziché sopra. Ho provato anche a metterlo dopo le altre stringhe che suggerivi in un altro post ma niente, non si smuove da sotto le etichette.
    Comunque ho tagliato la testa al toro e l'ho messo sotto il plugin per facebook, adesso il problema che ho è che il bottone di bloglovin mi viene a destra anziché a sinistra....

    RispondiElimina
  6. Grazie per lo script!! Funziona correttamente!!
    Vorrei solo chiederti, è un problema solo mio se quando cerco di condividere un post su fb non compare l'inizio dell'articolo che voglio condividere ma la descrizione del blog (quella cioè che ho inserito nel metatag del template)?
    Mio blog: http://bachecaebookgratis.blogspot.com/

    RispondiElimina
  7. @Silvia Masaracchio
    E' un problema comune a tutti i blog su Blogger. Prova a seguire le istruzioni di questo post (se non lo hai già fatto ... )
    http://www.ideepercomputeredinternet.com/2010/10/come-inserire-la-descrizione-del-blog.html

    RispondiElimina
  8. Se volessi scrivere "condividi: " e quindi visualizzare i bottoni di condivisione sulla stessa riga, e non sotto?

    RispondiElimina
  9. @Roma da bere
    Non puoi usare questi bottoni ma altri tipi di pulsanti fatti in proprio. In questo blog ne trovi parecchi basta che li cerchi con le etichette o con la barra di ricerca.

    RispondiElimina
  10. Ciao Ernesto e sempre grazie per tutto.
    Una domanda: perchè i bottoni mi compaiono solo nella pagina commenti?

    grazie ancora

    RispondiElimina
  11. @francescomisc
    Ma hai aggiunto il codice del post? In ogni caso i bottoni di condivisione in genere vengono mostrati solo nei post e non nella homepage. Questa dei commenti mi suona decisamente nuova.

    RispondiElimina
  12. Il codice è quello.
    Mi spiego meglio: in home, alla fine del post, i bottoni non sono visibili.
    Pigiando "posta commento" ( nel mio caso "vuoi dire la tua?", compaiono in coda al post, prima dei commenti.

    grazie

    RispondiElimina
  13. @francescomisc
    Significa che nel tuo modello il codice dei bottoni si trova in mezzo a dei tag condizionali che li mostrano solo nei post. Non è un problema, secondo me in homepage non dovrebbero mai esserci. Si condividono i post e solo raramente la home di un sito.

    RispondiElimina
  14. Grazie Ernesto.
    Esiste, se non ti do noia, un modo per farli comparire comunque in home?

    ancora grazie e buona giornata

    RispondiElimina
  15. @francescomisc
    Dovrebbero comparire di default. Non so perché nel tuo modello non è così. Potresti provare a spostare il codice dei bottoni prima o dopo il tag condizionale che ne impedisce la visione in home. Però sono operazioni ad alto rischio e non mi avventurerei per una sciocchezza simile.

    RispondiElimina
  16. Ernesto, cosa vedo? :O
    Che bei pulsanti di condivisione hai inserito!
    Sia quelli sopra (feed, iscrizione newsletter, facebook, ecc.) che quelli sotto (i +1 di Google, Twitter, Facebook). Ci sono praticamente tutti quelli indispensabili su due righe, e sono anche discreti e graziosi.
    Non è che hai scritto un articolo su come inserire tutto ciò?
    Posso corromperti per averli? ;)
    Un salutino, Giuliana

    RispondiElimina
    Risposte
    1. @Giuliana
      I pulsanti con contatore li ho già presentati qui
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      gli altri sono delle semplici icone ma se interessa magari ci farò un post in futuro

      Elimina
    2. Se ho capito bene, hai preso delle icone, le hai collegate al link cui devono dirigere e le hai inserite una a fianco all'altra con un gadget html? Se così fosse, dovrei riuscirci, penso sia un po' come ho fatto quando ho inserito gli antipixel o le bandierine per la traduzione nel mio blog. Mi confermi che è così?
      Grazie,
      Giuliana

      Elimina
    3. @Giuliana
      E' così, solo che per allinearle e distanziarle in modo appropriato è bene usare lo stesso codice dell'allineamento dei bottoni di cui al commento 22.a. Per l'effetto di spostamento quando si passa con il mouse sopra le iconcine ci vuole invece un altro trucchetto che magari svelerò in seguito.

      Elimina
  17. Grazie il tuo post mi ha permesso di inserire i bottoni che in automatico non si vedevano con facilità e vesto che sono imbranata davvero, devo dire che sei stato chiarissimo!
    Grazie ancora Alessandra

    RispondiElimina
  18. io invece vorrei toglierli ma non capisco come fare...

    RispondiElimina
    Risposte
    1. @ Cris
      Vai su Layout > Post sul blog > Modifica e togli la spunta a Mostra i pulsanti per la condivisione poi vai basso su Salva.

      Elimina
  19. Funziona! Grazie mille stavo diventando matta!!! l'unica cosa è che subito non vedevo che funzionasse perchè lo guardavo dall'home page...ma dalla pagina di ogni post invece funzia! non capisco però perchè ad una mia amica (a cui ha funzionato il metodo "normale" tramite blogger) si vedano anche dalla home page...

    RispondiElimina
    Risposte
    1. @FedericaVenturelli
      La ragione che si vede solo nei post dipende da un mio gusto personale che amo i bottoni visibili solo negli articoli. Se tu invece li vuoi vedere ovunque basta che elimini dal codice la seconda riga cioè
      < b:if cond='data:blog.pageType == "item"' >
      e la penultima riga cioè
      < /b:if >

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

    RispondiElimina
  21. Nel mio non si vedono, se inserisco il codice si viene a creare uno spazio, ma invece che esserci i bottoni c'è il vuoto...
    http://planningmymind.blogspot.it/

    RispondiElimina
    Risposte
    1. Questo post ha più di 5 anni. Da allora è molto cambiato il codice. Mi sembra strano che non ti si vedano i bottoni ufficiali di Blogger. Forse hai un modello scaricato da internet. Puoi sempre provare con altri bottoni come questi
      http://www.ideepercomputeredinternet.com/2015/07/blogger-icone-social-network-mobile-desktop.html
      http://www.ideepercomputeredinternet.com/2015/07/sprite-css-immagini-blogger-seo.html
      @#

      Elimina
    2. Niente non mi si visualizza niente..

      Elimina
    3. @# Come ti ho detto questo post è vecchio. Per trovare la giusta posizione in cui incollare il codice leggiti questo post
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      tu devi scorrere il codice della sezione desktop a partire da questa riga
      <b:includable id='post' var='post'>

      Elimina
    4. Quindi il codice qui sopra dovrei incollarlo nella sezione desktop? Scusa se ti assillo ma sono negata >.>

      Elimina
    5. Lascio perdere... Si vede solo un grande spazio vuoto e i bottoni non si vedono... :(

      Elimina
  22. Vorrei farli vedere solo negli articoli e non nella home. Come fare? Grazie

    RispondiElimina
    Risposte
    1. Si devono usare i tag condizionali
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      ma non è semplice. Seguimi i prossimi giorni
      @#

      Elimina

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