Come Aggiungere le Icone Sociali sul tuo Blog

Le icone sociali o social media icons sono delle immagini cliccabili che linkano ai nostri profili sociali. Sono utili per chi desidera rimanere connesso con gli amici del blog anche su altre piattaforme come Facebook, Pinterest etc.

Se pensate che sia arrivato il momento di aggiungere un set di icone sociali al vostro blog, ecco alcuni passi preliminari:

• Scaricate sul vostro computer le icone sociali
• Caricatele su Photobucket {o un altro programma di hosting} in modo da avere il link diretto dell’immagine {Direct Link}
• Aprite un documento Word

Io ho deciso di inglobare le mie nell’immagine di intestazione del blog ma la maggior parte dei siti le mostrano nelle colonne laterali come primo o secondo gadget. Vediamo questo processo più in dettaglio:

1.  Scegli le Icone da Usare

Trova delle icone sociali che ti piacciono e scaricale sul tuo computer.

Puoi scaricarle gratuitamente a questi indirizzi o visitare la mia board Social Bookmarking Icon Set per trovare un set adatto al tuo blog.

·        33 Beautiful Social Media Icon Sets For Designers And Bloggers

·        The Best Social Media Icons All In One Place

·        Pantone Colour of the Year Social Media Icons

Se in formato zip, scarica il file ed estrai le icone. 

 

 

 2.  Carica le Icone

Carica una ad una le icone sul tuo profilo di hosting: Photobucket, Flickr, Imageshack o sul tuo blog di prova {tutorial per aprirlo}.

3.  Copia il Codice in Word

Nel tuo documento Word copia il codice qui sotto tante volte quante sono le icone che intendi caricare sul blog, separate da uno spazio {per evitare confusione}.

<a href="Indirizzo Web"><img src="Link Diretto Immagine" /></a>

Indirizzo Web... è l’indirizzo di ogni vostro profilo come facebook, twitter, pinterest.

Per esempio, il mio profilo Pinterest è http://pinterest.com/topogina/, il mio profilo Facebook è www.facebook.com/cecrisicecrisi

EDIT 04/04/2013 in risposta a Francesca

Per quanto riguarda l’icona sociale collegata al proprio indirizzo email, basta inserire tra virgolette alla voce Indirizzo Web la propria email preceduta da mailto: Nel mio caso il codice sarebbe mailto:topogina1977@gmail.com

Link Diretto Immagine...é il link di ogni immagine

Se usate Photobucket,  vi basta passare il mouse sulla foto fino a far apparire una rotellina in alto a destra. Selezionate Get Links e copiate il  secondo codice {Direct Link} – cliccando il codice, questo si copierà automaticamente.

4.  Compila i Codici

Torna su Word  e modifica i codici uno alla volta.

Per il momento lascia uno spazio tra un codice e il seguente ma ricordati di rimuoverlo prima di copiare l’intero codice sul blog.

5.  Incolla il Codice in Gadget

Una volta tolto lo spazio fra un codice e l’altro, copia l’intero codice in un gadget html. {Istruzioni passo passo nella sezione Blogging  Tutorial - Come Aggiungere un Banner nella Sidebar }

 Ecco come ho fatto io:

1.     Ho scaricato il set rosa offerto da Noisette sul mio computer, estratto le singole icone da WinZip e salvate in una cartellina che ho chiamato Icone Sociali.

2.     Ho caricato le icone su PhotoBucket. Usa il mio account se vuoi scaricare le Icone Sociali Fuxia.

3.     Nel mio documento Word, ho copiato uno ad uno i codici diretti delle icone e incollati nello spazio giallo. Poi ho incollato gli indirizzi web dei miei profili sociali nello spazio celeste.

<a href="Indirizzo Web"><img src="Link Diretto Immagine" /></a>

Ecco il mio codice senza il link di Twitter {che mi ha bannato il giorno dopo che mi ero iscritta...}:

<a href="http://www.facebook.com/cecrisicecrisi"><img src="http://i1265.photobucket.com/albums/jj519/topogina/Icone%20Sociali%20Fuxia/Facebook-Honey-Suckle.png" /></a>

<a href="http://pinterest.com/topogina/"><img src="http://i1265.photobucket.com/albums/jj519/topogina/Icone%20Sociali%20Fuxia/Pinterest-Honey-Suckle.png" /></a>

<a href="http://feeds.feedburner.com/CCrisiCCrisiGuidaAllaSopravvivenza"><img src="http://i1265.photobucket.com/albums/jj519/topogina/Icone%20Sociali%20Fuxia/Rss-Honey-Suckle.png" /></a>

<a href="http://www.flickr.com/photos/topogina/"><img src="http://i1265.photobucket.com/albums/jj519/topogina/Icone%20Sociali%20Fuxia/Flickr-Honey-Suckle.png" /></a>

4.     Dopo aver eliminato lo spazio tra i codici, ho copiato tutto in un gadget HTML/JavaScript e cliccato su Salva.

Ed ecco come appare il set fuxia sul mio blog:

 

Avete trovato questo tutorial fattibile? Se lo seguite, lasciatemi il link alla vostra home page così vengo a seguirvi sulle piattaforme sociali.

Avevate già installato le icone sociali sul vostro blog? Avete qualche suggerimento da condividere con noi?

Come al solito vi chiedo di far circolare questo post su Facebook, Google Plus o Twitter. Grazie!  Alex