Blogging Tips#14: Come aggiungere il Pin It button ad ogni immagine su Blogger

Pinterest è il social network della "perdizione": ci entri con l'idea di cercare qualcosa di specifico, ed esci con mille progetti in mente. Almeno per me è così! 

Però io lo adoro: non posso fare a meno di loggarmi ogni giorno e di aggiungere pin interessanti alle mie board.

Di Pinterest vi ho già parlato nel primissimo post dedicato ai Blogging Tips, quello in cui vi spiegavo come funzionava
Inoltre vi ho anche già sottolineato quanto possa essere utile per far conoscere il vostro blog e i vostri lavori.



Home Shabby Home Blogging Tips: come aggiungere il Pin It button ad ogni vostra immagine


Oggi vi propongo un tutorial facile facile per implementare sul vostro blog il bottone di Pin per ogni vostra immagine, in modo tale da facilitare anche ai vostri lettori la condivisione delle vostre immagini su Pinterest.


Non so se ve ne siete accorti, ma da due settimane se passate con il mouse sopra le mie immagini compare il bottone Pin It. Era da un po' che cercavo di implementare questa funzione sul mio blog, e finalmente ho trovato un codice CSS semplice e corretto (non mi ha dato nessun problema finora) per risolvere quella che sentivo ormai come una mancanza.






Premetto che il tutorial che vi propongo è valido solo per UTENTI BLOGGER, per chi avesse un blog su piattaforma WORDPRESS, le cose sono più semplici, perchè esistono dei plugin da scaricare ed installare.
Attenzione: non funziona per le visualizzazioni dinamichedi Blogger, nè per quelle da mobile (smartphone e tablet).

La mia fonte è questo articolo, il codice è valido e funzionante, io l'ho sperimentato e condivido con voi, in italiano, le istruzioni per installarlo sul vostro blog.
Ora, non abbiate paura: si tratta di lavorare sul linguaggio HTML, ma non è nulla di difficile. Se non vi sentite sicuri, fate prima un backup del vostro template, oppure provate prima il codice in un blog di prova.






  • Aprite la vostra Bacheca di Blogger e andate su: Modello > Modifica HTML
  • Cercate il tag </ body>: si trova verso la fine del template;
  • Copiate, appena sopra il tag </ body> questo script: 
 
 
     Per copiarlo andare QUI e troverete il codice.

  •  Potete decidere la posizione che volete dare al vostro Pin It Button:

var bs_pinButtonPos = "center";


        modificando quello che vi ho scritto in rosso (center) e decidendo tra:
  1. topleft (in alto a sinistra)
  2. topright (in alto a destra)
  3. bottomleft (in basso a sinistra)
  4. bottomright(in basso a destra)

  • Se volete potete usare un bottone Pin It disegnato da voi; sostituite a:

var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/
AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
   

      l'indirizzo in rosso, l'indirizzo dell'immagine da voi creata e salvata.
      Fate attenzione a mantenere le virgolette.

      Altrimenti, se vi piace l'immagine del pin proposta, lasciate l'indirizzo 
      così com'è.


  • Potete personalizzare la descrizione del Pin scrivendo un testo che verrà automaticamente inserito prima (var bs_pinPreffix) o dopo (var bs_pinSuffix) la descrizione stessa. Ad esempio:

var bs_pinPreffix = " Home Shabby Home";
var bs_pinSuffix = " by Home Shabby Home";





 

  • Una precisazione: le righe 7, 8, 9 del codice caricano una libreria jQuery: eliminatele se nel vostro blog è già caricata da qualche altra parte, perchè altrimenti il codice non funzionerà. Tips: se avete caricato delle slides o una galleria dinamica di immagini, probabilmente c'è sotto una jQuery.



Fate un bel respirone, eseguite tutti i passi che vi ho indicato, e in men che non si dica avrete anche voi il vostro bellissimo Pin It button! 

L'HTML non morde, giuro! ;) 


