Passa ai contenuti principali

Post in evidenza

Snack al Burro d'arachidi - PB energy bites

Tutorial Icone Social Network: Come inserirle in 5 passi su Blogger



Tutorial Icone Social Network: Come inserirle in 5 passi su Blogger

Quando si apre un blog è sempre bene inserire dei link alla propria pagina Facebook, Twitter, Instagram e degli altri social network che si utilizzano. Questo permette di aumentare i vostri fan sui diversi social network e quindi di far tornare le persone al vostro blog quando pubblicate un contenuto sui social. Vediamo come si può fare su Blogger in modo semplice e rapido.

In questo tutorial vi spiegherò come si possono inserire i link alle proprie pagine social attraverso delle icone. Naturalmente potrete scegliere lo stile delle icone che più si addice al vostro blog e inserire il collegamento solo ai social network che utilizzate. Vediamo quindi come possiamo inserire le icone per i social network con relativo link alle pagine in 5 passaggi:

  • 1) Scegliere un set di icone dei social network


  • Per prima cosa ci serve un bel set con un icona per ogni social network che vogliamo inserire. Chi è bravo con la grafica può crearle, usando un qualunque programma su pc o con servizi online di grafica come ad esempio Canva. Salvate le immagini in png in modo che abbiano una dimensione di 72x72 pixel. Molto più semplice è però scaricare un set di icone social già pronto: potete trovarne diversi online, vi suggerisco il sito Carrie Loves che offre set da 30 icone in 100 colori diversi scaricabili gratuitamente come file zip. Mi raccomando, scegliete le icone in base alla grafica del vostro blog in modo da ottenere un risultato armonioso.

  • 2) Caricare online le icone dei social network scelte


  • Come secondo passo, carichiamo online le icone che abbiamo deciso di usare. Su blogger il modo più conveniente è andare direttamente su Picasa. Troverete probabilmente già un album con le foto del vostro blog. Potete caricare le icone lì o creare un album differente. Caricate solo le icone che effettivamente vi servono per i vostri social network. Molto probabilmente non avrete bisogno di icone per Vimeo o Periscope se non li usate; Facebook, Twitter, Pinterest e Instagram potrebbero essere sufficienti. Potete utilizzarre anche un qualsiasi altro servizio di web hosting per immagini. Ricordatevi di segnarvi gli indirizzi web delle singole foto.

  • 3) Modificare il codice HTML necessario



    A questo punto andiamo al codice HTML necessario per caricare l'immagine dell'icona social e inserire il link alla pagina social. Vi consiglio di scrivere prima il codice su un file word, cosi potrete anche salvarlo. Per ogni social network che avete dovete copiare e incollare nel vostro file il codice seguente:

  • <!-NOME SOCIAL->
    <a href='LINK PAGINA' target='_blank'><img alt='NOME SOCIAL' src="LINK IMMAGINE" width= "32" height="32" title='NOME SOCIAL'/></a>

    Se volete potete usare anche la versione più semplice senza i campi ALT e TITLE:
    <!-NOME SOCIAL->
    <a href='LINK PAGINA' target='_blank'><img src="LINK IMMAGINE" width= "32" height="32"/></a>

    Sostituite a NOME SOCIAL Facebook, Twitter, ecc. Al posto di LINK PAGINA mettete l'indirizzo che compare nel browser della vostra pagina profilo di Facebook, Twitter o Instagram. Sostituite LINK IMMAGINE con l'indirizzo della foto che avete caricato su Picasa (o sul vostro sito di hosting preferito). Su Picasa dovete entrare nella foto contenente l'icona, cliccare con il tasto destro del mouse e scegliere "copia indirizzo immagine". Dovreste ottenere un indirizzo che termina con .png, ossia un formato immagine. Per ogni social network dovrete ottenere un "paragrafo" di codice HTML come quello sopra.


    Ad esempio, questo è il codice delle prime 3 icone social di Melting Pot Reloaded, che ho usato nella sezione About Me che vedete qui nel blog nella barra laterale a sinistra:
    <!-facebook->
    <a href='https://www.facebook.com/meltingpotreloaded/' target='_blank'><img alt='facebook' src="https://lh3.googleusercontent.com/-zIyee2h56YE/VeW9HZR6faI/AAAAAAAAA7A/OS0brg_STxc/s32-Ic42/facebook.png" width= "32" height="32" title='facebook'/></a>
    <!-twitter->
    <a href='https://twitter.com/MeltingPotR/' target='_blank'><img alt='twitter' src="https://lh3.googleusercontent.com/-rALBPsvNiCA/VeW9IitYb-I/AAAAAAAAA7c/byZfNigE1WU/s32-Ic42/twitter.png" width= "32" height="32" title='twitter'/></a>
    <!-Google+->
    <a href='https://plus.google.com/+MeltingpotreloadedBlogspotIt/posts' target='_blank'><img alt='google+' src="https://lh3.googleusercontent.com/-zESOm9W-VX8/VeW9HUTQjfI/AAAAAAAAA60/T0hJ2hyPLGM/s32-Ic42/google%25252B.png" width= "32" height="32" title='google+'/></a>

  • 4) Inserire il codice HTML dove vogliamo inserire le icone dei social network


  • Potete inserirlo nella sezione dove vi presentate oppure andate su layout > aggiungi un gadget > HTML/JAVA SCRIPT. Incollate il codice e salvate. Potete quindi spostare il gadget nella posizione che preferite. Si può anche aggiungere un titolo come "I miei social", "Seguimi sui social" o quello che preferite.

  • 5) Controllare il risultato


  • A questo punto il vostro lavoro è quasi concluso. Dovete solo salvare le modifiche nel layout e cliccare su "visualizza blog". Vi aprirà la pagina del blog aggiornata. Controllate se tutte le icone sono presenti e cliccate su ognuna per verificare che il collegamento funzioni. Se volete delle icone più grandi o più piccole modificate il valore di width e height usando lo stesso numero; non allontanatevi troppo dalle misure originali dell'icona caricata per evitare una bassa risoluzione dell'immagine. Meglio utilizzare direttamente delle icone più grandi caricandole su Picasa se avete necessità di ingrandire le icone (altre misure molto usate sono 48x48 o 72x72 che trovate già pronte nei set che vi ho segnalato al punto 1).

