WordPress Social Snippet

Pubblicato il 12 dicembre 2013
Autore:
L'articolo tratta di Social, Wordpress.

In un mio precedente articolo, WordPress alla velocità della luce, ho spiegato come sia possibile aumentare la velocità di esecuzione di un sito realizzato con tale piattaforma.

Siamo arrivati alla conclusione che, spesso, un plugin, per quanto utile possa essere, può contribuire non poco ad un decadimento delle sue prestazioni poiché:

  • può aumentare, anche considerevolmente, il numero di query che il sistema è costretto ad effettuare;
  • in genere possiede un’affidabilità, quanto a codice e ottimizzazione, non paragonabile a quella del sistema originario.
  • può portare ad una diminuzione del rapporto tra contenuti e html, che rappresenta un fattore determinante per il posizionamento dei siti web;
  • necessita, spesso, di aggiornamenti.

Uno snippet per la condivisione Social in WordPress definitivoQueste considerazioni sono ancora più valide quando si tratti di pulsanti social, che appesantiscono il caricamento delle pagine web per loro stessa natura.
Pertanto raccogliere i vari snippet social che sono disponibili in rete e creare una funzione che permetta di far comparire tutti i pulsanti che, di volta in volta, possono servirmi, mi è sembrata la soluzione più efficace ed efficiente al fine di dotare le mie pagine del supporto sociale.

Prima di procedere ho comunque testato una decina di plugin non individuandone alcuno che mi soddisfasse appieno: taluni sono risultati privi di funzionalità essenziali, altri troppo complessi da configurare e molto “pesanti” per il sistema.

Il risultato finale, conseguenza dell’applicazione dello snippet, è rappresentato dall’immagine che segue:

Un esempio di WordPress Social Snippet

Come si può notare ai vari pulsanti Twitter, Facebook, ecc., ne ho aggiunto altri tre che, se selezionati, consentono di:

  • inviare l’url dell’articolo per e-mail;
  • di scaricare il medesimo in formato pdf ;
  • di visualizzare il feed.

La funzione si compone di sei parti:

  1. per ogni social si definisce una variabile;
  2. viene aggiunto il codice per le thumbnail di Pinterest;
  3. tramite la funzione wp_enqueue_script di WordPress si dichiarano i file javascript che richiesti per interagire con alcune delle infrastrutture social;
  4. viene creato il codice php che permette di visualizzare i singoli pulsanti, ciascuno dispone di una classe specifica che permette di variare la sua riproduzione nella pagina;
  5. viene creato il codice css che permette di stilizzare i box contenitori di ogni singolo pulsante;
  6. viene definito il codice necessario ad attivare i pulsanti da inserire nel tema di WordPress.

Consideriamo ogni singolo elemento.

1. Variabili Social

Ad ogni pulsante social viene assegnata una specifica variabile e la sua attivazione dipende da una corrispondenza binaria: 1 per attivo, 0 per disattivo.

2. Pinterest

Determinazione delle thumbnail per la condivisione in Pinterest

Come è noto si condividono in Pinterest solamente immagini, pertanto è necessario determinare come  queste ultime possano essere individuate. Il codice php e, più in generale, lo script, ordina al sistema di pubblicare su una pagina di servizio la thumbnail di ogni immagine (l’immagine medesima a dimensioni ridotte che WordPress crea in maniera autonoma ad ogni upload di elementi media).

3. Enqueque script

Accodamento dei javascript di Google Plus e Pinterest

Tramite la funzione “wp_enqueue_script” accodiamo (enqueque) il caricamento dei due javascript, rispettivamente Google Plus e Pinterest al codice html, giusto prima della chiusura del body.

Invocare il caricamento degli script in quella posizione di pagina permette di ottenere un incremento di velocità della stessa: come è ovvio prima vengono processati i contenuti e, in seguito, proprio per la loro posizione nel codice, gli script.

