Come creare pulsanti di condivisione per il tuo sito passo dopo passo

I pulsanti di condivisione social sono un elemento indispensabile di ogni sito web. Che si tratti di un blog personale o aziendale, di un portfolio online o di un progetto di eCommerce, i pulsanti social consentono ai clienti di spargere facilmente la voce sui tuoi contenuti su Facebook, Twitter, Instagram o Pinterest. Durante l'implementazione di semplici pulsanti di condivisione social nella tua risorsa web, puoi espandere notevolmente la tua portata e accogliere nuovi clienti che vengono sul tuo sito alla ricerca di contenuti o beni di valore. Il potere dei social network non va sottovalutato in questi giorni. Se un'azienda non può essere trovata su Facebook o Instagram, perde un'opportunità per raggiungere il suo pubblico di destinazione e commercializzare i suoi prodotti e servizi a più persone. Come suggerisce il nome, i pulsanti di condivisione social rendono i tuoi contenuti più condivisibili sul Web. È una pratica comune per gli utenti moderni condividere link ai loro prodotti preferiti sulle loro pagine Facebook. Ogni post sui social può essere raggiunto dai follower con gli stessi interessi e preferenze del tuo cliente.

Inoltre, con i pulsanti dei social media, puoi facilmente trasmettere i tuoi contenuti nei gruppi di social media o alle persone scelte. Il numero di condivisioni sui social media indica i contenuti che le persone trovano più preziosi e coinvolgenti. Quindi, molti marchi stanno lavorando duramente per moltiplicare le condivisioni sui social media e aumentare la consapevolezza del marchio.

Diffondere la voce sui contenuti preferiti può essere facile mentre si fanno semplicemente pochi clic. I pulsanti social consentono ai tuoi clienti di trasmettere link mentre rimangono sul tuo sito web. Nella maggior parte dei casi, si tratta semplicemente di toccare il pulsante di condivisione e selezionare la piattaforma di social media in cui desiderano che appaia il tuo collegamento.

Come creare un pulsante di condivisione passo dopo passo

Internet è pieno di diversi pulsanti di condivisione, il compito principale è scegliere quelli giusti. A volte non capisci nemmeno di quali pulsanti social hai bisogno sul tuo blog. A volte non riesci a trovare pulsanti con un design adatto alle tue esigenze. A volte non riesci a trovare un modo semplice e interessante per implementare i pulsanti di condivisione sul tuo blog. Niente panico! In questo articolo, ti mostreremo come creare alcuni pulsanti di condivisione di base e social.

Corsi di web design

• Corsi di codifica online per l'apprendimento a casa
• Pacchetto Maestria Photoshop completo

Nel caso in cui non desideri occuparti di codice enorme e affollato e personalizzazione dei dettagli complessa, questo tutorial è esattamente per te. Anche i principianti di HTML lo troveranno facile da seguire. Allora, allacciate le cinture e iniziamo!

Passo 1

La prima cosa che dovresti fare è aprire il tuo file HTML e incollare il codice qui sotto

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
o
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Passo 2

Ora crea un file js che contenga tali informazioni:

Ecco fatto :) Un metodo molto semplice per tenere traccia delle statistiche del clic sul pulsante di condivisione che si trova direttamente nella pagina di condivisione. Questo problema è stato risolto con l'aiuto di una tabella nel database e un semplice ajax:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

Questo script ottiene un ID dall'URL, aggiunge l'etichetta alla tabella e/o aumenta il contatore di uno per uno specifico social network. È una soluzione semplice per i pulsanti di condivisione. Puoi facilmente cambiare l'aspetto dei tuoi pulsanti tramite CSS, puoi progettare i tuoi pulsanti in Photoshop e usarli qui. Puoi fare quasi tutto!

Ovviamente, questo esempio è un po' primitivo, ma è un ottimo punto per iniziare a creare i tuoi fantastici pulsanti di condivisione. Provaci!

I social network più diffusi ti consentono di generare pezzi di codice personalizzati che possiamo incorporare in post o pagine di siti Web per consentire alle persone di trasmettere i loro contenuti preferiti. Facebook e Twitter sono due dei social network più popolari che supportano le rispettive funzionalità. Vediamo come integrare tali pulsanti social nel tuo sito.

Come aggiungere il pulsante Condividi di Facebook

I pulsanti di condivisione di Facebook consentono ai tuoi clienti di condividere link che indirizzano a post o offerte sul tuo sito Web con un testo personalizzato.

Per aggiungere questo pulsante al tuo sito web, devi prima andare su questa pagina.

Ora diamo un'occhiata a cosa significano alcuni dei campi nella pagina di configurazione.

• URL to Like - questo campo aggiunge la pagina del sito che vogliamo condividere su Facebook.
• Larghezza: qui viene impostata la larghezza del pulsante.
• Verbo da visualizzare: qui possiamo selezionare il testo nel pulsante "Mi piace" o "Raccomando".
• Combinazione di colori: qui puoi scegliere il design del pulsante per i siti chiari o scuri.
• Carattere: seleziona il carattere per le etichette dei pulsanti.

Dopo aver selezionato le impostazioni, trova il pulsante "Ottieni codice" e fai clic su di esso. Successivamente verrà visualizzata una finestra con il codice, anch'esso da inserire in due fasi:

Inserisci il codice subito dopo il tag < body >.

Codice per la visualizzazione del pulsante:

Incolla questo codice dove dovrebbe essere visualizzato il pulsante di facebook:

Come aggiungere il pulsante Condividi su Twitter

Durante l'aggiunta di pulsanti di condivisione di Twitter al tuo sito Web, ci sono diverse cose che gli sviluppatori di Twitter consigliano di tenere a mente:

• Se un utente non ha effettuato l'accesso al proprio account Twitter, gli verrà chiesto di accedere per modificare il tuo messaggio.
• Il tweet si collegherà alla pagina web che una persona ha visitato. Un utente può sentirsi libero di modificare il messaggio del tweet nel modo desiderato.
• Dopo aver fatto clic su "Tweet", la finestra popup rivelerà un elenco di account correlati su Twitter. Un utente può decidere dove seguirli o ignorarli.
• Non c'è limite al numero di volte al giorno e lo stesso utente può twittare qualcosa sulla timeline.

Per aggiungere il pulsante di condivisione di Twitter, procedi come segue:

• Vai su publish.twitter.com e tocca i pulsanti di Twitter.
• Scegli il tipo di pulsante di condivisione di Twitter che desideri aggiungere al tuo sito.
• Modifica il Tweet e il messaggio che conterrà menzionando quale @account vorresti menzionare.
• Una volta fatto, copia e incolla il codice nel tuo sito.

Questo è praticamente tutto. Ci auguriamo che troverete utile questa guida. La cosa migliore è che non dovresti avere competenze di codifica approfondite per aggiungere pulsanti di condivisione social al tuo sito web. I generatori di codice automatizzati ti forniscono soluzioni pronte per l'uso che puoi regolare, copiare e incollare in modo intuitivo nell'HTML del tuo sito web.