WordPress: come aggiungere pulsanti social senza plugin

Ogni blog che si rispetti ha un bisogno vitale di comunicare con gli utenti.

I guru del settore ce lo ripetono in tutte le salse, le statistiche e i nostri stessi visitatori non fanno che ricordarcelo: che non c’è scappatoia, inserire pulsanti per la condivisione social è un passaggio fondamentale nella creazione di un sito web.
Il social sharing aiuta il lettore a diffondere più facilmente un contenuto interessante, a seguire con un click la nostra pagina Facebook o il nostro profilo Twitter, a creare immediatamente un legame con noi.

Per WordPress esistono un’infinità di plugin – gratuiti e non – in grado di integrare questa funzione in pochi minuti. Ma in questo mini-tutorial metterò da parte le “scorciatoie” e vi insegnerò ad aggiungere i pulsanti social nel vostro CMS senza l’ausilio di alcun plugin.

Perché rinunciare ad un plugin?

Un plugin è comodo, veloce ed efficiente, perché dovrei rinunciarci?

Primo, per una funzione elementare come quella della condivisione si può tranquillamente fare a meno di aggiungere un plugin in più al nostro repertorio, e la programmazione web insegna da sempre che less is more. Secondo, personalmente mi sono trovata spessissimo a dover fronteggiare alcune problematiche minori legate all’utilizzo di plugin per il social sharing.
I due che ho sperimentato finora sono AddThis e Ridiculously Responsive Social Sharing Buttons.Li ho entrambi disattivati a causa della loro poca usabilità. I motivi?

• AddThis: usato e apprezzato per un sacco di tempo. Facile, intuitivo, leggero, ma… c’è un piccolo particolare che da solo mi ha convinto a disattivarlo: vi siete mai accorti che aggiunge automaticamente una stringa di caratteri alla fine dell’URL delle pagine? Qualcosa come /#.VATJFfl_sa8.
  Sono parametri come l’ID della sessione o il codice di tracciamento, totalmente innocui ai fini dell’indicizzazione, ma orripilanti agli occhi di un utente che approda su una nostra pagina. L’URL parlante, a quel punto, sembra quasi dire parolacce.
  Altra piccola pecca: la poca personalizzazione dei pulsanti costringe spesso a fare scelte sofferte in termini di design. Mi è capitato più di una volta che i pulsanti non interagissero bene con certi temi WordPress, e che quindi non venissero visualizzati in modo corretto.

• RRSSB: a livello di design e di semplicità questi pulsanti minimal sono ineccepibili, ma mancano di due caratteristiche fondamentali: la personalizzazione conteggio degli share. Lasciati così come sono, risultano troppo scarni per meritarsi l’utilizzo di un plugin.

Ho installato diversi altri plugin votati allo stesso scopo, senza mai andare oltre la configurazione iniziale. In tutti i casi c’era qualcosa che non mi convinceva e che mi faceva tornare sui miei passi (non ho provato quelli a pagamento perché sono tirchia e amo il fai-da-te). Perciò, perché non implementarli direttamente dal codice risparmiandosi ricerche inutili?

Rinunciando ad un plugin rinunciate anche a doverlo continuamente aggiornare, vi liberate di una cartella magari zeppa di file inutili, e aprite le porte alla totale personalizzazione dei pulsanti. Io ho scelto questa strada e non me ne sono affatto pentita.

Come aggiungere pulsanti social senza plugin

Metodo 1

Sharing buttons generator

Mi sono imbattuta in questo tool online proprio cercando una soluzione che mi permettesse di fare a meno dei plugin. Tramite un procedimento guidato il sito vi permette di ottenere il codice per il social sharing da inserire nel vostro sito, scegliendo tra sei differenti set differenti di icone, selezionando i social che vi interessano e inserendo l’URL del vostro sito.

Potete scegliere se implementare i pulsanti tramite Javascript o HTML, a vostra discrezione (l’agognato PHP, ahimè, non è ancora disponibile).

Una volta copiato il codice accedete al pannello di controllo di WordPress, selezionate “Aspetto -> Editor” dal menù principale e aprite la pagina “single.php” (se usate WordPress in italiano il titolo sarà “Articolo singolo”). A questo punto incollate il codice nel loop, nel punto in cui volete che i vostri pulsanti compaiano. Io li ho inseriti dopo la chiusura del tag article, per farli comparire in calce all’articolo.

Il risultato sarà simile a questo:

Se i sei proposti non vi convincono, potete sostituire le icone preimpostate con l’url dell’immagine che preferite (qui trovate set di icone social per tutti i gusti).
Piccola, piccolissima pecca: con questo metodo abbiamo ottenuto un risultato molto simile a quello dei RRSSB, ma ancora siamo costretti a caricare tra i media i file delle icone che ci servono. Vediamo nel Metodo 2 come migliorare ulteriormente l’esperienza.

Metodo 2

Implementazione dal codice con Font Awesome

Il secondo metodo è puro e semplice codice: sfruttando le icone gratuite di Font Awesome, è possibile offrire i pulsanti nei colori e nelle dimensioni che preferiamo risparmiandoci la fatica di caricare manualmente le icone.

Fase 1: Per prima cosa verificate se il vostro tema contiene già al suo interno il foglio di stile di FA accedendo a Aspetto -> Editor e aprendo il file Functions.php (“Funzioni tema” in italiano). Con un semplice CTRL+F cercate font-awesome.min.css e, nel caso non fosse presente, aggiungete questo codice all’interno del file:

// enqueue font awesome
add_action( ‘wp_enqueue_scripts’, ‘prefix_enqueue_awesome’ );
function prefix_enqueue_awesome() {
wp_enqueue_style( ‘prefix-font-awesome’, ‘//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css’, array(), ‘4.1.0’ );
}

Fase 2: Scegliete le vostre icone da Font Awesome. Tra le brand icons sono disponibili le icone di tutti i social più conosciuti con relativo codice, e negli esempi potete vedere come ingrandirle o incastonarle all’interno di un’altra forma (cerchio, quadrato, etc.).

Questo, ad esempio, è il codice da inserire per ottenere un’icona all’interno di un cerchio vuoto:

<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>

Risultato:

Attenzione: venendo trattate come un font, quando applicherete loro il tag “a” per la condivisione le icone assumeranno di default lo stesso colore di tutti i vostri link. Nel caso in cui vogliate modificarlo associando a ogni icona un colore diverso, vi basterà assegnare ad ognuna di esse la classe “.twitter“, “.facebook” e via dicendo e cambiarne il colore tramite CSS.

Fase 3: Create lo “scheletro” di un link racchiudendo il codice dell’icona in un tag “a” e aggiungete all’interno dell’href il codice PHP dinamico per la condivisione. Questo servirà a generare i dati per lo share a partire al contenuto della vostra pagina.
Vi incollo quello relativo ai principali social (tutti gli altri li potete trovare in pochi secondi, Google è nostro amico!):

Facebook:

http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>

Twitter:

http://twitter.com/home?status=<?php echo urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); ?>: <?php the_permalink(); ?>

Google+:

https://plus.google.com/share?url=<?php the_permalink(); ?>

LinkedIn:

http://www.linkedin.com/shareArticle?mini=true&url=&title=<?php urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); ?>&source=LinkedIn

A vostro piacere potete aggiungere l’attributo target=”_blank” se volete che lo share si apra in un’altra finestra o class=”popup” se desiderate che si apra in un popup… ma in questo caso dovrete condire il tutto con un po’ di javascript:

jQuery(document).ready(function($) {
jQuery('.popup').live('click', function(){
newwindow=window.open($(this).attr('href'),'','height=450,width=700');
if (window.focus) {newwindow.focus()}
return false;
});
});

Fase 4: racchiudete il tutto in un elenco puntato per mettere un po’ d’ordine tra le icone (vi consiglio anche l’utilizzo di un div adibito allo scopo e della classe fa-fw di Font Awesome per mantenere una distanza fissa tra un’icona e l’altra).

Fatto! Ecco qui il nostro codice finale:

<ul class="social-share">
<li class="facebook">
<!--fb-->
<a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>"><span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span></a>
</li>
<li class="twitter">
<!--twitter-->
<a target="_blank" href="http://twitter.com/home?status=<?php echo urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); ?>: <?php the_permalink(); ?>"><span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span></a>
</li>
<li class="google-plus">
<!--g+-->
<a target="_blank" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"><span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-google-plus fa-stack-1x"></i>
</span></a>
</li>
<li class="linkedin">
<!--linkedin-->
<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); ?>&source=LinkedIn"><span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x"></i>
</span></a>
</li>
</ul>

Incollatelo nel file single.php, come sempre nel punto della pagina in cui volete che compaiano le icone social. Potete personalizzare gli stili e le dimensioni come più vi piace.

E per il contatore delle condivisioni? Appuntamento al prossimo post!

Acquista su Amazon.it

‹ ›