Pubblicato il 19/05/16 - aggiornato il  | 6 commenti :

Come mostrare il bottone di Pinterest al passaggio del mouse sulle foto in Blogger e Wordpress.

Come installare uno script su Blogger e Wordpress per mostrare il bottone di Pinterest al passaggio del cursore sulle immagini per condividerle su questo social network o su Twitter e su Facebook.
Riprendo un post che ho pubblicato più di tre anni fa su uno script che permette la visualizzazione della icona di Pinterest sulle immagini al passaggio del cursore. Personalmente non utilizzo questo javascript ma preferisco quello ufficiale di Pinterest visto che in questo blog non ci sono molte immagini degne di essere condivise su tale social network.

Nei siti Blogger o Wordpress che invece hanno nelle foto un contenuto essenziale può essere utile impostare una condivisone su Pinterest più incisiva. Con l'inserimento di questo script al passaggio del cursore su una immagine si visualizzerà una icona che potremo anche personalizzare e  posizionare in una data zona della foto. Il lettore che ci cliccherà sopra aprirà automaticamente una nuova scheda del browser con le opzioni di condivisione.

bottone-pinterest-blogger-wordpress

Come vedremo si potranno anche escludere singole foto, o un insieme di esse, da questa funzionalità. L'installazione è semplicissima. Gli utenti di Blogger dovranno andare su Modello > Modifica HTML, cercare con Ctrl+F  il tag </body> e incollare subito sopra il codice seguente

<!-- Bottone Pinterest Inizio -->
<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHBjL7Q8-mz8Aq0WUwCCAXmkuyIQwnevaGXWF32QDVS9L_CXFrLUHxApAmYlXofFsdOCdB0Fez_WTikAI6qgwrT_bOOPecMF5jFpl3491dOOmPIkkqw1QrbzBKgpRiXJWEfUKB9W84fU/s72/pinterest.png";
var bs_pinButtonPos = "center";
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>
<script id='bs_pinOnHover' src='https://googledrive.com/host/0B40RQ963OElISE9lY1E1YS1lU28/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>
<!-- Bottone Pinterest Fine -->

Si salva il modello. La parte di codice colorata di verde sono commenti inseriti dall'autore del javascript di cui il link a fondo pagina che non ho potuto togliere per questioni di correttezza ma che all'atto della installazione possono essere tralasciati.

Gli utenti di Wordpress dovranno invece andare su Bacheca > Aspetto > Editor e aprire il file footer.php denominato anche Piè di pagina in alcuni Temi. In tale file si dovrà cercare lo stesso tag </body> e incollare lo script subito sopra a quello quindi aggiornare il file.

Le righe evidenziate di giallo sono la Libreria jQuery e possono essere tralasciate se fosse già presente nel Tema o nel Modello. L'URL colorato di rosso rappresenta l'immagine della icona di Pinterest che verrà visualizzata sopra alle foto e naturalmente può essere sostituita da un'altra

In var bs_pinButtonPos è stata proposta la posizione center per mostrare il bottone di Pinterest al centro delle foto. Alternativamente tale attributo può essere sostituito da topleft, topright, bottomleft, bottomright con ovvio significato.

CONFIGURAZIONI ULTERIORI DEL BOTTONE DI PINTEREST


L'autore del javascript ha caricato il file nel web utilizzando Google Drive come Hosting che però cesserà tale servizio nel prossimo 31 Agosto 2016. In questo momento non è dato sapere se, e in che misura, Google continuerà con tale supporto quindi per evitare che lo script smetta di funzionare è opportuno incollare l'URL colorato di viola nel browser e andare su Invio per aprire la pagina relativa. Si clicca poi con il destro del mouse nella stessa pagina per poi andare su Salva con nome (Chrome). In questo modo verrà scaricato il file. Se avete un blog su Blogger di tipo gratuito vale a dire del tipo nomeblog.blogspot.com allora lo potrete caricare su Google Sites e sostituirne l'URL diretto nel codice. Se invece avete un dominio personalizzato di Blogger o un sito Wordpress allora tale file dovrà essere caricato su uno spazio personale per poi sostituirne l'URL diretto.

