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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurjGW7dMONpDi7AkUFfIZ0RtSwGG4DWKXMSbMpkGyEJEtngxzGZTTzTDEWa1a0Jm4YEfJA81_3cwo3lPa_K0sE802__W1Ujkt3_Vh6ceKRo4cxEyBUoHZ7L6CqiMubxQJRVBvDpzxWxta/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>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurjGW7dMONpDi7AkUFfIZ0RtSwGG4DWKXMSbMpkGyEJEtngxzGZTTzTDEWa1a0Jm4YEfJA81_3cwo3lPa_K0sE802__W1Ujkt3_Vh6ceKRo4cxEyBUoHZ7L6CqiMubxQJRVBvDpzxWxta/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 ^_^
per approfondire!
- Non sai come fare per registrarti su Pinterest? Guarda qui :)
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" />
.jpg)
Scusa la domanda da ignorante ma dove va tutto questo codice? Nel post dove inserisco l'immagine?
RispondiElimina@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.
RispondiEliminaIT'S SIMPLE!!! ^_^
Ciao Simona spero di tornare presto al mio blog!
Ok, ora ho capito! Gentilissima! ^_^
EliminaGrazie Francesca per avermelo ricordato...che sbadata -.-
EliminaIn 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.
RispondiEliminaBellissimo!
RispondiEliminaSei troppo la mia Guru! Grazie ancora!
Un bacio
Ho una domanda, forse molto scema, forse poco chiara, ma la pongo lo stesso XD
RispondiEliminaAl 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
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.
EliminaCiò 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 :)
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.
EliminaScriverei 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!
Ah ecco, ho capito... beh faccio una prova..
EliminaAllora 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.
Come temevo: peccato!
EliminaGrazie, grazie, grazie... Mò ci provo... Anche se non ho ancora risolto il problema di fb... Che disastro che sono!!!
RispondiEliminarisolto 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.
RispondiEliminae questo è il primo problema...in più come faccio ad usare una delle tue bellissime P? mi piace quella verde... ma come faccio ad inserirla?
non so come... ma alla fine ce l'ho fatta... grazie!
EliminaNiente da fare, non ci riesco. Avevo già provato anche con la procedura ufficiale dal sito di Pinterest, ma non ha mai funzionato.
RispondiEliminaPer 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!
Ciao Lucia! No, non sei tu l'impedita è che ho omesso una particina di codice...
EliminaRicopia ed incolla nuovamente il codice ora dovrebbe andare ;)
Ciaoo. Passo di qua per avvisarti che hai vinto un premio.
RispondiEliminaPassa a trovarmi appena ti è possibile.
Ti aspetto :-)
Grazie cara :D
EliminaGrazie :) ..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 :)
RispondiEliminaGrazie Snadra per esserti unita alle mie followers :D
EliminaVedrai come saranno divertenti i codici appena ci prenderai la mano ;)
"(...) 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) "
RispondiEliminal'ho fatto ma io il tag di chiusura non ce l'ho! O.o
una blogger disperata,
g.
trovato! dovevo selezionare dentro il codice, dopo avere espanso la riga.
Eliminasto diventando un mostro!
ci impiego un pomeriggio intero, ma ci arrivo.
baciuzzi, g.
Ok perfetto... scusa se non ho risposto prima, ma sono stata poco bene (e ancora ora mi sento una chiavica -.-)
Eliminacomunque conviene al limite cercare la parola che sta dentro le virgolette, perchè gli gira bene te lo trova, quando no...non c'è niente -.-
anche se ho fatto una prova adesso e a me lo trova...
EliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaGrazie 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
RispondiEliminaCiao Silvana, si hai ragione... ho dimenticato uno slash /... ora va ;)
EliminaCiao!
RispondiEliminaHo 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!
Idem, anche a me rimane il vecchio, e ho cercato ovunque ma non riesco a trovare il codice per eliminarlo.
Elimina@Chiara, perdonami se non ti ho risposto prima, ma non ho proprio visto il tuo commento nei feed :(
EliminaVedo 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!
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. :(
EliminaIo non lo vedo però... com'è possibile? :(
EliminaRiesco a vederlo solo con Chrome, paura sta cosa! :D
EliminaTi faccio ancora più paura...io uso Chrome O.o
Elimina