Widget delle Immagini degli Ultimi Pin su Pinterest per Blogger.

Pinterest è senza dubbio il fenomeno del momento e il suo utilizzo da parte degli utenti ha tassi di crescita esplosivi nonostante il servizio sia ancora in Beta su inviti. Dopo aver presentato il bottone con contatore per Pinterest, sono ora in grado di proporre il primo widget creato appositamente per questo social network che permette di visualizzare le ultime immagini "pinnate" dall'utente.

Ricordo che il funzionamento di Pinterest si basa su un bookmarklet o un pulsante che permette di acquisire nel proprio account una o più immagini presenti in una pagina web. Tali foto possono essere inserite in cartelle (Board) insieme a un commento e possono con un solo click anche essere condivise su Twitter e Facebook semplicemente lasciando la flag a questa impostazione.

Pinterest ha rilasciato le API per ottenere i feed delle immagini pinnate da un determinato utente. Attraverso questa funzione è stato possibile creare un widget che mostra appunto queste ultime immagini. Nel widget è stato inserita la libreria JQuery e l'effetto hover

che consente di visualizzare a grandezza naturale una foto quando viene puntata con il cursore. Ho postato una  Demo del Widget degli Ultimi Pin su Pinterest. Il codice va semplicemente incollato su Layout > Aggiungi un gadget > HTML/Javascript > Sezioni del sito 

• Codice del widget degli Ultimi Pin di Pinterest -

La prima riga colorata di blu non è altro che la libreria JQuery e può essere tralasciata se nel modello abbiamo un altro widget che già la utilizza. Le altre personalizzazioni riguardano per esempio la dimensione delle miniature che di default è di 100 pixel in altezza e larghezza

width: 100px;
height: 100px;

e che può essere modificata a seconda dello spazio in cui si inserisce il widget. La riga dei feed

http://www.pinterest.com/parsifal32/feed.rss

deve essere cambiata inserendo il vostro nome utente al posto del mio. Se volete un widget che mostri solo le immagini postate in un determinato board allora il feed dovrà essere modificato in questo modo

http://www.pinterest.com/USERNAME/NOME-BOARD/rss

E' inoltre possibile configurare il numero di immagini da visualizzare nel widget modificando il parametro limit: 8 per mostrare un numero di foto diverso da otto. Si può aggiungere anche il bottone per farsi seguire su Pinterest, personalizzarlo oppure eliminarlo. In questo caso va cancellato questo blocco di codice

<!-- Optional logo and gadget title. To use, uncomment it and add in your own Pinterest url, then place your own image link in the quotation marks after img src. -->
<div align="center">
<a href="http://pinterest.com/parsifal32/"><img src="http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" width="156" height="26" alt="Seguimi su Pinterest" /></a></div><br/>

Nel caso lo lasciate dovete ovviamente cambiare l'username. Si possono anche modificare l'immagine del pulsante che è quella di default di Pinterest e le sue dimensioni. Ho anche aggiunto un salto di riga <br/> perché altrimenti il risultava essere troppo vicino al widget.
EFFETTO HOVER

L'Effetto Hover è dato da quest'altro blocco di codice

.rssBody li:hover {
font-size: 1px;
overflow: visible;
z-index: 1000;
-ms-transform: translate(-10px,-5px);
-webkit-transform: translate(-10px,-5px);
-o-transform: translate(-10px,-5px);
-moz-transform: translate(-10px,-5px);
transform: translate(-10px, -5px);
}

che provoca una traslazione di 10 pixel sulla sinistra e di 5 pixel verso il basso quando si passa con il mouse sopra a una immagine che viene anche mostrata a grandezza naturale. Se si modificano questi numeri, occorre modificarli tutti perché si riferiscono alla visualizzazione nei differenti browser. Se tale effetto non ci piace possiamo semplicemente cancellare tutto il blocco.

Quando un visitatore cliccherà su una delle immagini mostrate nel widget la visualizzerà nel vostro account e la potrà pinnare nuovamente o commentare.

Fonte | Code It Pretty -