Nota: ho provato ad effettuare la medesima operazione anche con il Javascript di Linkedin, ma non compariva più il pulsante, per cui sono stato costretto a mantenerlo nella dichiarazione php/html.

4. Codice php per la visualizzazione di ciascun pulsante

Per comodità pubblico solo due frammenti di codice, potete comunque analizzare al termine dell’articolo l’intero snippet.

 

Come si può notare ogni elemento consta di una dichiarazione if, in sostanza si ordina al sistema di pubblicare il dato pulsante solo se è attivato tramite la funzione nel template, altrimenti verrà ignorata quella porzione di codice. Ogni pulsante è racchiuso da un div che dispone di una classe css specifica che vi permetterà di “aggiustare”, se del caso, la sua riproduzione nella pagina. Come si può notare un’ulteriore costruzione if dice al sistema che se sono attivi i pulsanti mail, pdf e feed allora è necessario inserire un div con “clear:both;” per porre a capo questi ultimi (altrimenti tutti i pulsanti si disporrebbero su di una sola riga).

5. Codice CSS per la visualizzazione di ciascun pulsante

Proseguiamo con i due pulsanti del punto precedente:

 

In sostanza ogni elemento flotta a sinistra (si dispone affiancato) e per alcuni è stato necessario attribuire una larghezza e dei margini destro e/o sinistro. Nulla vieta di modificare il codice css per renderlo adattabile al vostro layout, nella fattispecie la disposizione nel mio sito è orizzontale su due righe. Di conseguenza, di seguito all’ultimo elemento della prima riga è necessario inserire un “clear: both;”.

6. Attivazione della funzione

  1. <?php ranked_social(1,0,1,1,1,1,1,0); ?>
<?php ranked_social(1,0,1,1,1,1,1,0); ?>

Il codice per attivare la funzione. Come si è detto ciascun “1” attiva i vari pulsanti social nella pagina, lo “0”, viceversa, li disattiva.
Riprendiamo in esame il codice di cui al punto 1: la dichiarazione della funzione che propongo disattiva pertanto i pulsanti Facebook e Feed.

In allegato potete trovare la funzione completa che deve essere inserita nel file functions.php del vostro template e va richiamata dove ritenete opportuno, molto probabilmente nella pagina single.php. Ho incluso al file compresso anche le tre immagini da me create che rappresentano i pulsanti e-mail, pdf e rss, potete sostituirle con altre di vostro gradimento. Non è presente il file css, lascio a voi, per esercizio, la sua creazione (del resto una buona parte di esso è pubblicato nel punto 5).

Download del file in formato zip WordPress Social Snippet (7Kbyte).
Potete utilizzare liberamente codice e immagini, è gradito un link a questo stesso articolo qualora riteniate utile lo stesso. 

F.A.Q.

  1. Si possono aggiungere altri pulsanti social? Certo, è sufficiente dichiarare una nuova variabile e creare il codice php necessario a visualizzare il pulsante, si tratta di un’operazione di copia e incolla che può effettuare anche chi non conosce il php.
  2. Si possono inserire i pulsanti in verticale? Certo, basta non utilizzare il comando “float: left;” nel vostro css.
  3. Dove va richiamata la funzione? Certamente in single php, ma, più in generale, dovunque vi sia un loop, category.php, index.php, ecc..
  4. Si possono sostituire le icone dei social con altre? No, quelle specifiche dei social non possono essere variate, mentre quelle relative ai tre pulsanti di servizio, email, pdf e rss certamente sì.
  5. È possibile variare l’ordine dei pulsanti? Assolutamente sì, l’ordine della funzione di cui al punto 1 rappresenta l’ordine di visualizzazione.
  6. Si può aumentare la velocità di caricamento dei pulsanti? Ritengo di sì, magari utilizzando Javascript asincroni, se disponibili. Ho anche immaginato di poter creare un sistema di caching che mostri degli snapshot dei pulsanti, sotto forma di immagine e carichi gli stessi solo quando il mouse vi si pone sopra. Potrebbe essere l’oggetto di un prossimo articolo o, perché no, di un plugin (non contraddico quanto affermato nell’introduzione in quanto un plugin      realizzato dal sottoscritto e dai suoi amici e collaboratori è realizzato a regola d’arte!).
  7. Si può eliminare wp_enqueque? Certamente, potete inserire i due javascript direttamente nel codice di cui al punto 4.
  8. Si può centrare o comunque posizionare la barra social in un punto specifico della pagina? Certamente, è sufficiente agire nel codice css del div che la contiene, denominato ‘social’.

Un ringraziamento a Marco Bullo per il supporto…

3 commenti all'articolo “WordPress Social Snippet”

  1. 13 dicembre 2013 alle 01:19

    Ciao Enrico, io ho provato lo snippet, ma non mi compaiono i pulsanti di Facebook, Twitter e Linkedin, gli altri sì, dove sbaglio?

    • 13 dicembre 2013 alle 01:22

      Ciao Roby, domani provo la versione allegata qui dentro per essere certo che funzioni, ma se non se più specifico è veramente difficile per me aiutarti… :)

  2. 13 dicembre 2013 alle 23:47

    Ho ricontrollato tutto e ho installato in questo stesso blog lo script allegato e funziona perfettamente…

Scrivi il tuo commento

Questo sito utilizza cookies tecnici e analytics e consente l'invio di cookies di terze parti. Proseguendo con la navigazione accetti l'utilizzo dei cookies Maggiori informazioni

Cookie Policy


Informativa estesa sull’utilizzo dei cookie

Uso dei cookie
arceriamarin.it o il “Sito” utilizza i Cookie per rendere i propri servizi semplici e efficienti per l’utenza che visiona le pagine di arceriamarin.it.
Gli utenti che visionano il Sito, vedranno inserite delle quantità minime di informazioni nei dispositivi in uso, che siano computer e periferiche mobili, in piccoli file di testo denominati “cookie” salvati nelle directory utilizzate dal browser web dell’Utente.
Vi sono vari tipi di cookie, alcuni per rendere più efficace l’uso del Sito, altri per abilitare determinate funzionalità.
Analizzandoli in maniera particolareggiata i nostri cookie permettono di:
◦memorizzare le preferenze inserite
◦evitare di reinserire le stesse informazioni più volte durante la visita quali ad esempio nome utente e password
◦analizzare l’utilizzo dei servizi e dei contenuti forniti da arceriamarin.it per ottimizzarne l’esperienza di navigazione e i servizi offerti
Tipologie di Cookie utilizzati da Ranked.it
A seguire i vari tipi di cookie utilizzati da arceriamarin.it in funzione delle finalità d’uso
Cookie Tecnici

Questa tipologia di cookie permette il corretto funzionamento di alcune sezioni del Sito. Sono di due categorie, persistenti e di sessione:
◦persistenti: una volta chiuso il browser non vengono distrutti ma rimangono fino ad una data di scadenza preimpostata
◦di sessione: vengono distrutti ogni volta che il browser viene chiuso

Questi cookie, inviati sempre dal nostro dominio, sono necessari a visualizzare correttamente il sito e in relazione ai servizi tecnici offerti, verranno quindi sempre utilizzati e inviati, a meno che l’utenza non modifichi le impostazioni nel proprio browser (inficiando così la visualizzazione delle pagine del sito).

Cookie analitici

I cookie in questa categoria vengono utilizzati per collezionare informazioni sull’uso del Sito. Arceriamarin.it userà queste informazioni in merito ad analisi statistiche anonime al fine di migliorare l’utilizzo del Sito e per rendere i contenuti più interessanti e attinenti ai desideri dell’utenza. Questa tipologia di cookie raccoglie dati in forma anonimasull’attività dell’utenza e su come è arrivata sul Sito. I cookie analitici sono inviati dal Sito Stesso o da domini di terze parti.

