Come pubblicare le icone dei social media su un blog wordpress.com

SHARING ICONS

Ho una pagina Google+, un account Twitter, ed un negozio Etsy, e voglio pubblicare sulla home page del mio blog wordpress le iconiche con i link alle mie pagine social media, come fare?
Alcuni temi hanno dei widget inclusi già predispositi, ma non il mio. Con questo semplice tutorial ci proponiamo di fornire una soluzione semplice e in pochi passaggi per risolvere questo problema.

Premessa

Posto che le soluzioni possono variare da tema a tema, bisogna anche tener presente che wordpress.com, nella sua versione completamente gratuita non permette l’accesso ai fogli stile css dei temi, potreste quindi aver bisogno di dover acquistare, per una cifra non troppo alta, il Custom Design, ovvero la possibilità di personalizzare l’aspetto del tema, per poter giungere ad un risultato che vi soddisfi pienamente.
Tuttavia per molti è sufficiente invece pubblicare un semplice widget html, eventualmente con l’aiuto di qualche stile in linea, come invece è ammesso anche nella versione gratuita di WordPress.
Il tutorial si rivolge a utenti principianti, ai quali però si chiede di effettuare un copia e incolla del codice html e dei percorsi, gli url, che puntano alle proprie immagini.

STEP #1 – Avete bisogno di icone.

Avete bisogno delle icone dei vostri social network, quindi dei file immagine, possibilmente png, a cui in seguito aggancerete i link alle vostre pagine, le soluzioni sono tre:

  • Disegnare voi stessi le icone (se avete dimestichezza con programmi di grafica quali illustrator o photoshop)
  • Cercarle in rete
  • Acquistarle da uno dei link da noi citati in questo articolo: http://wp.me/pW01G-Ka o da qualche sito di microstock.
Social media icons

Social media icons – set di icone

STEP #2 – Caricate le immagini nella gestione “MEDIA”

Bene, ora che avete le vostre icone dovete pubblicarle sul web, niente di più facile in wordpress.
Dalla tua bacheca vai alla gestione media, lo trovi sulla colonna di sinistra della bacheca alla voce “MEDIA”(FIGURA 1). Lí fate l’upload (Figura 2) di tutte le icone di cui avete bisogno (ma solo di quelle di cui avete bisogno, altrimenti vi trovate pagine di icone nella gestione media).
Quindi andate sulla gestione di ogni singola immagine (Figura 3) cliccando “MODIFICA” su ogni icona, sulla destra della pagina troverete la url dell’immagine (FIGURA 4), ad esempio http://mioblog.wordpress.com/media/24/3/f.png, copiate l’intero percorso, compreso http:// ed incollatelo su un documento del bloc-notes, poi fate altrettanto per tutte le icon che dovete utilizzare.

figura1

Figura 1 – Andate alla gestione Media di WordPress

figura 2

Figura 2 – Selezionate i file delle icone che volete caricare dal vostro computer

tutorial03a

Figura 3 – clicca su modica per accedere alla pagina della singola immagine

figura 4

Figura 4 – Copiate l’URL dell’immagine

STEP #3 – Copia i link delle tue pagine

Sullo stesso documento di testo sul quale avete incollato gli url delle immagini dovete incollare, sempre ordinatamente un per riga le url delle vostre pagine, andate ad esempio sulla vostra pagina Twitter e copiatene l’indirizzo, ad esempio http://www.twitter.com/mioprofilo, ed incollatelo sul documento di testo sempre completo di http:// . bene, ora fate lo stesso per tutte le vostre pagine.

STEP #4 – Create il widget.

Ora andate di nuovo sulla bacheca, sulla colonna di sinistra troverete la voce “ASPETTO” e quindi, mettendoci il mouse sopra, la sottovoce “WIDGET”, cliccate su widget. Vi trovate nella pagina dei widget, sulla sinistra trovate elencati tutti i widget che potete attivare, sulla destra un elenco delle aree preimpostate dove potete pubblicare i widget, tipicamente troverete “Area widget barra laterale”, “Prima area widget a pie’ di pagina” etc. etc… Come dice il nome, la sidebar compare in posizione laterale, tipicamente a destra, mentre folte in fondo alla pagina del vostro blog.
Dovete trascinare il “widget di testo” nell’area che preferite, tipicamente la sidebar.

 

