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:
per ottenere questo pulsante:
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
https://twitter.com/about/resources/buttons
Tumblr
http://www.tumblr.com/buttons?language=it_IT
https://developers.facebook.com/docs/reference/plugins/like/
Commenta questo articolo sul forum