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