Tutorial 4

Figura 5 – Trovate il widget “Testo” e trascinatelo nell’area widget che vi interessa

tutorial05

Figura 6 – Incollate il vostro codice all’interno del widget

STEP # 5 – Creare il contenuto del widget

Bene, siamo a buon punto, copiate ed incollate nel widget il seguente html:

<a href=“mio-link”>
<img scr=“mia-immagine”>
</a>

dovete copiarlo più di una volta, ovvero una volta per ogni link volete mettere, ottenendo una lista di link di questo tipo:

<a href=“mio-link”>
<img scr=“mia immagine”>
</a>

<a href=“mio-link”>
<img scr=“mia immagine”>
</a>

<a href=“mio-link”>
<img scr=“mia immagine”>
</a>

A questo punto non vi resta che copiare i link che avete sul vostro documento di testo all’interno dei tag html, facendo attenzione che ad ogni link corrisponda la sua icona, ad esempio:

 <a href=“https://www.facebook.com/mia-pagina”>
<img src=“http://mioblog.files.wordpress.com/2014/03/fb.png” />
</a>

<a href=“https://www.twitter.com/mio-twitter” >
<img src=“http://mioblog.files.wordpress.com/2014/03/twitter.png” / >
</a>

<a href=“https://www.googleplus.com/mia-pagina” >
<img src=“http://mioblog.files.wordpress.com/2014/03/googleplus.png” />
</a>

Il gioco è fatto, salvate il widget e andate sulla home del blog per visualizzare il risultato.

STEP# 6 – Più stile!

Potreste non essere soddisfatti, le icone sono troppo grandi, attaccate fra di loro e volete aggiungere dei margini, ecco un html un po’ più complesso che vi aiuterà ad avere un po’ di ordine nel vostro widget.
Brevemente, potete aumentare o diminuire il margine tra le icone intervenendo sul parametro css margin-left, oppure potete impostare la grandezza delle icone modificandone la grandezza in pixel e quindi width e height, non è consigliabile impostare tali parametri ad un numero di pixel superiore a quanto l’immagine effettivamente misura per non perdere la qualità dell’immagine,
Se ad esempio un’icona misura 78px per 78px è possibile visualizzarla 50px per 50px, ma è sconsigliabile visualizzarla 100px x 100px.

ad esempio:

<a href=“https://www.facebook.com/mia-pagina target=”blank” style=”display:block; width:60px; height:60px; float:left;margin-right:5px; margin-bottom:10px;”>
<img src=“http://mioblog.files.wordpress.com/2014/03/fb.png width=”60px” height=”60px” />
</a>

<a href=“https://www.twitter.com/mio-twitter target=”blank” style=”display:block; width:60px; height:60px; float:left;margin-right:5px; margin-bottom:10px;” >
<img src=“http://mioblog.files.wordpress.com/2014/03/twitter.pngwidth=”60px” height=”60px”/ >
</a>

<a href=“https://www.googleplus.com/mia-paginatarget=”blank” style=”display:block; width:60px; height:60px; float:left;margin-right:5px; margin-bottom:10px;”>
<img src=“http://mioblog.files.wordpress.com/2014/03/googleplus.pngwidth=”60px” height=”60px” />
</a>

Potete copiare il codice HTML qui sopra ed incollarlo nel vostro widget, avendo cura di sostituire i link che devono andare alle vostre pagine e gli URL delle vostre immagini/icona.

Conclusioni

Ora avete il vostro widget con le icone dei social media, se tuttavia desiderate una formattazione differente dovreste dover acquistare, come già detto, il custom design, che vi permette di intervenire sui fogli stile della pagina, permettendovi modifiche più evolute e complesse.

Potete inoltre dare un titolo al vostro widget, ad esempio Seguici, oppure lasciare il campo titolo vuoto se volete lasciare le icone senza alcun testo.

 

Tags: , , , , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: