Aggiungere Pulsante Pin It ad ogni Immagine

Ciao Creativi,
Chi non ha mai sentito parlare di Pinterest?
Pinterest è un  social network nato nel 2010 con lo scopo di poter condividere immagini, foto e video tramite la creazione di bacheche in cui è possibile inserire immagini con un determinato tema.

Navigando tra un blog e l' altro vi sarà capitato di notare che, al passaggio del mouse su un immagine, spunti una "P" stilizzata come questa:

Bene! Quello è il simbolo che vi invita a mettere un "Pin" sulla vostra immagine, una sorta di "mi piace" come si fa su Facebook.
Oggi vogliamo spiegarvi come inserire questo simboletto sulle vostre foto, ma attenzione questo tutorial è valido per utenti Blogger.

Occorrente:
  1. Iscrizione a www.pinterest.com 
  2. Creazione all' interno di Pinterest di una bacheca in cui inserire le vostre foto.
  3. Immagine da utilizzare come pulsante Pinterest.
Iniziamo!
Possiamo inserire il Pin It in due modalità differenti, tutto dipende se volete usare l' immagine ufficiale di Pinterest, oppure volete usare un immagine personalizzata da voi creata come abbiamo fatto noi. Questa è la nostra immagine Pin It:

Vediamo nel dettaglio i due casi:

PRIMA POSSIBILITA':
Proviamo a inserire il pulsante ufficiale di Pinterest.
Andando su CREATORE DI WIDGET possiamo personalizzare il nostro pulsante tramite le possibilità che ci dà Pinterest.
Sul lato sinistro della pagina troveremo l' opzione Pulsante Pin It.



Una volta cliccato su esso, Pinterest ci permette di creare il pulsante. Quando abbiamo finito clicchiamo su:


E copiamo il codice che si è creato automaticamente.
Questo codice andrà inserito nel nostro Modello. Cioè, accediamo a Blogger e andiamo su Modello-> Modifica Html.
Qui cerchiamo la stringa </body> (per trovarla basta cliccare ctrl+f e nella casella che compare scriviamo </body> e premiamo invio ).
Una volta individuato </body>, sopra di esso inseriamo il codice che Pinterest ha generato per noi e salvate il Modello.


SECONDA  POSSIBILITA': 
Per questa parte del tutorial, la nostra fonte è stato questo articolo. Ora seguiamo i seguenti passi:
  1. Creiamo l' immagine da usare come pulsante in base alla nostra fantasia e alle nostre capacità.
  2. Carichiamo l' immagine online su un hosting di immagini. Noi ad esempio abbiamo usato https://imageshack.com/ .
  3. Accediamo a Blogger
  4. Andiamo su  Modello-> Modifica Html
  5. Cerchiamo la stringa </body> (come detto prima per trovarla basta cliccare ctrl+f e nella casella che compare scriviamo </body> e premiamo invio ).
  6. Una volta individuato </body>, inserite sopra di esso il seguente codice.

Per copiare il codice cliccate qui.

Per poter usare la vostra foto, nella riga 03, dovere sostituire all' url presente tra le virgolette, l' url della vostra immagine che avete caricato online.

Per cambiare la posizione invece, dovete modificare la riga 04 con una delle seguenti possibilità:
  • topleft per visualizzare l' immagine in alto a sinistra.
  • toplright per visualizzare l' immagine in alto a destra.
  • bottomleft per visualizzare l' immagine in basso a sinistra.
  • bottomright per visualizzare l' immagine in basso a destra.
La linea di codice 09, invece, è utilizzata per caricare la libreria jQuery. Se si sta già usando questa libreria, allora dovete rimuovere questa riga di codice.

Infine salvate il Modello.

PER FINIRE:
Se invece volete che in una foto non compaia l' immagine del Pin It allora dovete assegnare una la classe "nopin" alla vostra immagine nella seguente maniera:


Per il codice clicca qui.

E ora godetevi il vostro bottoncino Pin It.


Qualche dubbio? proposte per un nuovo tutorial?
Contattaci con un commento o tramite una mail a mecreativeinside@gmail.com




HAI VISTO QUESTI?

0 commenti