Cookie di analisi di servizi di terze parti

Questi cookie sono utilizzati al fine di raccogliere informazioni sull’uso del Sito da parte degli utenti in forma anonima quali: pagine visitate, tempo di permanenza, origini del traffico di provenienza, provenienza geografica, età, genere e interessi ai fini di campagne di marketing. Questi cookie sono inviati da domini di terze parti esterni al Sito.

Google Analytics è uno strumento gratuito di analisi web fornito da Google, che invia cookies al tuo dispositivo. Le informazioni generate dal tuo utilizzo del sito, compreso il tuo indirizzo IP, sono trasmesse a Google e conservate nei suoi server. Google utilizza queste informazioni per valutare il tuo utilizzo del Sito, predisporre resoconti sull’attività del sito per operatori web e per fornire altri servizi relativi all’attività del sito e all’utilizzo di internet. Google può anche trasferire queste informazioni a terzi se richiesto dalla legge oppure in caso di terzi che elaborano queste informazioni per conto di Google. Comunque Google non associa il tuo indirizzo IP con nessun altro dato che Google possiede.

In particolare, di seguito trovi i cookies utilizzati da Google Analytics:

Nome del Cookie Durata
_utmc Sessione
_utmv 0 minuti
_utmb 30 minuti
_utma Due anni
_utmz Sei mesi
Per ulteriori informazioni su Google Analytics, puoi consultare: https://developers.google.com/analytics/devguides/collection/analyticsjs/cookie-usage e la relativa privacy policy http://www.google.com/analytics/learn/privacy.html.

Cookie per integrare prodotti e funzioni di software di terze parti

Questa tipologia di cookie integra funzionalità sviluppate da terzi all’interno delle pagine del Sito come le icone e le preferenze espresse nei social network al fine di condivisione dei contenuti del sito o per l’uso di servizi software di terze parti (come i software per generare le mappe e ulteriori software che offrono servizi aggiuntivi). Questi cookie sono inviati da domini di terze parti e da siti partner che offrono le loro funzionalità tra le pagine del Sito.

Cookie di profilazione

Sono quei cookie necessari a creare profili utenti al fine di inviare messaggi pubblicitari in linea con le preferenze manifestate dall’utente all’interno delle pagine del Sito.
Arceriamarin.it, secondo la normativa vigente, non è tenuto a chiedere consenso per i cookie tecnici e di analytics, in quanto necessari a fornire i servizi richiesti.

Per tutte le altre tipologie di cookie il consenso può essere espresso dall’Utente con una o più di una delle seguenti modalità:
◦Mediante specifiche configurazioni del browser utilizzato o dei relativi programmi informatici utilizzati per navigare le pagine che compongono il Sito.
◦Mediante modifica delle impostazioni nell’uso dei servizi di terze parti

Entrambe queste soluzioni potrebbero impedire all’utente di utilizzare o visualizzare parti del Sito.

Siti Web e servizi di terze parti

Il Sito potrebbe contenere collegamenti ad altri siti Web che dispongono di una propria informativa sulla privacy che può essere diverse da quella adottata da arceriamarin.it e che che quindi non risponde di questi siti.

Come disabilitare i cookie mediante configurazione del browser:

Chrome
◦Eseguire il Browser Chrome
◦Fare click sul menù presente nella barra degli strumenti del browser a fianco della finestra di inserimento url per la navigazione
◦Selezionare Impostazioni
◦Fare clic su Mostra Impostazioni Avanzate
◦Nella sezione “Privacy” fare clic su bottone “Impostazioni contenuti“
◦Nella sezione “Cookie” è possibile modificare le seguenti impostazioni relative ai cookie:
Consentire il salvataggio dei dati in locale
Modificare i dati locali solo fino alla chiusura del browser
Impedire ai siti di impostare i cookie
Bloccare i cookie di terze parti e i dati dei siti
Gestire le eccezioni per alcuni siti internet
Eliminazione di uno o tutti i cookie

Per maggiori informazioni visita la pagina dedicata.

Mozilla Firefox
◦Eseguire il Browser Mozilla Firefox
◦Fare click sul menù presente nella barra degli strumenti del browser a fianco della finestra di inserimento url per la navigazione
◦Selezionare Opzioni
◦Seleziona il pannello Privacy
◦Fare clic su Mostra Impostazioni Avanzate
◦Nella sezione “Privacy” fare clic su bottone “Impostazioni contenuti“
◦Nella sezione “Tracciamento” è possibile modificare le seguenti impostazioni relative ai cookie:
Richiedi ai siti di non effettuare alcun tracciamento
Comunica ai siti la disponibilità ad essere tracciato
Non comunicare alcuna preferenza relativa al tracciamento dei dati personali
Dalla sezione “Cronologia” è possibile:
Abilitando “Utilizza impostazioni personalizzate” selezionare di accettare i cookie di terze parti (sempre, dai siti più visitato o mai) e di conservarli per un periodo determinato (fino alla loro scadenza, alla chiusura di Firefox o di chiedere ogni volta
Rimuovere i singoli cookie immagazzinati

Per maggiori informazioni visita la pagina dedicata.
Internet Explorer
◦Eseguire il Browser Internet Explorer
◦Fare click sul pulsante Strumenti e scegliere Opzioni Internet
◦Fare click sulla scheda Privacy e nella sezione Impostazioni modificare il dispositivo di scorrimento in funzione dell’azione desiderata per i cookie:
Bloccare tutti i cookie
Consentire tutti i cookie
Selezione dei siti da cui ottenere cookie: spostare il cursore in una posizione intermedia in modo da non bloccare o consentire tutti i cookie, premere quindi su Siti, nella casella Indirizzo Sito Web inserire un sito internet e quindi premere su Blocca o Consenti
Per maggiori informazioni visita la pagina dedicata.
Safari 6
◦Eseguire il Browser Safari
◦Fare click su Safari, selezionare Preferenze e premere su Privacy
◦Nella sezione Blocca Cookie specificare come Safari deve accettare i cookie dai siti internet.
◦Per visionare quali siti hanno immagazzinato i cookie cliccare su Dettagli
Per maggiori informazioni visita la pagina dedicata.

Safari iOS (dispositivi mobile)
◦Eseguire il Browser Safari iOS
◦Tocca su Impostazioni e poi Safari
◦Tocca su Blocca Cookie e scegli tra le varie opzioni: “Mai”, “Di terze parti e inserzionisti” o “Sempre”
◦Per cancellare tutti i cookie immagazzinati da Safari, tocca su Impostazioni, poi su Safari e infine su Cancella Cookie e dati

Per maggiori informazioni visita la pagina dedicata.

Opera
◦Eseguire il Browser Opera
◦Fare click sul Preferenze poi su Avanzate e infine su Cookie
◦Selezionare una delle seguenti opzioni:
Accetta tutti i cookie
Accetta i cookie solo dal sito che si visita: i cookie di terze parti e che vengono inviati da un dominio diverso da quello che si sta visitando verranno rifiutati
Non accettare mai i cookie: tutti i cookie non verranno mai salvati

Per maggiori informazioni visita la pagina dedicata.

Come disabilitare i cookie di servizi di terzi

Servizi di Google
Facebook
Twitter
Questa pagina è visibile, mediante link in calce in tutte le pagine del Sito ai sensi dell’art. 122 secondo comma del D.lgs. 196/2003 e a seguito delle modalità semplificate per l’informativa e l’acquisizione del consenso per l’uso dei cookie pubblicata sulla Gazzetta Ufficiale n.126 del 3 giugno 2014 e relativo registro dei provvedimenti n.229 dell’8 maggio 2014.

Chiudi