Come spesso mi piace fare, ti mostrerò 2 tutorial per creare il tuo link di Whatsapp in codice e l’altro tramite un plugin per il sito in CMS come WordPress.

Whatsapp per il sito web in codice :

Incominciamo con quello che più mi piace ! Il codice . Se cerchi il plugin per WordPress, puoi saltare questa parte .

Utilizzeremo la libreria Font Awesome per creare l’icona, quindi come primo step, installiamo la libreria nel nostro progetto! Se non dovessi saperlo fare, puoi leggere l’articolo in cui parlo dell’icona di Instagram, in cui spiego passo passo il procedimento per installarla in maniera rapida.

Bene, adesso che hai tutto installato, procediamo con la generazione della nostra icona nel TAG “<a ></a>” .

<a href=""><i class="fab fa-whatsapp"></i></a>

Che tu ci creda o meno, abbiamo quasi finito! Adesso basterà inserire il link API di Whatsapp seguito dal tuo numero di telefono nell’ “href” ,

<a href=”https://api.whatsapp.com/send?phone=tuo-numero-di-whatsapp“><i class=”fab fa-whatsapp”></i></a>

Quindi:

<a href="https://api.whatsapp.com/send?phone=393896312092"><i class="fab fa-whatsapp"></i></a>

IMPORTANTE:

• Non inserire il “+” d’avanti al “39” ma scrivilo proprio come nell’esempio
• Il numero deve chiaramente essere registrato su whastapp

Se volessi inserire anche un messaggi pre-impostato per il mittente, potrai aggiungere “&text=” e scrivere il tuo messaggio, chiaramente per la spaziatura dovrai usare “%20” :

https://api.whatsapp.com/send?phone=393896312092&text=Ciao%20voglio%20più%20info

Adesso non ti resta che inserire l’icona dove più ti piace e goderti il collegamento all’app di Whatsapp.

Plugin per WordPress :

Vediamo subito come avere Whatsapp per il sito web attraverso il plugin per WordPress !

Ci sono davvero tanti plugin su WordPress, ma quello che mi è piaciuto molto e utilizzo spesso è Join.chat , davvero semplice da configurare e non ho mai avuto nessun tipo di conflitto con i vari temi.

Installiamolo scaricandolo attraverso il link o direttamente da WordPress e attiviamolo.

Adesso vedrai nelle impostazioni il nome del plugin appena installato :

Clicchiamo sulla voce Join.chat e settiamo la nazione cliccando sulla bandierina nel primo campo, e tutti gli altri campi utili come il delay per l’apparizione della call to action (se la volessi impostare) . Potrai anche sostituire l’icona con un’altra immagine, e decidere dove visualizzare l’icona ( DX o SX ) :

C’è qualche pagina dove non vuoi che appaia l’icona di Whatsapp? Ti basterà andare nell’editing della pagina interessata , e vedrai sulla destra l’impostazione di Join.chat, per nascondere l’icona, clicca su “hidden” (occhio sbarrato ) :

Adesso non ti resta che goderti il link di Whatsapp sul tuo sito web !

È stato utile l’articolo ? Lasciami un commento

L'articolo Chat Whatsapp per il sito Web proviene da Alessandro Albergo.

Il tutto consiste nell’integrare il un “plugin”, o meglio snippet di codice generato da Facebook stesso, nella pagina web che desideri oppure in tutte le pagine.

Attraverso il Messenger della tua pagina Facebook  che apparirà sul sito web, potrai iniziare una conversazione con gli utenti o clienti senza che loro lascino il sito. A tua volta sarai in grado di rispondere alla chat attraverso l’applicazione sul tuo Smartphone ( Business Suite Apple – Business Suite Android ) o attraverso il sito di Facebook.

Che si tratti di un sito web “statico”, “dinamico” o un CMS (come per esempio WordPress), il procedimento e il risultato sarà lo stesso.

Per prima cosa quello che ti serve, sarà una pagina Facebook , si solo per chi ha una pagina (azienda, blogger, artista ecc..) ed è amministratore della stessa, può usufruire di questi servizi.

