Home>Guide>Come inserire il pulsante ‘Condividi su WhatsApp’ su WordPress

Come inserire il pulsante ‘Condividi su WhatsApp’ su WordPress


Come inserire il pulsante "Condividi su WhatsApp" su WordPress


Diciamoci la verità: l’utilizzo dei social networks è uno diventato uno strumento di marketing di vitale importanza per siti web, blog ed e-commerce. Ma oltre ai “classici” social di massa, quali Twitter, Facebook, Google+, Instagram e altri, sapevi che fosse possibile condividere anche su WhatsApp direttamente dalla pagina interessata e con un semplice click?
Eccoti un utile snippet per agevolare la diffusione del tuo sito, funzionante sui vari browser e sui diversi dispositivi (Android, iOS, WindowsPhone).

  • Leggi l'articolo, ti bastano solo 2 minuti, 36 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Perché condividere su WhatsApp?

Beh, in primo luogo, perché WhatsApp è l’applicazione di messaggistica istantanea più diffusa ed è davvero raro trovare uno smartphone su cui non sia installata ed utilizzata! E proprio il diffusissimo utilizzo, insieme all’aumento costante di utenti che consultano internet dallo smartphone piuttosto che dal pc, rendono indispensabile per il tuo WordPress un pulsante di condivisione su WhatsApp.

Inoltre, proprio il carattere di “confidenzialità” di WhatsApp, fa sì che il link così condiviso non vada perso o ignorato, come accade per i social networks più di massa.


Markup e stile

La prima cosa da fare, è creare un semplice link e dargli un minimo di stile a tuo piacimento. Se non hai idee, ecco come potrebbe essere:

Condividi su WhatsApp


Il markup

<a class="btn-whatsapp" href="">Condividi su WhatsApp</a>

Lo stile

.btn-whatsapp {
	background-color: #25D366;
	border: solid 1px #25D366;
	border-radius: 5px;
	color: #fff;
	padding: 5px 10px;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
}

.btn-whatsapp:hover {
	background-color: #fff;
	color: #25D366;
}

Il codice completo

Ed ora la parte interessante. Riempiamo l’attributo href del link con il seguente codice:

<a class="btn-whatsapp" href="whatsapp://send?text=<?php echo get_the_title() . '%0A%0A' . urlencode( get_the_permalink() ); ?>" data-action="share/whatsapp/share">Condividi su WhatsApp</a>

dove la funzione get_the_title() restituirà il titolo della pagina o dell’articolo da condividere, mentre la funzione get_the_permalink si occuperà di restituire la URL della pagina. La proprietà data-action, completa il tutto.
Naturalmente, al posto del titolo dell’articolo, puoi decidere di inserire ciò che vuoi, si tratta in effetti del testo che verrà inviato al contatto con cui verrà effettuata la condivisione.

Ed il gioco è fatto! Non ti resta che provarlo ed iniziare a condividere su WhatsApp le pagine e gli articoli del tuo WordPress.


Dove inserire il codice?

Un attimo! Ma dove e come bisogna inserire il pulsante appena creato?
Facile… Puoi inserirlo direttamente nel file di template degli articoli (single.php) e/o delle pagine (page.php) che trovi in:

wp-content/themes/{nome_del_tema}/

nel punto che ritieni più opportuno, oppure utilizzando gli hooks di WordPress, in particolare inserendo nel file functions.php del tema attivo, che trovi nello spazio FTP del tuo sito, in:

wp-content/themes/{nome_del_tema}/

il filtro adatto:

add_filter( 'the_content', function( $content ) {
	/* ... crea qui il tuo markup modificando la variabile $content ... */

	return $content;
} );

Ma non è finita qui! Se vuoi ampliare la diffusione dei tuoi contenuti tramite app di messaggistica istantanea, leggi anche la guida:




Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come ritagliare un'immagine con PHP

Come ritagliare un’immagine con PHP


Ecco come utilizzare le funzioni PHP per ritagliare un’immagine con misure stabilite a partire da un preciso punto per estrapolare particolari e porzioni precise.

Come personalizzare WooCommerce: il checkout

Come personalizzare WooCommerce: il checkout


Ecco una guida su come aggiungere campi personalizzati al checkout di WooCommerce senza utilizzare alcun plugin, ma utilizzando solamente gli hooks a disposizione.

Oppure cerca tra gli articoli correlati


Qualche dubbio? Ecco le opinioni degli altri utenti

Ottimo articolo, anche per chi non è ferratissimo con il codice, risulta facile aggiungere il tasto di condivisioni WP. Stesso metodo per Telegram?

In risposta a Giovanni

Ciao Giovanni,
per Telegram il sistema è lo stesso, cambia solamente il link da inserire nell’anchor text del tag <a>. A breve proporrò un articolo dedicato!

E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Privacy Policy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Privacy Policy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Privacy Policy)