Bottoni di Contatto Html e Css: WhatsApp, Telegram, Messenger, Skype, Mail, Phone

Nell’era del Web 2.0 parlare ancora di “Pagina Contatti” nel senso classico del termine – ossia nel semplice inserimento di un modulo di contatti, con riferimenti generici sui numeri di telefono – è alquanto riduttivo, secondo il mio modesto parere. Trovo che siano molto più funzionali, invece, i Bottoni di Contatto Html e Css che si collegano direttamente a delle App Specifiche e molto diffuse, quali ad esempio WhatsApp, Telegram, Messenger, Skype, E-mail e Telefono (chiamata vocale).

L’utente medio è svogliato, pigro, non gli va proprio di andare lì a compilare il tuo bel modulo, ad inserire un indirizzo email che con molta probabilità non sa neanche com’è scritto e se è corretto. A riprova di questo, ho dei conoscenti che non sanno manco l’email associata al loro account Android, pur smanettando tutti i giorni con quei dannati smartphone. Ci avevi mai pensato? E se quel contatto fosse un potenziale cliente?

Be’ la soluzione è molto semplice: andargli incontro, tutto qua. Ti basterà aggiungere dei bottoni di contatto Html e Css nel Tuo Sito Web, nella Pagina Contatti, nella Sidebar, nel Footer, nell’Header, ovunque ti piaccia insomma, e l’utente ti contatterà in un lampo e sulla App a lui più congeniale. E pensa, non occorre installare alcun plugin, che, come saprai, sommato ad altri plugin non va che ad appesantire di risorse css e javascript il Tuo Sito, inficiandone le prestazioni.

Ecco come sarà l’anteprima:

 

 

Icone Personalizzate

Il primo step per creare i nostri Bottoni di Contatto è scaricare delle icone personalizzate che poi successivamente fungeranno da bottoni, ossia da link cliccabili collegati all’app.

Uno dei siti che ho utilizzato spesso per i miei progetti è Flaticon.com, che ti consente di scaricare gratuitamente il set di icone che sceglierai. Eccoti il link diretto per la ricerca “icons social media”. Di ogni icona puoi scegliere uno stile minimal, o classic, o bold, fai tu. L’importate, se vuoi seguire il mio consiglio, è mantenere una certa coerenza di stile tra le varie icone e, se ti è possibile, sceglierle in linea col tema Tema Grafico del Tuo Sito Web.

Fatta la scelta, clicca su “Add to collection”, come nella foto che segue:

Quando avrai terminato con le tue scelte, ecco come ti apparirà la selezione, cliccando sul menù “Collections” in alto a destra:

 

Prima di scaricare le icone probabilmente ti inviterà a registrare un account free (anche tramite account Google) ma io ho scaricato le icone senza questo passaggio. Infine ti chiederà di scegliere il formato, io ho scelto il png da 64 pixel.

Ti piacciono le icone in stile minimal che vedi in foto? Eccoti il link al file zip per averle subito: Scarica il file zip delle icone

[Torna all’indice]

Upload e Url assoluti

Adesso è il momento di caricare le foto sul server e recuperare gli URL (percorsi univoci) delle icone. Questo passaggio è propedeutico alla successiva creazione dei Bottoni di Contatto Html e Css. Vai su Menù Libreria e clicca su Aggiungi Nuovo:

 

Puoi scegliere se caricarle tutte insieme o una alla volta, purché in un file a parte (va bene anche il blocconote di Windows) riporti i singoli url. Cliccando sull’immagine già caricata, WordPress abiliterà la funzione “Copia l’url negli appunti”.

[Torna all’indice]

Codice Html

Ed eccoci finalmente al codice html. Ho creato una semplice unordered list (ul) al cui interno, nell’elemento <li>, ho piazzato il link all’app di contatto e la relativa icona. Quest’ultima tramite l’url di cui sopra. Per ogni App ti basterà semplicemente inserire i relativi collegamenti, che si tratti di username o numeri di cellulare o id messenger/facebook, così come è scritto nei commenti al codice.

Non usi Skype o qualche altra App? Ti basta eliminare la relativa riga, da <li> a </li>.

Come reperire le informazioni da inserire

• WhatsApp: inserisci dopo wa.me/ il tuo numero di cellulare, senza spazi vuoti
• Telegram: inserisci il tuo n. di cellulare o in alternativa l’username associata al tuo account. Scopri come.
• Messenger: inserisci l’ID associato al tuo profilo o pagina. Scopri il tuo ID qui.
• Skype: ti basta cliccare l’immagine di profilo. Scopri di più
• Email: semplicemente inserisci dopo mailto: il tuo indirizzo email
• Telefono: dopo tel: inserisci +39 e il tuo n. di cellulare o fisso senza lasciare spazi

[Torna all’indice]

Codice Css

Se sei arrivato fin qui, non ti rimane che fare copia-e-incolla del codice css sottostante. Dove incollarlo? Dai su, so che lo sai già, ma casomai te ne fossi dimenticato no problem: dal menù di amministrazione WordPress, clicca su “Personalizza” e cerca la sezione “Css aggiuntivo”.

La maggior parte dei Temi Grafici è realizzato su sfondo chiaro (lo era anche questo ma con poche righe di css l’ho convertito in dark), ma se il tuo Tema è dark decommenta la parte “background: snow;” (basta cancellare asterischi e slash). Se vuoi cambiare il colore di background cerca “Pick Color” su Google, che ti fornirà uno strumento per il color esadecimale o rgb.

Nella parte Flexbox (scopri come sfruttare Flexbox nel tuo sito per strutturare meglio i contenuti), ho impostato il justify-content col valore “center”, ma puoi anche scegliere tra “space-between” o “space-around”, che distanzieranno tra loro le icone pur mantenendo un layout responsive.

N.b. Purtroppo la visualizzazione delle icone potrebbe cambiare da un Tema Grafico all’altro, e ciò dipende dalle configurazioni che lo sviluppatore ha impostato al Tema (margin, padding, border etc). Eventualmente prova a cambiare i valori di margin e padding in aumento o decremento dei pixel.

[Torna all’indice]

Conclusioni

Ho dedicato a questa mini-guida almeno un paio d’ore e spero che ti possa servire per essere ricontatto dai tuoi utenti/clienti in modo rapido, comodo e tempestivo. Se invece sei proprio un nostalgico dei modulo dei contatto, allora ti interesserà quest’articolo su Come creare un Modulo di Contatto e quest’altro su Come Personalizzare un Modulo di Contatto.

Se hai trovato l’articolo di tuo interesse, allora ti chiedo di condividerlo e se hai dubbi di commentarlo. Alla prossima!