Nota importante : Per procedere, il tuo sito web deve avere il certificato SSL , ovvero il protocollo “https://” .

Finite le premesse iniziamo subito con la generazione della nostra chat di Facebook Messenger sul sito web !

Effettua l’accesso a Facebook e vai sulla pagina che gestisci ( non il tuo profilo, ma la pagina ) .

Adesso clicchiamo “Impostazioni” , come vedi è l’ultima voce della sidebar che trovi sulla sinistra.

Adesso vedrai cambiare le voci nella sidebar, bene clicchiamo “Messaggi” :

Sulla schermata di destra ci saranno tante voci riguardanti il settaggio dei messaggi, verso la fine (esattamente la terzultima voce) ci sarà “Aggiungi Messenger al tuo sito web” :

Clicchiamo su “Inizia” !

Ora inizierà la configurazione guidata dove dovrai settare i messaggi automatici e copiare il codice che Facebook di fornisce per integrare la chat di messenger sul sito web :

Divertiti come vuoi, puoi cambiare il colore, la prima frase di saluto per avviare la conversazione e personalizzare le FAQ con risposte automatiche.

Per ottenere il plug-in, ti basterà cliccare su configura e seguire i 4 steps, dove dovrai selezionare la lingua e copiare il codice che ti verrà dato :

Adesso che abbiamo il codice, non ci resta che integrarlo sul nostro sito subito prima della chiusura del TAG “</body>” .

Su WordPress invece, dovrai cliccare su Aspetto -> Editor del tema -> Selezionare il tema in uso :

Dovrai incollare il plug-in subito prima della chiusura del “/body“, proprio dove vedi la linea blu nell’immagine esempio .

Adesso dovresti vedere sul tuo sito web la chat a comparsa, potrai anche decidere dall’impostazione della Pagina Facebook di far aprire in automatico la conversazione oppure solamente al click sull’icona.

Per la visuale Desktop dovresti vedere qualcosa del genere :

Per il mobile invece : 

Ottimo, adesso se hai seguito tutti i passaggi avrai la tua chat pronta sul sito web !

È stato utile l’articolo ? Lasciami un commento

L'articolo Facebook Messenger sul tuo sito web proviene da Alessandro Albergo.

Sicuramente potevo utilizzare un’immagine “.png” , ma avrei dovuto impiegarci più tempo per adattare la dimensione su ogni dispositivo. Quindi come quasi tutti gli sviluppatori che utilizzano le icone, ho deciso di crearla con una libreria e precisamente ho utilizzato “Fontawesome“.

Cosa è Font Awesome ?

Font Awesome è una delle tante librerie per sviluppatori che mette a disposizione le icone in codice, che prendono forma grazie al file di stile “CSS” che il sito rilascia tramite link (CDN).

Molte di queste librerie hanno icone che si possono utilizzare con un piano Free, quindi basta semplicemente registrarsi e includere il link della CDN rilasciato, altre invece hanno un piano PRO (a pagamento e con CDN a parte).

Non preoccuparti perché l’icona di Instagram rientra nel piano Free .

Quindi per iniziare come primo step, installiamo la libreria! Niente di più facile, copiamo la CDN e inseriamola nell’ “head” del nostro progetto con il tag “link”. Per semplificarti il tutto ti condivido qui la CDN da inserire direttamente nell’ “head”, in questa maniera potrai anche non registrarti sul sito.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

Adesso potrai copiare il codice di ogni icona free del sito FA (Font Awesome) e incollarla nel tuo progetto, il risultato sarà appunto l’icona visualizzabile (quella che avrai scelto ). Se dovessi prendere un’icona pro invece, non essendo inclusa nella CDN, non verrà visualizzata sul sito web.

Posso installare Font Awesome su WordPress ?

Certo, come al solito è tutto più rapido, ti basta installare il plugin FontAwesome  e poi inserire il codice nell’HTML del tuo articolo o del Widget.

