Twitter Profile
salta alla navigazione

WordPress: personalizzare le icone del plugin Sociable 14 settembre 2009

Inviato da LukePet in : Chicche, Informatica, Internet, Prodotti, Software, Sviluppo, Tutorial, Web , trackback

E’ già da un pò che mi sono adoperato per fare un piccolo restyling alle icone di condivisione per i post di questo blog…ed il risultato è ormai da tempo ben visibile in coda ad ogni post. Giusto per essere più chiari, ecco di cosa sto parlando:

NewSociable

L’immagine soprastante mostra il riquadro utilizzato per la condivisione dei post sui principali servizi di comunicazione web. Dal punto di vista funzionale tutto è gestito dal plugin Sociable, che permette di selezionare da un elenco di servizi disponibili quelli per i quali si vuole predisporre il collegamento rapido per la condivisione.

Nulla da eccepire quindi, Sociable il suo lavoro lo svolge egregiamente…ma dal punto di vista grafico così com’era non mi convinceva; di default le icone mi sembravano troppo piccole e poco “interessanti”. Tutto ciò mi ha spinto a dare una ritoccata all’aspetto grafico, ottenendo il risultato mostrato nell’immagine precedente…non c’è voluto molto, qualche nuova icona ed un ritocco al foglio di stile ed il gioco è fatto.

Ora per la gioia di tutti gli smanettatori grafici espongo con chiarezza i passi da seguire per ottenere il mio stesso risultato:

1) Prima di tutto, chiaramente, installate il plugin Sociable (http://wordpress.org/extend/plugins/sociable). Fatto?

2) Dal pannello di configurazione del plugin selezionate i servizi per cui volete rendere disponibile la condivisione. Fatto?

3) A questo punto dovete ricercare il pacchetto di icone che più vi piace, da associare ai servizi che avete selezionato precedentemente (io, per esempio, le ho trovate sul sito http://www.iconspedia.com). Fatto?

Se per caso vi interessassero le stesse mie icone potete scaricare il pacchetto direttamente da qui: newsociable.

NB: è fondamentale che rinominiate le nuove icone con gli stessi nomi delle icone di default del plugin Sociable.

4) Ora, via FTP, caricate le nuove icone in una directory a scelta del vostro spazio web; tornate nel pannello di configurazione di Sociable e nel settaggio “Image directory” inserite l’url che punta alla directory appena uploadata. Fatto?

5) Bene, adesso abbiamo le nuove icone…non resta che modificare il foglio di stile. Dal pannello di configurazione di Sociable nel settaggio “Use CSS” disabilitate l’opzione “Use the sociable stylesheet” (andremo a ridefinire le nuove classi direttamente nel foglio di stile del tema in uso); aprite il file style.css del tema che state usando ed aggiungete le seguenti istruzioni:

.sociable {
	padding:5px;
	background-color:#EFEFFF;
	border:2px solid #DDDDFF;
	height:80px;
	margin:auto;
	width:624px;
}
 
.sociable_tagline {
	padding-bottom:10px;
	color:#666;
	font-size: 11px;
}
 
.sociable {
	margin-top: 26px !important;
}
 
.sociable img {
	width:42px; /* questo perchè le icone da me utilizzate sono larghe 42px */
}
 
.sociable ul {
	display:inline;
	margin:0 !important;
	padding:0 !important;
}
 
.sociable ul li {
	background:transparent none repeat scroll 0 0;
	display:inline !important;
	list-style-type:none;
	margin:0 0 0 4px;
	padding:1px;
}
 
.sociable-hovers {
	opacity:0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}
 
.sociable-hovers:hover {
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
}

NB: chiaramente questo stile è adattato al mio tema…è scontato che nel caso in cui lo sfruttaste in altre situazioni siano necessari dei ritocchi.

Come ultimo passo non resta che salvare il foglio di stile con le nuove modifiche inserite e gustarvi la nuova veste grafica delle icone Sociable. Fatto?

