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.

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! ;)