Per Sapere come utilizzare l’HTML nella pagine puoi vedere l’articolo Immagini Responsive , dove spiego come farlo .

Creiamo l’icona di Instagram con il suo vero colore

Come prima cosa, dopo aver installato la libreria sul tuo sito, cerchiamo l’icona di Instagram nella barra di ricerca del sito FA , semplicemente cercando la parola chiave (che in questo caso sarà “Instagram”).

Io ho usato questa icona:

<i class="fab fa-instagram fa-3x"></i>

Ho aggiunto la classe “fa-3x” che rende l’icona più grande. Ci sono varie misure del css di FA, e vanno da “fa-1x” a “fa-5x”, tu puoi scegliere la misura che più ti soddisfa.

Adesso non ci resta che aggiungere il nostro stile tramite CSS.

Utilizzando WordPress potrai aggiungere lo stile tramite il menù Personalizza -> CSS Personalizzato (Lo stesso menù che usi per modificare la Favicon del tuo sito) oppure installando il Plugin Simple Custom CSS and JS .

Copia e incolla questo codice all’interno del tuo CSS o del Plugin:

.insta-colore{
	color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

Su WordPress :

Inseriamo quindi la classe che abbiamo istanziato con il nome di  “insta-colore” all’interno dell’icona di Font Awesome, quindi il risultato finale nell’ HTML sarà :

<i class="fab fa-instagram fa-3x insta-colore"></i>

Adesso dovresti vedere la tua icona di Instagram con lo stesso colore e sfumature di quella originale.

È stato utile questo articolo ?

Lasciami un commento per qualsiasi domanda o per qualche osservazione

L'articolo Colore icona Instagram Font Awesome proviene da Alessandro Albergo.

Cosa è la barra di progressione lettura ?

È semplicemente una barra di caricamento che trovi di solito in alto o in basso ad un articolo o pagina, che aumenta con l’avanzamento della lettura ( scroll ).

Proprio come quella che vedi su questo articolo in alto!

Perché dovrei averne una ?

In realtà non è niente di obbligatorio, ma una barra di progressione per la lettura, è un piccolo aiuto e un invito a scorrere la pagina fino in fondo e motiva il visitatore a leggere l’articolo fino in fondo.

Quindi oltre ad essere un’animazione carina, è anche un incentivo per l’utente a leggere tutto l’articolo e quindi restare più tempo sul sito web.

Sapevi che i visitatori di un sito impiegano solo un paio di secondi per decidere se rimanere sul sito o abbandonarlo ? È difficile mantenere alto l’interesse del lettore e catturare la sua attenzione, specialmente se si tratta di articoli lunghi.

Bene, quindi adesso che sappiamo i vantaggi di una barra di progressione lettura, possiamo scoprire come crearne una per il nostro sito web.

Barra di progressione lettura in codice

Qui ti spiegherò come creare la progress bar lettura in codice da inserire sul tuo sito web, se tu dovessi avere un sito in wordpress, potrai saltare questa parte e vedere il prossimo tutorial e i plugin da scaricare.

Vediamo subito il codice da inserire per il nostro sito web:

Il primo codice sarà in HTML e sarà semplicemente un”<div>” con una classe e un “ID” che sarà richiamato dal codice in Javascript

<div class="progressbarlettura" id="progressbarlettura"></div>

Come vedi sia la classe e sia l’ID hanno lo stesso nome per convenzione e per rendere tutto più semplice.

Supponiamo che hai un tag “article” dove all’interno hai tanti TAG  “p” e “h1 ” , bene ora quello che dobbiamo fare, sarà inserire quel codice HTML subito prima del TAG article, come in questo esempio:

<div class="progressbarlettura" id="progressbarlettura"></div>

<article>
	<h1>Titolo Articolo</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic doloribus nisi repellat officia voluptas, cum praesentium, temporibus distinctio quos. Facilis suscipit, consectetur labore optio quia beatae magni dolores iusto alias iste, in repellat adipisci aliquid cumque earum asperiores. Eligendi sint aperiam facilis quos</p>
</article>

Ora creiamo il foglio di stile CSS , e inseriamo il codice per la nostra progress bar :

.progressbarlettura {
    background: yellow;
    position: fixed;
    top: 0;
    bottom: auto;
    left: 0;
    width: 0%;
    height: 5px;
    z-index: 1000;
}

Come vedi il codice, creerà la Barra di progressione lettura di colore giallo, puoi cambiare colore inserendo il “codice colore” al posto di “yellow”.

Vediamo il codice in Javascrip da incorporare nel nostro sito web:

let prog = document.getElementById('progressbarlettura');

let body = document.body,
    html = document.documentElement;

let height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

const setProgress = () => {
   let scrollFromTop = (document.documentElement.scrollTop || body.scrollTop) + html.clientHeight;
   let width = scrollFromTop / height * 100 + '%';

   console.log('scroll', html.clientHeight, body.scrollTop);

   prog.style.width = width;
}

window.addEventListener('scroll', setProgress);

setProgress();

Bene, adesso che avrai importato tutto, potrai vedere la tua barra di progressione lettura visibile e animata durante lo scorrimento del tuo articolo !

Barra di progressione lettura con WordPress

Vediamo come poter avere la nostra barra di progressione lettura in maniere davvero semplice, con l’utilizzo dei plugin per WordPress.

Il primo plugin che possiamo utilizzare è Worth the Read mentre il secondo è Reading Progressbar .

Possiamo utilizzare uno dei 2, sono davvero molto simili ed è possibile modificare il colore e lo stile della barra di caricamento in entrambi.

Se dovessi installare Worth the Read, troverai una volta attivato il plugin, la voce nel menù della tua Daschboard altrimenti con Reading Progressbar verrà aggiunta la voce nel menù delle impostazioni della Dashboard.

Worth The Road :

Reading Progressbar :

Forse Worth the Read è più completo, ma in realtà io punterei più su una scelta di compatibilità.

Prova ad installare uno dei due, se non ci dovessero essere errori e riesci a visualizzare tutte le immagini nei tuoi articoli, allora potrai tenerlo installato, altrimenti potrai utilizzare l’altro .

Che ne pensi ? È stato utile questo articolo ?

Lasciamo un commento se non vai troppo di fretta

L'articolo Barra di progressione lettura Articolo e pagina web proviene da Alessandro Albergo.

Cosa è la Favicon di un sito web ?

La Favicon, è quel logo che vedi sulla tab del tuo browser quando navighi su un sito web :

Perchè dovresti averne una ?

Perchè le favicon non sono direttamente responsabili dell’ottimizzazione dei motori di ricerca; tuttavia sono indirettamente responsabili perché sono uno strumento importante per migliorare il posizionamento sui motori di ricerca. Una favicon ( icona ) ti offre un vantaggio rispetto ad un sito web che non ne utilizza una.

Quindi ora che abbiamo capito l’importanza, vediamo subito come procedere per poterne creare una in maniere semplice:

Come primo passo, procurati il tuo logo, e ridimensionalo con le dimensioni 32×32 px (dimensione consigliata ).

Ora inserisci la favicon  “logo.png” (il nome non è importante) in una nuova cartella (che chiameremo IMG per convenzione) all’interno del progetto del tuo sito.

Adesso andiamo ad inserire nel tag “<head></head>” del tuo sito (che di solito è la prima parte che dovresti trovare nel codice ) la seguente stringa:

<link rel="icon" type="image/png" href="/IMG/logo.png">

Bene adesso ricaricando la pagina dovresti vedere la tua icona su ogni tab che raffiguri il tuo sito web.

Invece come inserisco la Favicon per il sito web in WordPress ?

Niente di più facile! Andiamo sul nostro sito in WordPress , effettuiamo l’accesso e cliccando personalizza, vedremo la voce denominazione del sito all’interno del menù, che ci permetterà di impostare la nostra favicon .

Ora non ti resta che caricare il logo da te creato e ridimensionarlo nel passaggio successivo (se dovesse esserci il bisogno) con WordPress .

Come vedi per WordPress è davvero molto facile! Ora potrai impostare la tua icona personalizzata sul tuo sito web!

È stato utile l’articolo?

Lasciamo un commento per farmelo sapere

L'articolo Aggiungere Favicon (icona – logo) sul sito web proviene da Alessandro Albergo.

Ciao, oggi ho deciso di condividere i vari metodi html personalizzati, per creare un link di email sul proprio sito .

Per quanto io preferisca (come già accennato in qualche articolo scorso ) , il form di contatto rispetto il link email, penso che conoscere questi metodi potrebbe essere sempre utile.

Attributo MAILTO

L’attributo “mailto” , è la parola chiave che puoi scrivere all’interno di un “ href ”, creando link collegato ad un indirizzo e-mail per far si che l’utente, cliccandoci sopra, possa aprire il proprio client di posta per scrivere una mail all’indirizzo specificato nel link stesso.

ES:

<a href="mailto:iltuoindirizzoemail@email.it">Invia email </a>

Come vedi, in questa maniera andiamo a creare un link che al click, il browser creerà una nuova email con l’indirizzo specificato come destinatario (in questo caso iltuoindirizzoemail@email.it).

Quindi per creare un semplice link di invio email, ti basterà copiare e incollare quel codice nell’ html sostituendo “iltuoindirizzoemail@email.it” con la tua email.

Per WordPress potrai scrivere anche semplicemente mailto:iltuoindirizzoemail@email.it all’interno della generazione link:

Come vedi in WordPress non hai bisogno di scrivere il codice, ti basta sottolineare la parola e fare click sul bottone link (quelle 2 parentesi con il trattino al centro, che in realtà dovrebbe essere una catena ).

Abbiamo visto come creare un invio al click semplice, ma se volessimo personalizzarlo ?

Niente di più facile!

Aggiungere un secondo indirizzo:

Per esempio, se volessimo inviare l’email a più indirizzi, ti basterà aggiungere una virgola dopo il primo e scrivere il secondo :

<a href="mailto:iltuoindirizzoemail@email.it, ilmiosecondoindirizzoemail@email.it">Invia email </a>

Aggiungere un indirizzo in conoscenza:

Per inserire un indirizzo in conoscenza (CC) ci basterà scrivere subito dopo la prima email il punto interrogativo (?) seguito da “cc=” e l’indirizzo:

<a href="mailto:iltuoindirizzoemail@email.it?cc=ilmiosecondoindirizzoemail@email.it">Invia email </a>

Posso creare l’oggetto ?

Certamente! In questo caso scriveremo la solita email nel link, seguita da “&subject=Quello che ci voglio scrivere”, es:

<a href="mailto:iltuoindirizzoemail@email.it&subject=Preventivo sito web">Invia email </a>

Chiaramente potrai combinare più soluzioni, come per esempio inviare l’email html a più persone con l’oggetto preimpostato e un indirizzo in conoscenza:

<a href="mailto:iltuoindirizzoemail@email.it, ilmiosecondoindirizzoemail@email.it?cc=emailcc@conoscenza.it&subject=Preventivo sito web">Invia email </a>

È stato utile l’articolo ?

Lasciamo un commento per farmelo sapere

L'articolo Link email in HTML proviene da Alessandro Albergo.

Ultimamente, dopo aver visto alcuni video da cui ho preso ispirazione, ho pubblicato un post su Instagram in cui provavo a replicare il logo di Netflix in codice html e css.

Il risultato finale del logo era davvero molto simile a quello originale del famigerato marchio cinematografico, infatti ne sono rimasto così sodisfatto da creare un video e ora condividere tutto il necessario per poterlo riprodurre.

PS: Per visualizzare il post pubblicato su instagram clicca qui.

Bene, come al solito ho cercato di ridurre tutto in pochi passaggi e rendere la guida facile facile, quindi vediamo subito come creare il codice html e css per riprodurre appunto il logo di Netflix.

Iniziamo con l’html, ti basterà creare un file con il blocco note, inserire bil codice riportato e salvarlo con estensione html (nomefile.html) dentro una cartella:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Netflix Logo</title>
</head>

<body>
    
    <div class="logo">
        <div class="netflix">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <h3>Netflix</h3>
    </div>

</body>

</html>

Adesso all’interno della stessa cartella, creiamo un altro dile chiamato style.css e incolliamoci il seguente codice:

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: centet;
    align-items: center;
    background: black;
    height: 100vh;
}