Ottimo, il lavoro è completato! Ok…ora condividete pure :)

  • Paolo

    <code>
    div.sociable { margin: 16px 0; }

    span.sociable_tagline { position: relative; }
    span.sociable_tagline span { display: none; width: 14em; }
    span.sociable_tagline:hover span {
    position: absolute;
    display: block;
    top: -5em;
    background: #ffe;
    border: 1px solid #ccc;
    color: black;
    line-height: 1.25em;
    }
    .sociable span {
    display: block;
    }
    .sociable ul {
    display: inline;
    margin: 0 !important;
    padding: 0 !important;
    }
    .sociable ul li {
    background: none;
    display: inline !important;
    list-style-type: none;
    margin: 0;
    padding: 1px;
    }
    .sociable ul li:before { content: “”; }
    .sociable img {
    width:42px;
    }

    .sociable-hovers {
    opacity:0.5;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
    filter: alpha(opacity=50);
    }

    .sociable-hovers:hover {
    opacity:1;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);
    }</code>
    Questa è la parte che ho aggiunto sul file css. Il problema è che sotto ai post del mio blog invece delle immagini mi fa vedere solo le scritte dei social network, del tipo:
    Condividi:
    Friendfeed Google Twitter Digg
    Le immagini nonostante abbia caricato la cartella newsociable e linkata nel Image directorydelle opzioni del plugin non me le fa vedere. Sai aiutarmi?

  • Guarda…per caso hai installato l’ultima versione del plugin? La 3.5.0?

    Proprio ieri sera ho visto che con quest’ultimo aggiornamento le icone personalizzate non funzionano e così ho rimesso la versione precedente.

    Appena trovo un minuto provo a segnalare il problema al team di Sociable.

  • Paolo

    Esatto ho quella versione. Ora cambio poi ti faccio sapere.

  • Paolo

    Ho provato con la 3.4.4 ma il problema rimane.

  • Controlla che il path della directory dove prendi le immagini sia corretto e che i permessi di lettura siano ben impostati…io, per esempio, nella voce “Image directory” ho questo path

    http://pollosky.it/wp-content/uploads/newsociable/

    quindi ogni singola immagine è puntata da un url del tipo http://pollosky.it/wp-content/uploads/newsociable/googlebookmark.png

     

  • Paolo

    ho contrallato e le immagini stanno a posto. non so veramente che fare.

  • Bo..strano, se le immagini puntate con l’indirizzo si vedono ed i permessi della directory in cui sono caricate sono ok, non saprei proprio che altre verifiche suggerirti.

  • Paolo

    Ci sono riuscito, però la prima icona è sfasata rispetto alle altre. Ti linko l’immagine. http://i36.tinypic.com/s0wksx.png

  • Ciao,
    stavo modificando le icone anche io per il plugin sociable che sto installando su un nuovo blog e seguivo l’ottima guida.
    Però vi siete accorti come si vede con internet explorer?
    Come sempre questo browser fa lavorare il doppio!

  • Riciao,
    per far si che si vedano bene su internet explorer 8 ho riempito lo sfondo di tutte le icone con il colore dello sfondo fatto dal css qui sopra.
    Cosi si risolve il problema.
    Ciao
    Mattia

  • Si, hai ragione…su IE8 non si vedono benissimo, proverò ad adottare la tua soluzione. Grazie per il contributo!

  • bramby

    salve, io ho wordpress 3.0.1 e sociable 5.13, non trovo la “casella” dove dirgli di andarsi a prendere le icone che ho scelto io, sai consigliarmi? Controllo in Impostazioni -> Sociable ma nulla! D:

  • bramby

    Ok ho risolto cambiando versione del plugin, ora tutto funziona alla perfezione.
    Soltanto una cosa, mi è rimasto intorno alle icone social un quadrato blu, sapresti dirmi quale riga di codice togliere per levarlo? Io non ci capisco molto di CSS, sono andato a tentativi ma non hanno sortito buoni frutti!
    Queste sono le righe di codice rimaste dopo aver tolto la tabella dietro!
    .sociable_tagline {
    padding-bottom:10px;
    color:#666;
    font-size: 11px;
    }
     
    .sociable {
    margin-top: 26px !important;
    }
     
    .sociable img {
    width:42px; /* questo perchè le icone da me utilizzate sono larghe 42px */
    height:42px !important;
    }
     
    .sociable ul {
    display:inline;
    margin:0 !important;
    padding:0 !important;
    }
     
    .sociable ul li {
    background:transparent none repeat scroll 0 0;
    display:inline !important;
    list-style-type:none;
    margin:0 0 0 4px;
    padding:1px;
    }
     
    .sociable-hovers {
    opacity:0.5;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
    filter: alpha(opacity=50);
    }
     
    .sociable-hovers:hover {
    opacity:1;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
    filter: alpha(opacity=100);