Plugin WordPress Follow Us: i Social Network sulla sidebar
Durante la fase di realizzazione del nuovo tema, come ti avevo già accennato, ho sviluppato tre plugin/widget che permettessero di gestire in modo del tutto dinamico la sidebar del nostro blog. E, come promesso, ecco rilasciato il primo dei plugin/widget.
Plugin Follow us
Il plugin in questione è molto semplice e permette di aggiungere – in un punto qualsiasi della sidebar del tuo blog – una sezione dedicata ai vari Social Network a cui sei iscritto. Come avrai notato i Social Network sono diventati il cardine centrale della comunicazione sul web; diventa quindi di fondamentale importanza, per un buon successo del tuo blog, fornire ai tuoi lettori la possibilità di seguirti anche attraverso questi nuovi canali comunicativi.
Il widget Follow Us permette di aggiungere dei collegamenti ai principali Social Network oggi utilizzati, inoltre offre anche la possibilità di aggiungere il collegamento ad una eventuale pagina newsletter e di iscriversi ai Feed del blog.
Installazione
L’installazione, come per tutti i plugin di WordPress, è semplicissima. Dopo aver scaricato il file, può essere eseguita seguendo questi semplici passaggi:
- Decomprimi l’archivio denominato “follow-us” all’interno della tua cartella “plugins” (/wp-content/plugins/).
- Attiva il Plugin denominato Follow Us.
- Dal pannello di amministrazione di WordPress clicca sul menù Aspetto > Widget.
- Trascina il Widget chiamato Follow Us sulla sidebar del tuo blog nel punto in cui desideri visualizzarlo.
- Configura le varie scelte messe a disposizione dal plugin.
Amministrazione del Widget
Tramite un piccolo pannello di controllo il widget ti permette di scegliere quali account, tra quelli messi a disposizione, visualizzare effettivamente sulla sidebar del tuo Blog.
Al momento è possibile scegliere tra gli account di Facebook, Twitter e Delicioius, più l’iscrizione ai Feed rss del proprio blog e il collegamento ad una eventuale pagina Newsletter. Per ognuna di queste voci è possibile aggiungere sia il link che il testo da linkare.
Sotto puoi vedere uno screenshot riguardante la configurazione del pannello di controllo del widget (clicca sulla foto per ingrandirla).
Widget in uso
Ovviamente una live preview del widget in azione la puoi vedere proprio sulla sidebar del nostro blog, comunque sotto ti riporto ugualmente uno screenshot del widget Follow Us in azione:
Personalizzazione
Il plugin fornisce le seguenti classi css:
- .widget_follow-us {immagine di sfondo da assegnare al titolo}
- li.facebook {immagine di sfondo da visualizzare sull’account Facebook}
- li.facebook:hover {immagine di sfondo da visualizzare al passaggio del mouse sull’account facebook}
- li.facebook span {colore per la scritta “Facebook”}
- li.twitter {}
- li.twitter:hover { }
- li.twitter span { }
- li.rss { }
- li.rss:hover { }
- li.rss span { }
- li.newsletter { }
- li.newsletter:hover { }
- li.newsletter span { }
- li.delicious { }
- li.delicious:hover { }
- li.delicious span { }
Le classi di ogni social Network hanno le stesse funzioni descritte per le classi di facebook. È possibile utilizzare immagini personalizzate le quali andranno aggiunte all’interno della cartella “images” del plugin (/wp-content/plugins/follow-us/images/).
Internazionalizzazione
Il widget è stato localizzato in modo da permettere la traduzione di tutti i testi presentati all’utente, è rilasciato in lingua italiana e inglese.
All’interno sono presenti anche i file sorgenti (language/follow-us.pot) in modo da permettere a chiunque di generare dei file dizionario per la propria lingua.
Note di rilascio
Versione 1.0 (Versione iniziale)
- Possibilità di visualizzare l’account di Facebook con relativo collegamento e testo da linkare.
- Possibilità di visualizzare l’account di Twitter con relativo collegamento e testo da linkare.
- Possibilità di visualizzare l’account di Delicious con relativo collegamento e testo da linkare.
- Possibilità di visualizzare l’iscrizione ai Fedd rss del proprio blog.
- Possibilità di visualizzare l’iscrizione alla Newsletter con collegamento alla pagina e testo da linkare.
- Lingua italiana
- Lingua inglese
Per qualsiasi chiarimento, suggerimento, critica puoi utilizzare i commenti di quest’articolo.
L'Autore
Potresti essere interessato anche ai seguenti articoli:
28 commenti
Trackback e pingback
-
Plugin WordPress Follow Us: i Social Network sulla sidebar | Your Inspiration Web
[...] post: Plugin WordPress Follow Us: i Social Network sulla sidebar | Your Inspiration Web ...
E’ un plugin molto interessante, che potrebbe facilitare il mantenimento dei rapporti degli autori con i lettori e viceversa!
Sembra molto bella, e la possibilità di modificare gli stili è molto interessante!
Tra l’altro sto imparando a fare temi per wordpress proprio in questo periodo, quindi questo articolo capito a fagiolo xD
Ciao Famba, ben trovato.
Il plugin è semplicissimo, nulla di che, avevo provato a cercare qualcosa che permettesse di aggiungere i collegamenti ai vari social sulla sidebar ma ho trovato poco materiale a riguardo, così mi sono deciso a realizzarne uno ad hoc.
Poi ho cercato di renderlo personalizzabile il più possibile in modo da rilasciarlo per quanti ne potessero aver bisogno. Spero ti possa essere d’aiuto magari per la realizzazione del tuo primo plugin
Complimenti veramente per il plugin, è molto interessante e utile.
Grazie yeswebcan, mi auguro possa servire.
L’ho installato, lo trovo migliore e piu’ estetico di tanti altri e si adatta benissimo al mio CSS.
Di fatto ho modificato le immagini e i campi per poterlo adattare ai miei requirements; purtroppo le immagini non vengono visualizzate, nemmeno quelle di difault.
Suggerimenti?
Ciao Claudia, intanto benvenuta anche a te su YIW.
Non riesco a vedere il widget sulla sidebar del tuo blog, credo sia disattivato. Se lo rimetti magari provo a dare uno sguardo.
Ciao Nando,
ho provveduto a riattivare il plugin (lo avevo anche cancellato e reinstallato) su liquidskydesign.org e adesso e’ visibile. Ho lasciato la configurazione standard, senza moficare niente.
E le immagini non si vedono..
Ciao Claudia, il problema credo che dipenda dalla riga 607 del tuo foglio di stile “style.css” :
#sidebar li {
background:transparent url(images/sub.png) no-repeat scroll 0 0;
border-bottom:1px dotted #CCCCCC;
display:block;
padding:2px 0 2px 13px;
}
la proprietà background carica un’immagine denominata “sub.png” la quale sovrascrive l’immagine di sfondo dei vari social, prova a commentarla e fammi sapere se risolvi.
Nando, hai perfettamente ragione.
Ho commentanto le due righe che chiamavano quella immagine e tutto e’ andato liscio!
Grazie mille per il supporto, sono contenta del plugin e di come si intona bene al mio blog =)
A quando il prossimo? =)
Di nulla, Claudia, figurati.
Vedo che l’hai adattato in modo davvero carino, complimenti
Il prossimo? mmm… se riesco a ritagliare un po’ di tempo tra qualche settimana potrei rilasciare “Articoli in evidenza” (con possibilità di scelta di quanti e quali articoli visualizzare) che puoi vedere sulla nostra sidebar. Non so se ti può tornare utile
Tutto puo’ tornare utile; se non su ./lsd magari su altri blog che gestisco. E credo che qualcosa come “Articoli in evidenza” sia molto piu’ funzionale dei classici post sticky.
Quindi lo aspetto con ansia =)
E data la simpatia e la competenza, YIW si e’ guadagnato la new entry dei primi 10 siti che visito quotidianamente =)
Claudia, felice di essere entrati nella tua top ten
Ciao,
io ho provato a commentare le righe come dicevi ma niente.
Ciao Matteo, scusami ma non ho ben capito a cosa ti riferisci. Spiegami meglio qual è il problema che riscontri.
Adesso che ho dato uno sguardo al tuo blog credo di aver capito a cosa ti riferisci e qual è il tuo problema.
Prova a commentare la proprietà background della seguente riga (562 mi pare) sul tuo CSS:
#sidebar li {
/*background:url("img/icons.gif") no-repeat scroll 0 -560px transparent;*/
Fammi sapere se così hai risolto.
Provato ma niente.
Ho provato anche a commentare le altre sidebar con proprietà background ma resta tutto uguale.
E’ strano perchè in locale, con firebug, appena commento proprio quella riga visualizzo correttamente le immagini di sfondo.
Buon giorno a tutti,
inizio facendo i complimenti per il sito e gli articoli che sono chiari e capibili da persone che come me non sono del mestiere.
Io sto realizzando un sito dove uso Rapidweaver per il tema/layout e dove sono riuscito ad inglobare wordpress e tutte le sue opzioni. Volevo sapere se è possibile prendere il codice sopra descritto ed insertirlo nelle pagine non-wordpress in rapidweaver.
Ringrazio in anticipo.
Saluti
Denis
Ciao Denis, intanto benvenuto e grazie per i complimenti.
Riguardo alla tua richiesta non conosco Rapidweaver e non ho ben capito a cosa ti riferisci.
Posso dirti che questo plugin/widget è stato sviluppato per WordPress, se utilizzi WordPress quindi non hai nessun problema, ti basta scaricarlo e seguire la procedura indicata per l’installazione e l’attivazione sul tuo blog.
Ciao Nando. spero non sembri banale ma complimenti per i plugin.
volevo porti un mio problema.
premetto che non ho molta dimistichezza con l’html però mi cimento volentieri.
ho installato il plugin e attivato il link per facebook e funziona perfettamente.
il problema è che il testo inserito si allinea in alto a sinistra (a metà tra il bianco e il grigio per capirci) e non al centro del bianco come sulla barra di YIW. di sicuro è dovuto al css del tema di wordpress che avrà precedenza su quello del widget.
come posso intervenire?
Ciao Michele, ho dato uno sguardo al tuo blog, hai già risolto da solo?
ciao Nando.
come detto sono uno che si cimenta e verso le due ho trovato una “soluzione” che formalmente funziona.
ho variato line-height di “li.facebook span” e per tentativi ho trovato il valore che da’ la collocazione desiderata al testo.
ecco il codice:
li.facebook span {line-height: 40px; text-shadow: 0px 0px 2px black; color: #6fc400;font-size:115%;}
che dici, può andare?
Bravo Michele, per posizionare il testo verticalmente all’interno di un box conviene utilizzare la proprietà line-height. Per centrarlo verticalmente generalmente si assegna una dimensione al line-height pari a quella assegnata all’altezza del box, che è quello che avevo fatto io in questo caso.
Mitico!
grazie della spiegazione alla mia soluzione
non la dimenticherò ora.
Ciao,
grazie per il plugin.
Solo una domanda: può inserire senza widget? Posso sapere il codice?
Ciao Riccardo, mi dispiace ma questo plugin è stato sviluppato per essere utilizzato come widget.
Se riuscirò a trovare il tempo, che ultimamente non ho più =), in futuro proverò a realizzarne una versione utilizzabile anche tramite funzione in modo che lo script possa essere richiamato in qualsiasi punto del tema.
Oky, grazie lo stesso per la risposta.