h3{
    color: white;
    position: absolute;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 60px;
    text-transform: uppercase;
    font-family: arial;
    letter-spacing: 12px;
    font-weight: 800;
}

.netflix{
    position: relative;
    width: 350px;
    height: 500px;
}

.netflix span{
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
}

.netflix span:nth-child(1){
    background: #b00612;
    left: 0;
}

.netflix span:nth-child(2){
    background: #e50810;
    left: 0;
    transform-origin: top;
    z-index: 1;
    transform: skewX(25deg);
    box-shadow:  0 0 40px rgba(0,0,0,1);
}

.netflix span:nth-child(3){
    background: #b00612;
    right: 0px;

}

Salviamo tutte le modifiche. Ora aprendo il tuo file .html con Chrome o con Firefox, vedrai il logo creato!  Ricordati di lasciare i file in una cartella, altrimenti dovrai cambiare il path del foglio di stile (.css).

Ti è piaciuto questo articolo ?

Lasciami un commento per farmelo sapere

L'articolo Logo Netflix in codice Html e CSS proviene da Alessandro Albergo.

Per quanto può sembrare banale creare un link di ancoraggio per alcuni, per altri può essere un vero punto interrogativo, soprattutto se abituati ad usare Page Builder per siti web come Elementor, WpBakery ecc…