COME ESCLUDERE UNA O PIÙ IMMAGINI


Se non volete che il bottone di Pinterest si mostri su una data foto per non facilitarne la condivisione dovete andare in Modalità HTML e inserire l'attributo class='nopin' nel tag <img> in questo modo

<img class='nopin' src="URL_IMMAGINE...

Se le immagini da escludere fossero più di una, magari tutte quelle presenti in un post, basterà andare in Modalità HTML e aggiungere un <div> all'inizio e alla fine del contenuto da non pinnare

<div class='nopin'>
Contenuto con i tag img da non pinnare
</div>

 

COME AGGIUNGERE UN PREFISSO O UN SUFFISSO ALLA CONDIVISIONE


Nel codice proposto l'interno delle virgolette in var bs_pinPrefix = ""; e var bs_pinSuffix = ""; è vuoto ma può essere riempito per esempio in questo modo

var bs_pinSuffix = "by IpCeI";   o  var bs_pinPrefix = "by Ernesto Tirinnanzi";

per aggiungere automaticamente tale contenuto all'inizio o alla fine della condivisione

IL FUNZIONAMENTO DEL BOTTONE DI PINTEREST


Tutti coloro che sono loggati a Pinterest che cliccano sul bottone apriranno una scheda come questa

pinnare-foto-pinterest

in cui scegliere la Bacheca in cui aggiungere la foto che potrà anche essere condivisa su Facebook e su Twitter. Si vedrà anche in automatico il titolo del post da cui è stata condivisa. Chi non è loggato su Pinterest visualizzerà invece una finestra popup con l'invito ad accedere o registrarsi

registrarsi-pinterest

Concludo ricordando che su Pinterest possono essere create anche Bacheche Segrete.
Fonte | Blogger Sentral


