5 1 1 1 1 1 1 1 1 1 1 Rating 5.00 (3 Votes)

joomla Aggiungere WhatsAPP Skype

Nel precendente articolo sul plugin Joomla! social 2s, che consente di condividere i contenuti anche su WhatsApp, ho accennato a quanto sia diventato importante dare la possibilità ai nostri utenti di utilizzare piu opzioni possibili tramite dispositivi mobili come tablet e smartphone, in questa guida vediamo come è possibile integrare nella pagina contatti di joomla! i pulsanti Click-to-call e click-to-talk di WhatsAPP e Skype.

Per inserire i pulsanti di WhatsApp e di Skype nella pagina di contatto di Joomla! utilizziamo la tecnica di override, ovvero riscrittura dei file del componente contatti nella cartella del template.

Come prima cosa nel pannello di controllo di joomla rechiamoci alla voci di menu Estensioni/template/template e clicchiamo sul nome del template predefinito del nostro sito, nel mio caso è il template Protostar preinstallato in Joomla!, nella pagina che si apre troveremo 3 TAB: Editor - Crea Override - Descrizione Template, andiamo al Tab Crea Override e nella colonna centrale Componenti clicchiamo sulla cartella com_contact e successivamente sul file contact vedremo che ci restituisce il messaggio della corretta creazione e la cartella del nostro override.

Joomla modifica Contatto

Ora dobbiamo ottenere i codici per i pulsanti di WhatsApp e Skype.

Codice WhatsApp per il pulsante Click-to-chat:

Con il seguente codice si inserisce il pulsante che permetterà a chi lo clicca di avviare una conversazione con noi tramite WhatsApp, va sostituito il N° di telefono

<div id="whatsapp"><span class="jicons-icons"><img src="/images/whatsapp.png" alt="whatsapp"></span><a class="btn btn" href="https://api.whatsapp.com/send?phone=+391234567">whatsapp</a></div>

come potete vedere il codice è contenuto in un <*div> con ID whatsapp questo ci consentirà di associargli uno stile CSS personalizzato, anche il link ha associata la classe button (btn btn) di Bootstrap se il vostro template non supporta questo framework potete rimuoverlo e volendo associare una vostra classe css personalizzata, all'interno del div c'è una span che inserisce l'icona WhatsApp che potete scaricare da qui Icona WhatsApp e và inserita nella cartella images di joomla.

Questo è il css da me utilizzato come vedete contiene anche il nome del div di skype e permette di allineare i pulsanti alle altre informazioni del contatto, dovrete inserire il vostro nome utente come nel div che vi restituisce skype.

#whatsapp, #SkypeButton_Call_NomeSkype_1 {
    margin-left: 140px;
}

è possibile anche avere un messaggio preimpostato modificando il link in questo modo:

https://api.whatsapp.com/send?phone=numeroditelefonowhatsapp&text=testocodificatourl

Per ulteriori informazioni potete recarvi nella pagina FAQ delle API di WhatsApp

Codice di Skype da Inserire nel sito

Per quanto riguarda il codice Click-to-call e Click-to-chat di skype è tutto molto piu semplice infatti mette a disposizione un tool in cui è possibile generare il proprio codice semplicemente inserendo il proprio nome utente skype e scegliere lo stile ed il tipo di pulsante, per farlo andate nella pagina per la creazione del Pulsante Contattami di Skype

Inserimento Pulsante WhatsAPP e Skype nel contatto Joomla!

Ora che abbiamo i codici possiamo inserirli nella nostra pagina di contatto di joomla!

Rechiamoci nuovamente nella pagina Estensioni/template/template ed al Tab Editor  sulla sinistra clicchiamo la cartella Html/com_contact/contact e sul file default_address.php si aprira il codice del file override creato precedentemente e cerchiamo il punto in cui vogliamo far apparire i nostri pulsanti di WhatsApp e Skype, io ho scelto di visualizzarli sotto i numeri di telefono del contatto, che hanno questo codice:

		<span class="contact-mobile" itemprop="telephone">
			<?php echo $this->contact->mobile; ?>
		</span>

quindi al rigo 117 subito sotto

<?php endif; ?>

andremo ad inserire i codici dei nostri pulsanti WhatsApp e Skype e salviamo questo sarà il risultato

WhatsApp Skype Joomla Contatto

Attenzione non è possibile utilizzare questo metodo se sono presenti piu contatti, perche verrebbero inseriti i pulsanti dello stesso utente per tutti, in alternativa si puo utilizzare un modulo personalizzato dove inserire il codice WhatsApp e uno dei tanti moduli Skype che si trovano nella JED, mentre dalla prossima versione di joomla sarà possibile inserire per ogni contatto il proprio codice utilizzando la nuova funzionalità dei campi aggiuntivi di joomla! 3.7 ma di questo parleremo piu avanti .

Accedi per commentare

Per favore se ti sono stato utile considerà la possibiltà di fare una donazione! grazie mille, Red

Quota