Esempio: clicca qui

Per questo oggi voglio togliere ogni dubbio e rendere di facile comprensione il funzionamento di un ancoraggio nelle pagine web.

Di solito mi piace dare 2 soluzioni per lo sviluppo in WordPress, quella in codice e quella con l’utilizzo di plugin, ma essendo una cosa così semplice da imparare, ti dirò come farlo in codice e senza installare altri programmi che potrebbero appesantire il tuo sito web.

Per prima cosa sappi che tutto avviene in automatico, attraverso l’utilizzo del semplice html.

Che tu stia utilizzando un CMS come WordPress oppure no, il metodo sarà sempre lo stesso per tutte le pagine html, e quindi per tutti i siti web.

Ma poche chiacchiere e più fatti!

Vediamo come procedere:

Su WordPress nella pagina in cui vogliamo inserire l’ancoraggio, basta sottolineare la parola con la quale vogliamo eseguire l’azione e cliccare inserisci/modifica link ed inserire dove di solito scriviamo l’ URL, l’hashtag seguito da “testancoraggio” es: #testdiancoraggio (chiaramente puoi scegliere tu la parola).

PS: Con il nuovo edito di WordPress, funziona alla stessa maniera, ma se ti piace visualizzare il tuo blocco editor come l’immagine esempio, basta cliccare Blocco -> Visualizzazione Classica.

Adesso inseriamo l’id nel tag della parola o immagine che vogliamo raggiungere cliccando il link (#testancoraggio) creato prima.

Per farlo, sottolineiamo la nostra parola di arrivo, clicchiamo su visualizzazione -> Modifica come HTML

Aggiungiamo quindi lo stesso nome del link all’id, ma senza l’hashtag:

id="testancoraggio"

Bene a questo punto non ti resta che salvare e goderti il tuo ancoraggio funzionante e Self-made !

PS: A volte su wordpress conviene salvare la modifica ID rimanendo nella visuale html, perché potrebbe non salvarlo correttamente. Una volta aggiornato, potrai ritornare nella visualizzazione classica:

Utile?

L'articolo Link di ancoraggio proviene da Alessandro Albergo.