Excel - Trimestri uso funzioni DATA, GIORNO e FINE.MESE
Nell'articolo precedente siamo partiti con l'uso della funzione SOMMA.PIU.SE e proseguito con l'aggi
Excel - SOMMA.PIU.SE con Condizione multipla
Se usate Microsoft Office Excel per la vostra contabilità privata o aziendale, vi sarà senz'a
Excel DataPicker - Selezione data con calendario
In questo periodo, dopo aver di nuovo cambiato lavoro, mi sono riaffacciato al mondo di Excel. Ques
Sitemap, cos'è, a cosa serve e come crearne una
Che cos'è una Sitemap? Una Sitemap è un file che fornisce informazioni sulla relazione tra pagine
Joomla - Integrare WhatsApp Sharing Button Generator
Il presente articolo, ci aiuterà ad integrare negli articoli di un sito Joomla! un social button pe
Joomla! - Xmap Cannot use object of type stdClass as array
E' da anni che usate Xmap come estensione per la vostra Sitemap di Joomla! e finora non vi ha dato m
WordPress - Twenty Seventeen Full Width Template
Chi usa il nuovo tema gratuito di WordPress, si è sicuramente trovato di fronte a questo dilemma.
WordPress - Maintenance mode
A tutti coloro che possiedono un sito in WordPress, sarà senz'altro capitato di dover mettere
WordPress - Child Themes, come e perché
Una delle peculiarità di WordPress sono i child themes. Introdotti fin dalla versione 3.0, so
Windows 10 - Testare la batteria del Notebook
A tutti i proprietari di un portatile credo sia passato di notare che la batteria del proprio laptop
Windows 10 - Cancellare la cartella Windows.old
Avete fatto l'avanzamento a Windows 10 e vi siete accorti che nella partizione che ospita il sistema
Windows 10 - Installare phpMyAdmin su IIS Express 10
Nell'ultimo periodo ho studiato come configurare il server IIS Express 10 su Windows 10 per poter fa

Integrare WhatsApp Sharing Button Generator in una pagina HTML

google-plus Scritto da .

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.

Potrebbe interessarti:

Configurare un client FTP

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

  • 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

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