7.2.14

Inserire il pulsante 'Pin It' sulle immagini + pin buttons

7.2.14 34 Commenti
tutorial inserire pin button blogger - Simona S.

I social networks si sa, sono molto importanti per allargare la cerchia dei nostri utenti, per far conoscere il nostro blog.

Un buon metodo è diffondere le immagini dei nostri post e uno dei social network più famosi che utilizza questo meccanismo è senza ombra di dubbio Pinterest.
Lì si trovano idee di ogni tipo, un singolo materiale è oggetto di innumerevoli DIY, come il sughero.

Se ancora non lo conosci e vuoi registrarti per far parte di questa bellissima e 'pulita' community, ma non sai come fare... qual'è il problema? Ne ho fatto un tutorial qui :)




Ma torniamo all'argomento principale: per condividere l'immagine del post in modo semplice e rapido basta aggiungere un codice altrettanto semplice.
Inserite il codice sottostante subito prima il tag di chiusura </body> che trovate nella modifica dell'HTML (per cercarlo velocemente premete i tasti CTRL+F e digitate il tag di chiusura)
<script type="text/javascript">
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>

<script>

//<![CDATA[

var bs_pinButtonURL = "http://3.bp.blogspot.com/-iVerOA7_3Es/Uuk7TnzFAYI/AAAAAAAALO8/v_wJlOULUL4/s1600/pinit.png";

var bs_pinButtonPos = "topright";

var bs_pinPrefix = "";

var bs_pinSuffix = "";

//]]>

</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" />

<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>

// This Pinterest Hover Button is brought to you by bloggersentral.com.

// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.

// Feel free to use and share, but please keep this notice intact.
</script>
Il codice non è mio, ma lo sviluppatore è citato nel codice stesso.
Le parti colorati sono quelle che potete modificare.
La prima è l'immagine vera e propria, quella cioè che compare quando il mouse passa sulla vostra foto.
La seconda è la sua posizione, in questo caso 'topright' indica 'in alto a destra'.
Se vuoi cambiare la posizione ti basta sostituire 'topright' con uno di questi comandi: center, topleft, bottomleft, bottomright.

E se l'immagine non l'avete e non sapete come crearla?
Non c'è problema, ne ho preparate ben 18 e potete scaricarle gratuitamente (of course) cliccando qui sotto ^_^
Qui un'anteprima
free pin button blogger - Simona S.

per approfondire!


  • Non sai come fare per registrarti su Pinterest? Guarda qui :)
Come emerso dal commento di Silvia (quanto mi piace intavolare 'confronti' del genere), Pinterest dà l'opportunità di inserire un codice, un meta tag, che permette di bloccare 'il pinnaggio'.

Mi sono documentata e a quanto pare questo attributo deve essere inserito nei meta tag del sito/blog, quindi all'inizio del codice... in questo modo vieti di 'pinnare' tutte le tue foto.

Ciò nasce dal fatto che con la legge sulla proprietà intellettuale possono venire fuori un sacco di magagne legislative... Pinterest ti presenta il suo posto come un luogo dove condividere immagini, ti dà gli strumenti, come il pulsante da inserire nella barra del browser, per pinnare a destra e a manca, però ti dice pure che se vìoli il copyright sono cavoli tuoi.

Ecco perchè lo ha fatto, per pararsi meglio il fondo schiena, perchè lo sanno infondo, infondo che i 'mandanti' di questo reato sono loro ;)

Quindi se anche voi volete proteggere le vostre foto dai collezionisti di Pinterest, ecco a voi il codice da inserire nel vostro html, subito dopo il tag di apertura <html>
<meta name="pinterest" content="nopin" />

