Like Box di Facebook, post di Twitter e widget di Google Friend Connect inseriti in Blogger con effetto slide.

Avevo già presentato un modo molto originale per mostrare la FanBox di Facebook visualizzata in modo scorrevole. Per vedere gli avatar di chi aveva cliccato su Mi Piace bisognava passare con il mouse sopra alla linguetta posizionata sulla destra. Utilizzando la stessa procedura, si possono rendere scorrevoli e visibili solo a comando anche il widget di Google Friend Connect e quello dello stream di Twitter che mostra gli ultimi aggiornamenti di stato che abbiamo postato.

Come è mia abitudine testo i widget che presento in questo blog e ho pubblicato sul web una

• Demo di GFC, FanBox e Twitter scorrevoli -

Il maggiore problema che si incontra è quello di rendere coerenti le dimensioni dei vari widget con quelle delle immagini di sfondo. Se si vogliono modificare quest'ultime, si possono scaricare da questo album di Picasa.

Per rendere delle dimensioni giuste il widget di Google Friend Connect, dobbiamo andare entrare nella pagina di amministrazione di GFC, selezionare il blog in cui si vuole inserire il widget e cliccare su Aggiungi il gadget Membri

Nella pagina successiva scegliere 240 pixel di larghezza e sei righe di volti

Si possono variare i parametri dei colori a nostro piacimento. Si clicca su Genera codice per ottenere l'HTML da incollare nel widget. Questo codice va salvato in un file di testo. Ricordo che questo codice funzionerà solo nel sito del blog. Se si vuole che si possa visualizzare anche in altri blog occorre seguire la procedura illustrata in questo post. Fatto questo, iniziamo a modificare il template andando su Modello > Backup/Ripristino per salvare il template per un eventuale backup di ripristino. Quindi andiamo su Modello > Modifica HTML > Procedi, cerchiamo la riga ]]></b:skin> e, subito sopra, incolliamo il codice 

/* Followers su Blogger */
.barrightblogger { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWBmqGE8zxlXEOsL9EMFSZ2bhVreitL_t0lG3DAaKWbHKeEG4oErXkxSjrb4c9g1SoNcbblQo0WqQAfGBE-FeR0hZ4vW-N7WiDLdjtyZl8fHkXecchyphenhyphenavEnv2QWMkqwLzPw6AnJrUe5jI/s159/bl_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:50px; z-index:1000;}
.barrightbloggerc { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_tLIxIYt3z0xV-0-r9sgsgSWl03XZ0KCZy7SlmuiM-5iHLtQ-fwTkbKPn593oojAo0jKtVCOh-OOttWixnNQai65c2IyFwiLOKFJWy0g2yIuCokzSxEmqRjfzN0ViDiaL6bNLh7hLFbI/s345/bl_cg.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:50px; z-index:1100;}
.barconteblogger {margin:12px 0 0 47px}
/* Followers su Twitter */
.barrighttwitter { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI2jfY11MdEBcaGQzDG9ozLVNlfQqnCZGPcBj0sWUjlY1u7yd3-jYWtRLoV7VgLY0l0QaQVov7hZg3bsK0Ky8n1e37EV1VTOlT8Xg6G5X1V8lLWrvcJ2FJaofdHDsuVXih5vHOSPbVC10/s159/tw_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:210px; z-index:1000;}
.barrighttwitterc { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFXU8n5FGeOY7yBIF62U53dcfRbIg-9gSgSPGkMn8LqQoeoAfaxfHLgaRktqRni7L1RKsELxHk21UTEW428Lzmy-6XsGEQnOzCHHMMipYX9Rt0ksTntkOY1jehZc6GIGcfP0Wogh9K5RU/s345/tw_ag.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:120px; z-index:1100;}
.barcontetwitter {margin:0 0 0 47px}
/* Followers su Facebook */
.barrightfacebook { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_jgRR1xabyjUR1oFuaQB83CqfByhY7PF9BP8UZR5p-f4hDgcZdZCbeNTOPFgodjnWEQi59naaP-3kmR_C6ZQNVBTZKBMVyuUCe6lt6PZmm5xqb_0GEu-1pb8bsO-_lEXtXQvy33z75cw/s159/fb_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:370px; z-index:1000;}
.barrightfacebookc { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5WVdhIm3w12IWWZf9KYNf9QdwT2Ehm1lWlBBbLFgR2ybU-XZ2hicH5O45S1jKtSWKTmxbU_vPALLvLh8Ao_Zqxpng3MThkvpdRl3rR5-GDxoc84Hoi9EofSTumo3VBfHTl2F5ygD7kFs/s345/fb_bg.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:185px; z-index:1100;}
.barcontefacebook {margin:12px 0 0 47px}

dove possono essere sostituiti gli URL delle immagini con gli hotlink di quelle che abbiamo caricato sul nostro account Picasa. Ci sono anche tutti i parametri per modificare posizione e dimensioni, modifiche però che devono essere fatte in modo coerente e solo da chi abbia già una certa esperienza.

Adesso cerchiamo la riga </body> e, subito sopra, incolliamo quest'altro codice

• Codice per GFC, Twitter e Facebook -

Salviamo il modello. I dati da personalizzare riguardano il codice ottenuto da Google Friend Connect con il meccanismo illustrato in precedenza e che va sostituito a tutta quella parte di codice colorato di verde. Gli altri parametri da cambiare sono:

1. rpp: 3 - rappresentano il numero di aggiornamenti di stato visualizzabili nello stream di Twitter
2. parsifal32 - è il nome utente di Twitter che deve essere sostituito con il vostro
3. http://www.facebook.com/ideepercomputeredinternet è l'indirizzo della pagina fan che è di quella di questo blog e che dovrà essere cambiato.

I tre gadget saranno visibili nella parte destra del blog con tre linguette e potranno essere visualizzati passando con il mouse sopra a ciascuna di esse. Se volete cambiare posizione al widget agite su questi parametri

right:0px; top:50px right:0px; top:210px right:0px; top:370px …

ricordando che sono legati tra di loro. Per inserire i tre widget sulla sinistra occorrerebbe cambiare completamente immagini e javascript.   

Fonte | Lo se asì -