Nel mio precedente articolo ho illustrato come aggiungere pulsanti per la condivisione social direttamente dal codice, senza avvalersi dell’utilizzo di un plugin (tutte le ragioni di tale scelta masochistica le ho illustrate lì, indi non mi dilungherò sui motivi che portano a intraprendere la strada del fai-da-te).
Le icone realizzate con Font Awesome sono leggere, funzionali e totalmente personalizzabili, ma mancano ancora di una funzionalità per me essenziale: il contatore delle condivisioni.
Sapere quante volte un articolo è stato condiviso su un dato social è pressochè indispensabile per avere un quadro chiaro e conciso sull’engagement dei nostri utenti.
Dopo aver cercato in lungo e in largo su Google, mi sono imbattuta in un tutorial interessantissimo di Daniel Setzermann dal quale ho preso ispirazione per il mio codice.
I passaggi da affrontare sono fondamentalmente quattro:
- Ottenere il Facebook app_ID, necessario per tracciare le condivisioni di Facebook
- Creare uno shortcode per il contatore condivisioni dal file functions.php, che includa tutti i codici di tracciamento dei social e l’HTML per i diversi pulsanti
- Inserire lo shortcode nella pagina in cui si vogliono far comparire i pulsanti di condivisione (per gli articoli single.php)
- Aggiungere gli stili nello style.css
Vediamo come implementarlo:
1) Ottenere il Facebook app_ID
Accedete al Facebook Developers center e dal menù in alto selezionate Apps -> Register as a Developer (non vi spaventate per la carica altisonante, la procedura serve solo a ottenere un codice identificativo). Accettate le condizioni e cliccate su “Avanti”.
Se vi siete già registrati in precedenza come sviluppatori, il sottomenù dovrebbe invece apparirvi così:
In ognuno dei due casi, il passaggio successivo è quello di avviare la procedura per creare una nuova app. Scegliete il canvas di Facebook e digitate un nome di fantasia (io ho scelto “Sharingshare”, tanto per essere ridondante).
Cliccate sul pulsante “Create New Facebook App ID”. Vi verrà chiesto di selezionare una categoria, potete tranquillamente sceglierla a caso, l’importante è che concludiate l’operazione e che venga visualizzato questo codice:
Tutto ciò che ci interessa è l’appId, che andremo a copiare e tenere da parte per il prossimo step. Ora potete dimenticarvi il Dev Center – a meno che non vi sia venuta voglia di sviluppare qualcosa! (:
2) Creare uno shortcode in functions.php
Questo passaggio è indubbiamente il più importante. Il codice che andrete a inserire nel file functions.php del vostro sito (Aspetto -> Editor -> Funzioni tema) esegue le seguenti operazioni:
- Inserisce l’API key di ogni social network, richiamando il permalink relativo al post (per fare in modo che vengano contate solo le condivisioni di quel dato articolo)
- Congelar il processo se viene restituito un errore
- Riceve i risultati in formato JSON o XML
- Estrae il “total count” dal risultato
- Lo inserisce nell’HTML dei pulsanti social
- Crea uno shortcode facilmente inseribile in qualsiasi pagina
Per i quattro pulsanti di Facebook, Twitter, Google+ e LinkedIn incollate quanto segue alla fine del file functions.php, subito prima della chiusura dell’ultimo tag php (?>). Trovi il codice qui.
Attenzione: prima di salvare il codice, ricordate di sostituire ILTUOAPPID con l’appId di Facebook ottenuto nel passaggio precedente, e ILTUONOMEUTENTE con il vostro username di Twitter senza chiocciola davanti – in questo modo nel tweet comparirà anche “via @tuonome” e riceverete una notifica per ogni condivisione. Inoltre abbiamo dovuto inserire degli spazi nei valori i class e li class per evitare che comparisse l’immagine.
3) Inserire lo shortcode nella pagina desiderata
Ora che la funzione è stata creata, non resta che richiamarla all’interno degli articoli (o di qualsiasi pagina vogliate). Ad esempio, per far comparire i pulsanti su un post, aprite il file single.php (Articolo singolo) e incollate questa stringa nel punto che desiderate:
[quote]
<?php susy_social_media_icons(); ?>
[/quote]
4) Un tocco di stile!
Quello che vi comparirà sarà un elenco piuttosto disordinato. Diamogli un po’ di stile: sempre dall’editor, saltate al file style.css e assegnate lo stile che più preferite alle classi delle varie icone. Il mio è questo (ho scelto di colorarle con i colori peculiari dei rispettivi social, per renderle più riconoscibili). Trovi il codice qui.
Il mio risultato – molto minimalista – è questo, ma la personalizzazione è pressoché senza limiti 🙂
2 coomenti
Grazie mille per l’articolo Susy!
Il plugin Cresta Social Share Counter mi piace molto,
ma sul mio sito non funziona correttamente 🙁
Appena ho un attimo di tempo metto mano al codice
per inserire i pulsanti.
Purtroppo un buon 70% dei plugin social ha delle lacune enormi, sia a livello di codice che di funzionalità. Per questo alla fine ho optato per il fai da te!
Fammi sapere come ti trovi coi nuovi pulsanti 🙂