6 commenti :

  1. 1. Un Blog deve essere friendly per il telefono.
    2. Un blog si deve caricare veloce.
    3. Non scrivere un post con meno di 800 parole, se no, Google non lo considera un post di qualità.
    4. Una parola chiave non deve superare la densità del 2% ( allora su un post con 300 parole posso nominare la parola ''smartphone 6 volte'' però ancora non ho capito il concetto delle parole chiavi: meglio posizionarsi nei motori di ricerca con: ''come giocare al calcio'' che con la parola ''calcio''.
    5.BackLinks: da quello che ho capito io, i backlinks sono dei link su altri siti che fanno riferimento al mio sito e che sono la parte fondamentale per il posizionamento nei motori di ricerca. Allore se io commento su un sito con 1 milione di visitatori e nel commento post l'url cliccabile e qualcuno clicck sul mio link e allora ho guadagnato un backlink? Anche facebook viene considerato un sito valido per i backlinks?
    6. Se seguò le giuste pratiche dello seo allora in quanto tempo posso arrivare a 1000 visitatori al giorno? C'è uno che dice che ha impiegato 1 anno.
    7. Solo per curiosità ( e solo se lei vuole che questa informazione venga divulgata) quanti visitatori giornalieri ha
    8. C'è altro da sapere per chi vuole aprire un blog?

    Aspetto la sua risposta :)

    RispondiElimina
    Risposte
    1. La 3) è solo una indicazione ma non una regola. Anche la 4) è una deduzione da quello che dice Matt Cutts, ingegnere di Google, nei suoi video su Webmaster Tool. Si possono intervallare post lunghi con altri più brevi e le parole chiave è bene inserirle ma con parsimonia e adoperare i sinonimi per aumentare le chance. La percentuale che ho dato è una mia considerazione ma non un precetto assoluto. In genere non si può scegliere la frase esatta con cui posizionarsi. Si possono creare dei collegamenti anche interni a un dato post con una data parola chiave o frase ma in genere in quanto a parole chiave è megglio prendere quello che viene.
      Credo invece che tu non abbia capito bene il significato di backlink o link a ritroso. Per esempio se tu scrivi un post sul tuo blog e metti un collegamento a questo articolo si tratta di un backlink. I collegamenti inseriti nei commenti sono tutti nofollow e quindi non influenzano l'autorità di un sito. Cobtano molto anche le condivisioni du Facebook, Twitter, ecc. Non sono dei backlink in senso calssico ma aumentano l'autorevolezza di un sito.
      Non c'è una regola per creare un blog con molti visitatori. Bisogna scrivere articoli che interessano chi fa ricerche su internet. Questo sito non ha numero particolarmente alto di visitatori. Secondo te sono più quelli che su Google cercano il widget degli Articoli Simili o quelli che cercano la ricetta delle lasagne alla bolognese?
      Sono otto anni che in modo più o meno saltuario pubblico nel web e non si finisce mai di imparare perché la tecnologia si evolve e così anche la rete. Fino a 3 anni fa nessuno si occupava delle visite da dispositivi mobili.
      Come consiglio ti posso dire che se pensi di creare un blog come fonte di guadagno allora è bene che lasci perdere. Alla base ci deve essere il divertimento e la passione. Solo in questo modo si riuscirà a creare un sito di un certo successo. Poi le soddisfazioni economiche verranno di conseguenza.
      @#

      Elimina
  2. questo è un backlink :) ? -> http://www.ideepercomputeredinternet.com/2016/05/pinterest-blogger-wordpress-bottone-javascript.html è perche questo backlinks devono essere linkati da altri siti? Penso che ha un articolo sui backlinks, vero?

    RispondiElimina
    Risposte
    1. La cosa è molto più semplice di quello che sembra. Esiste solo il concetto di link o collegamento in italiano per aprire un'altra pagina web con il click del cursore. La differenza tra i vari link e solo di prospettiva. I collegamenti creati da un amministratore si dividono in link interni e esterni. I primi aprono pagine dello stesso sito mentre gli altri pagine di altri siti.
      I link esterni diventano dei backlink se visti dal punto di vista del sito che viene linkato. In altri termini se pubblico un articolo su un personaggio pubblico e linko la pagina corrispondente di Wikipedia quello per me è un link esterno mentre per Wikipedia è un backlink.
      Se per esempio qualcuno trovasse interessante questo articolo e volesse pubblicare un post su Pinterest potrebbe linkarlo per dare ai suoi lettori la possibilità di installare questo bottone. Questo porta una maggiore autorevolezza della singola pagina e quindi anche di tutto il sito. Questi link vengono definiti naturali visto che è un webmaster esterno che linkando una pagina del tuo sito ti dà in sostanza un voto positivo sul tuo lavoro.
      Quando si condivide un post su Facebook si crea su Facebook un link verso la pagina condivisa. Facebook come gli altri social network non creano il link di loro volontà. Quindi queste condivisione non hanno la stessa importanza dei backlink classici ma sono comunque utili. Lo sono in teoria anche i commenti su altri siti che linkano il nostro sito. Tali link però sono nofollow e incidono poco inoltre si tratta di collegamenti verso la homepage. I backlink più importanti sono quelli verso i singoli post che valorizzano il contenuto presente. Non mi ricordo di aver scritto nulla sui backlink ma puoi leggerti questo post utile per capire cosa sia il link building
      http://www.ideepercomputeredinternet.com/2016/04/blogger-link-interni.html
      @#

      Elimina
  3. Ciao, ti vorrei ringraziare, ho trovato il tuo articolo molto interessante, proprio in cerca di un bottone Pin per le mie foto sul mio blog. Ho provato ad aggiungere il codice nel footer.php del mio tema, ma sembra non funzionare :S Non vorrei aggiungere altri Plugin, e quindi mi piacerebbe essere capace a farlo funzionare correttamente, sarebbe molto utile. Hai qualche suggerimento da darmi?
    Grazie ancora per l'utilissimo post :))
    Buona giornata Paola

    RispondiElimina
    Risposte
    1. Segui questo post
      http://www.ideepercomputeredinternet.com/2014/05/pinterest-button-hover-blogger-template.html
      e il codice incollalo sopra alla riga < /body > che dovresti trovare su footer.php
      @#

      Elimina

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