13 marzo 2012

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
pinterest-widgetche 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 
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 -



16 commenti:

  1. Ciao seguo da mesi il tuo blog e mi è estremamente utile. Ti faccio i miei complimenti per l'accuratezza e la semplicità con la quale ci fai capire le cose!
    Io ora ho un problema, ho modificato una parte del linguaggio html del mio blog, che concerne il titolo generale del blog e i titoli di ogni post, ed ora mi esce una scritta (sopra la barra di blogger) che dice mi piace non mi piace più.
    Cosa può esser successo???? Help me!!!

    Il blog è
    www.cheapandglamour.com

    RispondiElimina
    Risposte
    1. Ho risolto da sola leggendo un altro tuo post che non parlava di questo problema però mi ha fatto accendere la lampadina!!! Grazie ancora!!!

      Elimina
  2. @GiusyManzella
    Vai su Modello > Modifica HTML > Procedi.
    Hai erroneamente inserito questa riga di codice

    Non mi piace più · · Non seguire p

    che si trova all'inizio del template sotto

    <title>Cheap &amp; Glamour</title>

    RispondiElimina
  3. Grazie Ernesto,
    i tuoi suggerimenti sono utili, carini e precisi.

    RispondiElimina
  4. c è un errore, non va modificato limit: 6, ma limit: 8, che si trova tra i due parsifal in rosso ;)

    RispondiElimina
    Risposte
    1. Sì infatti prima avevo messo 6 che poi ho modificato con 8 :)

      Elimina
  5. ho notato anche che questo widget si adatta meglio a wordpress perchè non presenta quelle righettine tra una foto e l altra, vedi il mio blog ivabellini e l altro mio blog ilcaos.it
    sarebbe possibile eliminare queste righette?

    RispondiElimina
    Risposte
    1. @ivabellini
      Onestamente non so da cosa dipendono. Nel widget di prova funziona tutto OK (a parte IE naturalmente)

      Elimina
  6. Ciao... ti ringrazio per questo articolo. Molto utile.
    Ho testato questo codice su un CMS (no Wordpress) ma non riesco a variare il numero di immagini. Ho modificato il numero come consigliato però ne visualizzo sempre 8.

    RispondiElimina
    Risposte
    1. @MyROMA
      Alla fine del codice che si trova qui
      https://docs.google.com/document/pub?id=1baRSnBKIehTZ6y8_ckXqLIHk9r5T0el4o0G6U3rCyZU
      c'è un altro blocco con
      $(document).ready(function () {
      $('#pinterest').rssfeed('http://www.pinterest.com/parsifal32/feed.rss', {
      limit: 8,
      snippet: false,
      header: false,
      date: false

      Prova a modificare limit: 8, con un altro numero a tua scelta. Nel post mi ero dimenticato di dire delle due occorrenze.

      Elimina
    2. Grazie infinite Ernesto. Avevo visto l'8 ma avevo un conflitto con un altro blocco Pinterest e il numero item lo prendeva dall'altro... cmq risolto, grazie infinite.

      Avrei però un'altra richiesta. Di tipo grafica e funzionale.
      Vorrei aggiungere un bordino alle immagini ed avere un link blank.
      Sai aiutarmi in questo? Grazie mille

      Elimina
    3. @MyRoma...
      In teoria potrebbe anche essere possibile ma ci vorrebbe un lavoro non indifferente e purtroppo a me quello che manca è il tempo :)

      Elimina
    4. ok... e per togliere il testo ed avere solo immagini. Si può?
      grazie

      Elimina
    5. @MyRoma
      In realtà ci sono solo immagini. Forse ti riferisci al bottone che sta in alto sopra al widget. Se è così devi eliminare questo 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/>

      e lasciare solo la riga finale

      <div id="pinterest"></div>

      Elimina
    6. No Ernesto.
      Il feed importa l'immagine della board. Se l'immagine ha una descrizione, riporta anche quella e quando vai sopra con il mouse ti si apre la foto ma il testo si confonde con il sito.
      L'unica è togliere l'effetto mouse hover.

      Elimina
    7. @MyRoma
      Prova a rivolgerti alla ragazza che ha creato l'effetto. C'è il link alla fine del post. Potrebbe essere anche un argomento già toccato nei commenti.

      Elimina

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