Se è tutto a posto potete festeggiare in previsione dei nuovi follower che avrete presto sui social grazie ai link alla pagina Facebook, Instagram, Twitter, ecc che avete inserito con le vostre icone. Se invece avete qualche problema non esitate a scrivermelo nei commenti.



Commenti

  1. Grazie, di tutti i post sull'argomento, il tuo è l'unico chiaro! Grazie infinite!

    RispondiElimina
    Risposte
    1. Grazieeee! Sono davvero contenta che sia stato d'aiuto a qualcuno!

      Elimina
  2. Finalmente dopo un ora di ricerche cu internet ce l'ho fatta! Grazie per la tua chiara spiegazione!

    RispondiElimina
  3. An impressive share! I have just forwarded this ontyo a coworker who was conducting a little research
    on this. And hee in fact ordered me breakfast because I found it for
    him... lol. So let me rewolrd this.... Thanks for the meal!!
    But yeah, thanks for spending some time too taalk about this
    subjject here on your web site.

    RispondiElimina
  4. Hey, I think your site might be having browser compatibility issues.
    When I look at your blog site in Chrome, it looks fine but when opening
    in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up!
    Other then that, fantastic blog!

    RispondiElimina
  5. Grazie per le dritte..l'unico post che ho trovato chiaro e preciso!! Complimenti!!!

    RispondiElimina
  6. Grazie!! Utilissimo, finalmente grazie a te ci son riuscita :)

    RispondiElimina
  7. Bellissimo post, grazie dei consigli e dell'aiuto indiretto! A me purtroppo le icone non si allineano in maniera orizzontale ma in maniera verticale, in pratica rimangono una sotto l'altra e non una di fianco all'altra. Possono stare così e non è un problema ma le avrei preferiti in orizzontale. Posso fare qualcosa? Ho sbagliato qualcosa?

    RispondiElimina
  8. ciao! cosa esiste in alternativa a picasa?? ora ho le icone in png sul mio pc ma non riesco ovviamente a caricare. grazie :)

    RispondiElimina

Posta un commento

Scrivimi cosa ne pensi! Hai bisogno di un consiglio? Hai un dubbio su qualcosa?

Lascia un commento qui sotto