Joomla - Integrare WhatsApp Sharing Button Generator

google-plus Scritto da . Postato in Joomla!

Tags: joomla 3 plugin php social html whatsapp javascript

WhatsApp Sharing Button GeneratorIl presente articolo, ci aiuterà ad integrare negli articoli di un sito Joomla! un social button per condividerne via WhatsApp il link. 

La base di questa modifica, sarà il plugin javascript: WhatsApp Sharing Button Generator

E' bene tenere conto del fatto che la condivisione su WhatsApp è supportata solo da iOS e Android. Il plugin si occuperà di verificare la piattaforma sulla quale la pagina verrà visualizzata e mostrerà il pulsante solo sui dispositivi compatibili. Quindi non allarmatevi se sul vostro PC Windows non verrà mostrato il pulsante: per vederlo dovrete prendere il vostro dispositivo Android o Apple e verificarne il funzionamento da lì..

Strumenti indispensabili

Abbiamo bisogno di due strumenti indispensabili a molti lavori su siti web: Un client FTP come Filezilla e un editor di testi come Notepad++ entrambi opensource e gratuiti.

Ora è il momento di configurare il client FTP per accedere al vostro spazio web.

Potrebbe interessarti:

Configurare un client FTP

Fatto questo, resta da...

Configurare il pulsante WhatsApp Sharing Button Generator

Se siete atterrati sulla pagina del plugin, avete probabilmente già tentato a configurare il vostro pulsante per la condivisione WhatsApp. Giocando ed impostando le quattro opzioni disponibili daremo vita a ciò che apparirà nei nostri articoli Joomla:

  • button size o dimensione del pulsante
  • button text o l'etichetta che verrà visualizzata come testo del bottone ad esempio "Condividi"
  • sharing text o meglio dire, il testo che precederà il link che verrà condiviso ad esempio "Guarda questo articolo"
  • custom url, current page url, si riferisce al link della pagina da condividere. Sarà da modificare durante l'integrazione del codice PHP:

Al punto 3 viene generato il codice HTML del vostro pulsante. Vedremo poi dove inserirlo.

// HTML CODE
 0  <a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="vostro-url" class="wa_b tn wa_btn_s" style="display:none">Share</a> 

Al punto seguente, effettuate il download sul vostro computer dei file necessari scompattandoli poi in una cartella temporanea.

Anche il codice del punto 5 servirà. Lo inseriremo tra i tag <head> di ogni articolo grazie alle API di Joomla. Ecco come si presenta il codice generato:

// JS CODE
 0  <script type="text/javascript">  1  if(typeof wabtn4fg==="undefined"){  2  wabtn4fg=1;  3  h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");  4  s.type="text/javascript";  5  s.src="url/to/your/button/whatsapp-button.js";h.appendChild(s);  6  }  7  </script> 

Integrare il pulsante WhatsApp in Joomla

Integrare in Joomla! lo script WhatsApp Sharing, è semplice ma allo stesso tempo richiede un po' di conoscenza del linguaggio PHP e del funzionamento del CMS Joomla e delle sue API.

Molto dipende anche dal sistema che nel vostro sito genera i pulsanti social: alcuni vengono generati da codice integrato nel template o tema scelto, altri da plugin di terze parti.

Individuare il codice da modificare

Di solito questi plugin sono di tipo content in quanto aggiungono qualcosa al contenuto dell'articolo nella fase di elaborazione che porterà al risultato finale che verrà mostrato all'utente.

Utilizzando un client FTP, potete navigare nella root del sito e aprire la cartella che ospita i file del vostro ipotetico plugin ad es.: plugins/content/socialbutton

In genere i plugin non sono composti da molti file: in genere da un file PHP e da una cartella contenente immagini e fogli di stile CSS necessari al suo funzionamento.

All'interno della cartella andrà caricato via FTP il contenuto del file zip precedentemente scompattato. Io per comodità ho creato una cartella di nome wa (le iniziali di WhatsApp) e al suo interno ho caricato i file.

Nel caso si faccia uso di un plugin che genera i social buttons nei vostri articoli, senza andare a creare qualcosa ex-novo, si tratta solo di modificare il codice del plugin, integrando il codice proposto nella pagina di WhatsApp Sharing Button Generator.

Nel caso si tratti di uno script interno al template che avete scelto per il vostro sito Joomla, dovrete necessariamente localizzare in quali file vi è il codice responsabile dell'elaborazione e visualizzazione dei social buttons. In tal caso, è più complesso trovare i file da modificare, anche perché ogni template, ha una sua logica e spesso si basano su framework proprietari. Tuttavia, una volta trovato le righe di codice da editare, non differisce molto ciò che dovrete fare:

Modifica del file PHP

Ora scaricate e aprite con un editor di testi il file PHP. Al suo interno ubicate dove vengono aggiunti i propri fogli di stile e/o i propri file script alla pagina (in un plugin di tipo content lo troverete molto probabilmente all'interno della funzione getContent(...)). In questa posizione, aggiungeremo il richiamo alla libreria javascript necessaria al nostro scopo con la seguente riga di codice:

// PHP CODE
 0  $doc->addScriptDeclaration("if(typeof wabtn4fg==='undefined'){wabtn4fg=1;h=document.head||document.getElementsByTagName('head')[0],s=document.createElement('script');s.type='text/javascript';s.src='" . JURI::root() . "plugins/content/socialbutton/wa/dist/whatsapp-button.js';h.appendChild(s);}"); 

In questa riga di codice, la variabile $doc è il document Joomla! ricavabile attraverso l'istruzione $doc = JFactory::getDocument();

Il metodo addScriptDeclaration, consente di aggiungere le righe di codice Javascript direttamente nel mezzo dei tag <head> della pagina.

Come si può notare, il percorso JURI::root() . "plugins/content/socialbutton/wa/dist/whatsapp-button.js' è composto dal percorso della root del sito (qui ottenuto dinamicamente attraverso l'istruzione JURI::root() ) e il percorso della cartella del plugin dove precedentemente ho caricato i file necessari al funzionamento di WhatsApp Sharing.

Nell'aggiungere il percorso, fate la solita attenzione che sia quello corretto.

Ora dovete dare istruzione perché il plugin aggiunga il codice del pulsante WhatsApp al contenuto dell'articolo. Aggiungiamo dunque il seguente codice:

// PHP CODE
 0  $html.= "<a href='whatsapp://send' data-text='Guarda questo articolo:' data-href='".$url ."' class='wa_btn wa_btn_s' style='display:none'>WhatsApp</a>"; 

Nel caso specifico, dovrete individuare dove il viene generato il codice HTML prima di iniettarlo nel contenuto. Io qui sopra faccio riferimento a un'ipotetica variabile $html alla quale "appendo" il codice del pulsante immaginando che poi questa venga incorporata nell'output della pagina. Adattate il codice alle vostre esigenze.

La variabile $url, uri completa all'articolo, qualora non fosse già disponibile nel codice, può essere ricavata grazie alle API di Joomla:

// PHP CODE
 0  $uriInstance = JURI::getInstance();  1  $root = rtrim($uriInstance->getScheme() . '://' . $uriInstance->getHost(), '/');  2  $url = JRoute::_(ContentHelperRoute::getArticleRoute($article->slug, $article->catslug), false);  3  $url = $root . $url; 

Questa soluzione consente potenzialmente di poter integrare il pulsante di condivisione WhatsApp su tutti gli articoli.

buttone per la condivisione whatsapp

Detto questo è solo questione di provarne il funzionamento. Nel mio caso il risultato, la modifica del plugin ha dato il risultato sperato integrandosi insieme agli altri social buttons meglio di quanto sperassi.

 

 

Se hai gradito l'articolo, condividilo, basta un click:

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo teoca
  • logo arcotraslochi
  • materexcel collabora
  • koilab japan and tropical fish farm
  • logo flash pulizie
  • revolution srl
  • logo planetkoi small
  • logo elevatori sito
  • logo finiture
  • logo prontopro
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. La nostra Privacy Policy è cambiata (11/09/2019): Ti invitiamo a prenderne visione. Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):