34 commenti:

  1. Scusa la domanda da ignorante ma dove va tutto questo codice? Nel post dove inserisco l'immagine?

    RispondiElimina
  2. @Koko: tutto questo codice va nella modifica dell' HTML devi cercare la parola: body subito sopra inserisci il codice, modificando solamente le parti in rosso con l'indirizzo dell'immagine e la posizione all'interno della foto: center, topleft, bottomleft, bottomright.
    IT'S SIMPLE!!! ^_^
    Ciao Simona spero di tornare presto al mio blog!

    RispondiElimina
    Risposte
    1. Ok, ora ho capito! Gentilissima! ^_^

      Elimina
    2. Grazie Francesca per avermelo ricordato...che sbadata -.-

      Elimina
  3. In effetti Pinterest è una miniera di idee: io mi ci perdo! Ho già messo da qualche tempo il pulsante Pin It sulle foto del mio blog, ma è quello «ufficiale», molto meno bello di questi colorati che ci hai mostrato tu. Grazie per la dritta! Ciao.

    RispondiElimina
  4. Bellissimo!
    Sei troppo la mia Guru! Grazie ancora!
    Un bacio

    RispondiElimina
  5. Ho una domanda, forse molto scema, forse poco chiara, ma la pongo lo stesso XD
    Al momento sul mio blog ho messo lo script per il bottone Pin "ufficiale", installato seguendo la procedura suggerita da Pinterest. La cosa che mi piace è che questo script permette di poter dare un attributo "nopin=nopin" alle immagini che per qualche motivo non si desidera vengano pinnate. Mi domandavo se questa opzione fosse disponibile anche con questo metodo, ma temo di no (certo che anch'io, potrei provare).
    C'è da dire che i tuoi bottoni sono mooooooolto più belli! :D

    RispondiElimina
    Risposte
    1. Mi sono documentata e a quanto pare questo attributo deve essere inserito nei 'metatag' del sito/blog, quindi all'inizio del codice... in questo modo vieti di 'pinnare' tutte le tue foto.
      Ciò nasce dal fatto che con la legge sulla proprietà intellettuale possono venire fuori un sacco di magagne legislative... Pinterest ti presenta il suo posto come un luogo dove condividere immagini, ti dà gli strumenti, come il pulsante da inserire nella barra del browser, per pinnare a destra e a manca, però ti dice pure se violi il copyright sono cavoli tuoi.
      Ecco perchè lo ha fatto per pararsi meglio il fondo schiena, perchè lo sanno infondo, infondo che i 'mandanti' di questo reato sono loro ;)
      Magari inserirò anche questo nel post, così che possa essere utile a qualcuno che anziché pinnare, non vuol farsi pinnare :)

      Elimina
    2. A dire il vero mi ero dimenticata della possibilità che offre lo script che hai citato di bloccare a priori qualsiasi pin dal sito/blog, che per qualche artista può essere molto interessante. Io mi riferivo principalmente alla possibilità offerta dallo script ufficiale di Pinterest di aggiungere un attributo alle singole immagini, per evitare che vengano pinnate proprio quelle (mentre le altre restano liberamente pinnabili). L'attributo è: nopin="nopin", da applicare al singolo tag IMG all'interno del post sul blog.
      Scriverei un esempio di codice ma nei commenti non si può: non so se mi sono spiegata bene :S
      Io di solito metto il nopin alle immagini prese da internet, per evitare che vengano pinnate rimandando al mio blog quando in realtà non sono io la fonte originale.
      Sarebbe interessante poter bloccare le singole immagini anche utilizzando questi script con le icone personalizzate!

      Elimina
    3. Ah ecco, ho capito... beh faccio una prova..
      Allora ho fatto una prova e questo è il risultato:
      se si inserisce l'attributo nopin="nopin" alla singola immagine si evita di pinnarla con il tasto ufficiale (tipo quello che si installa nella barra del browser)...
      mentre non funziona come attributo nel codice espresso sopra nel tutorial....
      Quindi, no, non funziona con l'immagine personalizzata.

      Elimina
  6. Grazie, grazie, grazie... Mò ci provo... Anche se non ho ancora risolto il problema di fb... Che disastro che sono!!!

    RispondiElimina
  7. risolto il problema di fb... non sai quanto ci abbia messo, però! paura... adesso provo con questo... ma per la modifica dell'html intendi che dobbiamo partire dal modello? ... ho provato, ma non trovo la scritta: body tra le virgolette... anche con contr+F.
    e questo è il primo problema...in più come faccio ad usare una delle tue bellissime P? mi piace quella verde... ma come faccio ad inserirla?

    RispondiElimina
    Risposte
    1. non so come... ma alla fine ce l'ho fatta... grazie!

      Elimina
  8. Niente da fare, non ci riesco. Avevo già provato anche con la procedura ufficiale dal sito di Pinterest, ma non ha mai funzionato.
    Per prima cosa la funzione di ricerca non funziona. Mi dice che non trova corrispondenze, ma io ho cercato e l'ho trovato manualmente.
    Poi provo a incollare il codice che hai suggerito, ma mi da un errore.
    Devo essere totalmente impedita!

    RispondiElimina
    Risposte
    1. Ciao Lucia! No, non sei tu l'impedita è che ho omesso una particina di codice...
      Ricopia ed incolla nuovamente il codice ora dovrebbe andare ;)

      Elimina
  9. Ciaoo. Passo di qua per avvisarti che hai vinto un premio.
    Passa a trovarmi appena ti è possibile.
    Ti aspetto :-)

    RispondiElimina
  10. Grazie :) ..ora è tardi, ma averti trovata è già una manna dal cielo, non posso anche capire tutto subito :D domani , a mente fresca leggo tuttotuttotutto !! Hai un sacco di tutorial interessanti e spiegati benissimo, non vedo l'ora di mettermi alla prova :)

    RispondiElimina
    Risposte
    1. Grazie Snadra per esserti unita alle mie followers :D
      Vedrai come saranno divertenti i codici appena ci prenderai la mano ;)

      Elimina
  11. "(...) Inserite il codice sottostante subito prima il tag di chiusura che trovate nella modifica dell'HTML (per cercarlo velocemente premete i tasti CTRL+F e digitate il tag di chiusura) "
    l'ho fatto ma io il tag di chiusura non ce l'ho! O.o

    una blogger disperata,
    g.

    RispondiElimina
    Risposte
    1. trovato! dovevo selezionare dentro il codice, dopo avere espanso la riga.
      sto diventando un mostro!
      ci impiego un pomeriggio intero, ma ci arrivo.
      baciuzzi, g.

      Elimina
    2. Ok perfetto... scusa se non ho risposto prima, ma sono stata poco bene (e ancora ora mi sento una chiavica -.-)
      comunque conviene al limite cercare la parola che sta dentro le virgolette, perchè gli gira bene te lo trova, quando no...non c'è niente -.-

      Elimina
    3. anche se ho fatto una prova adesso e a me lo trova...

      Elimina
  12. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  13. Grazie delle spiegazioni Simona ma al momento del salvataggio mi dà un errore, volevo inserire qua la notifica che mi dà ma non me lo permette! uffa

    RispondiElimina
    Risposte
    1. Ciao Silvana, si hai ragione... ho dimenticato uno slash /... ora va ;)

      Elimina
  14. Ciao!
    Ho seguito il tuo tutorial e tutto ok, ora però ho una domandina. Sul blog c'era già installato il pulsante ufficilale Pinterest, quello piccolino rettangolare "pin it", come faccio a toglierlo per lasciare solo il mio personalizzato?

    Grazie mille!

    RispondiElimina
    Risposte
    1. Idem, anche a me rimane il vecchio, e ho cercato ovunque ma non riesco a trovare il codice per eliminarlo.

      Elimina
    2. @Chiara, perdonami se non ti ho risposto prima, ma non ho proprio visto il tuo commento nei feed :(
      Vedo che comunque sei riuscita ad eliminare iltasto originale...

      @Veronica, lì dove hai aggiunto il codice trovato qui, c'è uno script un paio di righe più in basso con l'id bs_pinOnHover...devi eliminare quello!

      Elimina
    3. Stavolta non ci riesco nemmeno con il tuo aiuto. Ho eliminato tutto ma nulla, visualizza ancora il classico pin it, e ti dirò di più, con firefox e safari non visualizza nulla. :(

      Elimina
    4. Io non lo vedo però... com'è possibile? :(

      Elimina
    5. Riesco a vederlo solo con Chrome, paura sta cosa! :D

      Elimina
    6. Ti faccio ancora più paura...io uso Chrome O.o

      Elimina

buzzoole code
Copyright © La Creative Room.