Supporto volontario e collaborativo per Joomla!® in italiano

Aggiungere un pulsante like facebook senza usare estensioni

Di estensioni che aggiungono pulsanti social ce ne sono tante nella JED, è vero. Personalmente però ritengo che quando è possibile evitare di installare estensioni di terze parti sfruttando le funzionalità di Joomla è sempre una buona cosa. Ricordiamoci sempre che l'installazione di estensioni terze che non vengono poi aggiornate abbassa il livello di sicurezza del nostro sito web. Quanto segue è valido per qualsiasi versione di Joomla.

Vediamo dunque come realizzare un pulsante like di facebook.

Per farlo utilizzeremo:

- un modulo html personalizzato

- il generatore di codice presente nella guida allo sviluppo di facebook

Va detto che lo stesso discorso può essere fatto anche per Twitter, Google o Tumblr, in tutti i casi esistono dei generatori di codice forniti dai tre brand. I link li troverete in fondo all'articolo.

 

Anzitutto disattiviamo l’editor di joomla

Accediamo al backend del nostro sito web e nel profilo dell’utente che stiamo usando disattiviamo l’editor selezionando, nell’apposito box, la voce Editor – nessuno. Questo perchè con l’editor attivo non riusciremmo ad inserire il codice (html, javascript nel nostro caso) per il pulsante like che verrebbe distrutto.

Creiamo un nuovo modulo personalizzato

Andiamo quindi in Gestione Moduli e creiamo un nuovo modulo HTML personalizzato che chiameremo Facebook fanpage.

Generiamo il codice necessario a creare il pulsante

Partendo da questo link della guida allo sviluppo per siti web di facebook visitiamo la pagina dei social plugin e selezioniamo il link like button. A questo punto utilizziamo l’utility Configurator per definire le caratteristiche del nostro pulsante like e alla fine clicchiamo su Get Code. Verrà aperta una finestra popup dalla quale dovremo copiare il codice che sarà diviso in due parti: uno script javascript e un tag html.

Questo è il codice che ho generato:

 

Codice pulsante like facebook

 

per ottenere questo pulsante:

 

Pulsante like facebook

 

Attenzione, il codice sopra riportato non è esattamente uguale a quello generato dal Configurator di facebook in quanto sono stati aggiunti alcuni tag per migliorarne l'aspetto e il posizionamento. Ad esempio il tag img non è presente nel codice generato dal Configurator, è una mia personalizzazione per visualizzare un immagine di 32x32px prima del pulsante Like. Così come il tag div che precede img serve per distanziare il pulsante di 10px in alto e 4px a sinistra rispetto ai margini della pagina.

 

Copiamo dunque il codice generato con il Configurator di facebook e incolliamolo nella casella di editor del nuovo modulo html personalizzato del nostro sito joomla (ecco perchè abbiamo disattivato l’editor, altrimenti salvando il modulo questo avrebbe filtrato il contenuto del box ed eliminato gran parte del codice. Non ci resta che selezionare la posizione modulo e per quali voci di menu visualizzare il modulo, salvare e pubblicare il modulo.

Una nota personale: chi utilizzasse il browser Chrome di google con intallata qualche estensione che agisca sul tracciamento di facebbok provveda a disattivare queste estensioni perchè interferiscono con la visualizzazione del modulo personalizzato che abbiamo creato.

 

Ecco dove generare il codice di altri pulsanti social:

Google +1

http://www.google.it/intl/it/webmasters/+1/button/policy.html

Twitter

https://twitter.com/about/resources/buttons

Tumblr

http://www.tumblr.com/buttons?language=it_IT

Facebook

https://developers.facebook.com/docs/reference/plugins/like/

 


CommentaCommenta questo articolo sul forum