58 commenti

  1. Cara Mara, aspettavo questo tuo post con gioia.. ho appena fatto, seguito passo passo i tuoi consigli e tutto adesso è proprio come volevo!
    Un mega grazie e buon fine settimana.

    Ho intenzione di fare un post e linkare questo tuo bel tutorial.. baci
    Giulia

    RispondiElimina
    Risposte
    1. Sì! ho appena visitato il tuo blog e l'ho visto in funzione! Brava Giulia!

      Elimina
  2. Che meraviglia! I tuoi tutorial aiutano a capire gli oscuri meccanismi del web anche a gente imbranata come me!

    RispondiElimina
  3. wooooowwwwww, Mara mi sento moltissimo tecnologica adesso!
    fatto e funziona, grazie mille...mi piacerebbe moltissimo fare un pin-button fai-da-me ma non so da dove cominciare..magari potresti farci un altro bellissimo e interessantissimo post, a noi povere ignùrant del web! :-)
    un abbraccione super
    Giorgia/Mammaeco

    RispondiElimina
    Risposte
    1. AHAHAH! mi hai fatto morire con quell'ignùrant!!! ;) Per disegnare da voi un bottone Pin it dovreste aver dimestichezza con la grafica...ad esempio Photoshop! ;)

      Elimina
  4. Ciao Mara,
    bellissimo questo post... e soprattutto veramente utile!!
    Condivido tutto quello che hai detto su Pinterest... è veramente il social della perdizione!^_^ Io metto in lista alla fine talmente tante cose che vorrei realizzare, che poi raramente si concretizzano, perché ogni giorno se ne aggiungono di nuove... :D

    Un bacio,
    Eleonora

    RispondiElimina
    Risposte
    1. Non dirlo a me: ad ogni pin segue un "questo devo assolutamente farlo"....alla fine mi dico: "Sì, ma quando, di notte?" troppe idee e poco tempo, ecco il mio problema...che poi è il problema di tutte le mamme che lavorano, suppongo ;)

      Elimina
  5. Grazie mille per questo tutorial, era parecchio che volevo il pin-button e ora grazie a te mi sono decisa :)

    Baci
    Marzia

    RispondiElimina
  6. Ciao,

    grazie mille perché non conoscevo questo "trucchetto". Appena troverò qualche minuto libero da distrazioni farò qualche prova "per vedere di nascosto l'effetto che fà", per dirla alla Jannacci.

    Un saluto e buona serata :)
    Flavio

    RispondiElimina
  7. Ahahahhahahaha l'html non morde! Ahahahah Mara, mi hai fatto morire! Giuro, stavo aspettando questo post da mesi (nel frattempo, visto che non ti decidevi, mi sono attrezzata da sola!). Ma ancora non avevo capito come personalizzare il pin it button, quindi grazie, come al solito, meravigliosi consigli. La prossima domanda da un milione di euro è: come facciamo a mettere le icone dei vari bottoni (tumblr, pinterest, facebook, e-mail, ecc.) in POSIZIONE ORIZZONTALE sulla barra laterale dei nostri blog??!! Io sono riuscita a metterli solo in verticale! Grazie, un abbraccio

    Viviana

    P.S. Io con l'html sto iniziando a fare amicizia, non è così cattivo, ha solo una brutta reputazione :-)

    RispondiElimina
    Risposte
    1. Ma sì, l'HTML in fondo è bello! Bhè ... a me piace!

      Elimina
  8. grazie di questo bel regalo
    ci provo sicuramente,
    ma bisogna essere in un momento di piena lucidità
    in questo istante non è il mio caso...
    a presto

    RispondiElimina
  9. Sei una benedizione! Grazie, finalmente funziona!!!!! Grazie mille! E ora, curioso un po' nel tuo blog :)
    Baci, Ina

    RispondiElimina
  10. GRAZIE!
    GRAZIEEEEEEEEEEEEEEEEEEEEEEEEEEEE
    che dico: GRAZIEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!

    ciao Lisa

    RispondiElimina
  11. Eseguito passo passo e senza prendere neanche un morso ^_^ Grazie!!!!!!!

    RispondiElimina
  12. Fatto!!! Grazie per aver condiviso, ti seguo..
    e complimenti per il blog, davvero bello!
    a presto
    Marica

    http://homemade-ideas.blogspot.it
    https://www.facebook.com/homemadeideas.blogspot

    RispondiElimina
  13. Seguendo il tuo tutorial ho appena messo il pulsante con grande facilità, grazie!!
    Solo una cosa: se si volesse creare un logo di Pinterest al posto di quello, come si fa a caricare? Io per far prima l'ho cercato su internet e ne ho trovato uno che mi piaceva (lo cercavo più piccolo), se può essere utile a qualcuno è questo:
    http://www.squarespaceplugins.com/wp-content/uploads/pinit-1.png

    Ecco il risultato nel mio blog:
    http://lemusedikika.blogspot.it/

    RispondiElimina
    Risposte
    1. Devi caricare la nuova immagine su Photobucket, o qualsiasi altro host di immagini che usi. Poi metti il link dell'immagine caricata al posto di quello presente già nel codice HTML. Ciao!

      Elimina
    2. Grazie della risposta! In realtà non so cosa sia Photobucket, non uso nessun host per le immagini... mi hai insegnato una cosa nuova, per ora non mi serve ma sono sicura che prima o poi ne farò buon uso.

      Elimina
  14. Ciao Mara,
    non sò come ringraziarti perché era da tempo che provavo a capire come potevo fare per collegare le mie foto a Pinterest....avevo chiesto ad altre blogger ma nessuna risposta ed ora tu! ....GRAZIE di cuore davvero
    con affetto
    Sara

    RispondiElimina
  15. Finalmente ce l'ho fatta anch'io!!! devo ammettere che ho tremato quando ho clikkato "salva modifiche"...ma pfiuuuuu!! Tutto è andato bene!!!
    Grazie a te, davvero l'html non morde...ma un pò d'ansia la crea lo stesso...ahahahahaha!!!
    Baci,
    Grazia

    RispondiElimina
  16. Utilissimo!!!! Era proprio quello che mi serviva!! Grazie!!! :)

    RispondiElimina
  17. Ciao Mara, grazie per il tutorial, non sono riuscita a completarlo, volevo cambiare il bottone, quello nuovo l'ho salvato iscrivendomi a Photobucket traendone dopo il link, ma sulla foto del blog compare un quadratino trasparente che mi collega a pinterest ma del pin colorato nessuna traccia! Sigh! Sonia

    RispondiElimina
    Risposte
    1. Dipende da come hai creato l'immagine, probabilmente è un png (ovvero ha lo sfondotrasparente) e forse è di dimensioni troppo piccole o di bassa risoluzione.

      Elimina
  18. Mara, che paura......ho provato e quando ho confermato le modifiche dell'HTML (sembra una parolaccia!!!), ho perso 10 kg. Però quando ho visualizzato il blog e ho visto una bella P rossa in alto a sinistra...ho gongolato!!!!
    Grazie, sei un MITO!!!!

    RispondiElimina
  19. ciao!
    Abbiamo conosciuto da poco il tuo bellissimo blog. Complimenti davvero! Tantissimi consigli molto utili!
    Stiamo provando a seguire il tuo post, ma non capiamo perchè il Pin Button ci appare gigante e fuori dall'immagine...completamente sgranato...che cosa sbagliamo? :-(

    RispondiElimina
    Risposte
    1. Il codice è funzionante, provate a ripetere la procedura. Altro non saprei cosa consigliarvi, perchè dovrei vedere il vostro codice.

      Elimina
    2. già provato e riprovato :-(

      Potrebbe essere che l'icona si leghi all'immagine e quindi dato che noi abbiamo un impostazione di grandezza foto fissa, l'icona si sgrani e si ingrandisca? E' l'unica cosa che ci viene in mente... :-(

      Elimina
  20. Grazie mille per questo post, è davvero a prova di idiota e infatti ci sono riuscita. :)

    RispondiElimina
  21. Possibile che non trovi questo: neanche con la ricerca con ctrl F?

    RispondiElimina
  22. grazie mille, funziona alla grande!!!

    RispondiElimina
  23. Ho scoperto oggi il tuo blog grazie a Lisa di ShabbyPassion, lei mi ha consigliato di seguire il tuo tutorial per inserire il Pin...grazie a te ci sono riuscita...sei bravissima.
    Da oggi hai anche una followers in più!

    RispondiElimina
  24. Davvero molto utile come post! Grazie!

    RispondiElimina
  25. alla pagina che rimanda il link,per copiare il codice,da inserire nel modello,non me lo fa copiare....grazie comunque

    RispondiElimina
    Risposte
    1. Ciao Elisabetta, basta che selezioni il codice e fai copia incolla col mouse.
      Ciao!
      Mara

      Elimina
  26. grazie per questo post, mi è stato utilissimo :) hai ragione, l'html non morde :D

    RispondiElimina
  27. Ti seguo da tanto, ma solo oggi ho scoperto in modo più approfondito questa utilissima rubrica!! GRAZIE, perchè per persone imbranate come me tu sei una risorsa!
    Con affetto,
    Fiorenza

    RispondiElimina
  28. grazie mille per questo tutorial, sembrava difficilissimo e invece ci vogliono meno di 5 minuti! :)

    RispondiElimina
  29. Ciao, sono una tua nuova follower :D il tuo blog è favoloso, è organizzato benissimo! Inoltre mi hai dato tante idee per migliorare il mio e spero di avere presto il tempo di mettermici d'impegno :D grazie mille!
    Teensy, dal blog Opticallilluscion

    RispondiElimina
  30. Grazie per le indicazioni! L'ho fatto anch'io e funziona, l'unica cosa vorrei cambiare il colore del bottone si può? o devo inserire un'immagine mia?

    RispondiElimina
  31. ho inserito il tuo codice ma non capisco perché il bottone non appaia in tutte le immagini

    RispondiElimina
  32. grazie mille per questo post utilissimo!! :)

    RispondiElimina
  33. Grazie, spiegato benissimo... ci sono riuscita!!! :)

    Bea

    RispondiElimina
  34. yeah!!! finalmente ci sono riuscita!!! grazie mille :))

    RispondiElimina
  35. sei stata fantastica!!!!!!! finalmente grazie a te ci sono riuscita. Una cosa non mi è chiara... dove carico eventualmente un bottone pinterest screato da me. Intendo l'immagine non la stringa. Grazie!

    RispondiElimina
  36. Grazie anche da me bellissimo post molto chiaro!! Avevo paura di fare casino ma sono riuscita.
    Un saluto

    RispondiElimina
  37. Grazie mille per aver pubblicato questo tutoria!!! :)
    Spiegato molto bene, davvero!
    Ho appena creato un blog quindi per me è tutto nuovo...
    Michela
    http://lamikella-homemade.blogspot.it/

    RispondiElimina
  38. Grazie per questo tutorial...l'ho appena inserito!

    RispondiElimina
  39. Grazie per aver realizzato il tutorial migliore del mondo!! Chiarissimo!!

    http://www.thedisabilitygirl.blogspot.it/

    RispondiElimina
  40. Da principiante (issima) ho cercato ovunque un tutorial del genere e questo è il più semplice e dettagliato allo stesso tempo. E soprattutto...funziona!

    Grazie,
    Eleonora

    RispondiElimina
  41. OOOHHHHH.... MIODDIO....L'HO FATTO.......avevi ragione: l'HTML non mi ha morso.... :-D Grazie

    RispondiElimina

Thank you for visiting me! All your comments make me happy! I will read each one carefully and respond to them!