Integrare WhatsApp Sharing Button Generator in una pagina HTML

google-plus Scritto da . Postato in HTML

Tags: plugin php social html whatsapp javascript

WhatsApp Sharing Button GeneratorIn questo articolo vedremo come integrare in un sito web statico un social button per condividere via WhatsApp il link della pagina dove questo si trova. 

Per farlo, ci serviremo di un plugin javascript: WhatsApp Sharing Button Generator

Nell'integrarlo nel vostro sito web, tenete conto che la condivisione su WhatsApp è attualmente supportata da iOS e Android. Questo plugin individuerà la piattaforma sulla quale la pagina verrà visualizzata e mostrerà il pulsante solo sui dispositivi compatibili.
Ciò vuol dire che se visualizzerete una pagina del vostro sito dalla finestra di un browser su un qualsiasi PC Windows, il pulsante non verrà mostrato. Al contrario, sarà visibile su telefoni e tablet Android o Apple.

Per integrare il plugin in un sito scritto in codice HTML, il processo sarà semplice:

Se cliccate sul link, verrete reindirizzati alla pagina di github di WhatsApp Sharing Button Generator

Basterà seguire i 5 semplici passaggi che sono elencati nella pagina del plugin per avere il pulsante di condivisione WhatsApp sulle pagine del vostro sito laddove ne integrerete il codice. 

Procuriamoci il necessario

Prima di iniziare, vi dovete munire di due strumenti fondamentali: Un client FTP come Filezilla e un editor di testi come Notepad++ entrambi opensource e gratuiti.

Fatto? bene. Dopo aver configurato il client FTP per accedere al vostro spazio web, individuate le pagine che volete integrino il pulsante WhatsApp Sharing. Scaricatele sul vostro PC in una cartella temporanea.

Ora aprite le vostre pagine con il vostro editor di testi per poterle modificare una per una.

Integrare il pulsante WhatsApp Sharing Button Generator

Sulla pagina del plugin, vi viene chiesto al punto 2 di configurare il vostro pulsante, cioé come volete che esso sia visualizzato sul vostro sito. Le opzioni sono 4 in tutto, vediamole una per una:

  • 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. Nel caso di un sito statico, selezionate custom url e incollate nella casella di testo apposita il link esatto alla vostra pagina html.

Arrivati fin qui, al punto 3 verrà generato il codice HTML del vostro pulsante. Sarà solo da copiare ed incollare il codice HTML all'interno della vostra pagina nel punto corrispondente ove desiderate che il pulsante appaia.

<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>

Il punto 4, sarà scaricare il codice sorgente e gli script necessari a far funzionare il pulsante. Una volta scaricati sul proprio PC, scompattati in una cartella temporanea, andranno necessariamente uplodati sul server in una cartella interna allo spazio web che ospita il vostro website.

Per ultimo, dobbiamo fare in modo che la pagina sappia dove andare a prelevare lo script necessario a dar vita al pulsante che abbiamo integrato grazie al codice prima riportato al punto 3.

Per fare questo, basterà copiare e incollare il codice al punto 5 tra i tag <body> della vostra pagina HTML, magari prima del pulsante stesso. Ecco il codice esempio:

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

Dove al posto di "url/to/your/button/whatsapp-button.js", andrà inserito il percorso allo script javascript whatsapp-button.js che avete precedentemente caricato sul vostro server grazie al client FTP.

Ora resta solo da testarne il funzionamento... e se non dovesse funzionare... beh... sarà il caso di passare punto per punto e verificare quale dei passi elencati non avete completato a dovere...

Di solito ciò che si sbaglia sono proprio i percorsi ai file js... Quindi in caso di mancato funzionamento non disperate ed inziate a verificarne la correttezza.

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

Aggiungi commento


Codice di sicurezza
Aggiorna

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: