Pubblicato il 15/10/11 - aggiornato il  | 12 commenti :

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

facebook-twitter-blogger-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

aggiungi-gadget-membri

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

larghezza e numero di file

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

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ì -



12 commenti :

  1. Funziona perfettamente (guarda: www.babygreen.it)! Ottima soluzione, non mi piacevano per niente tutte quelle facce nella sidebar! grazie mille - COME SEMPRE: GRAZIE INFINITE!

    RispondiElimina
  2. @Raffaella
    E certo che funziona. Non vorrai mica che proponga delle cose che non vanno ;) Poi ci possono essere sempre delle incompatibilità con i vari modelli ...

    RispondiElimina
  3. Mi piace veramente molto questo menù a destra e ovviamente funziona alla grande.
    Ho notato però un piccolo difetto, è una roba da nulla ma la dico lo stesso.
    L'etichetta di twitter è un po' più scomoda da raggiungere rispetto alle altre due per un semplice motivo. Quando si aprono praticamente occupano completamente la scritta di twitter non dando la possibilità di renderlo cliccabile. Ovviamente se sposti e ci vai direttamente si apre però sarebbe stato bello che il menù si allargasse all'esterno delle etichette. Non so se mi sono spiegato.

    Un'altra domanda di tipo tecnico: A livello di tempo caricamento pagina si guadagna qualcosa mettendoli in questo modo o addirittura può risultare più pesante? Sono sempre alla ricerca di un caricamento più veloce possibile e limito molto i plugin quindi mi faccio sempre questo tipo di domande.

    RispondiElimina
  4. Buonasera... Per risolvere il problema dell'incompatibilità con i vari modelli non si può fare nulla? Io uso un modello "semplice" di blogger, ho seguito la procedura ma i vari box mi appaiono in basso a sinistra... Mentre con il modello "etereo" funziona... C'è un modo per risolvere questo problema? Comunque complimenti per l'articolo, è davvero una bellissima idea quella di questi box a comparsa...

    RispondiElimina
  5. @Shoras
    Innanzitutto mi scuso per non averti risposto prima ma il tuo commento mi era sfuggito. Si possono sempre modificare le dimensioni delle immagini però bisogna contestualmente farlo anche con i parametri presenti nel codice. Non è un lavoretto da poco, ci vuole pazienza e un po' di tempo ma si può fare.

    @Jioriu
    Quando ci sono problemi del genere da te lamentato è che non si sa dove mettere le mani! Non si capisce quello che dà incompatibilità, può essere il modello, un widget o altro ancora. Mi sono trovato a dei casi in cui una personalizzazione funzionava in un blog di prova ma non in quello online.

    RispondiElimina
  6. @Erneto T. Eheh ok, grazie lo stesso, se cambierò modello vedrò di riprovare... Grazie davvero! E complimenti per il blog...

    RispondiElimina
  7. Ciao Ernesto,
    avrei due domande:
    1) Per caso con questo sistema si potrebbe inserire anche una linguetta per il badge di Google Plus (nel mio caso al posto di quella di Twitter)?
    2) Io avevo inserito il gadget Google friend connect tramite i widget offerti da blogger nella pagina design, ma poi l'ho sostituito con quello che si crea direttamente dalla pagina di amministrazione di GFC, perchè lì si possono personalizzare anche le misure. Il problema è che se il gadget lo inserisco dalla pagina di blogger design, le icone degli iscritti si vedono, ma se lo inserisco dalla pagina GFC invece il gadget compare vuoto, con la scritta "Ancora nessun iscritto". Ma in teoria non dovrebbe aggiornarsi da solo e aggiungere automaticamente le icone dei lettori che si sono già iscritti?
    Grazie, Giuliana

    RispondiElimina
  8. @Giuliana
    Non conosco il widget di Blogger; GFC lo inserisco manualmente mediante codice cosa che puoi fare anche tu. Il badge di Google Plus è ancora troppo rigido per poterlo inserire in un gadget del genere.

    RispondiElimina
  9. Il problema è che quando lo inserisco tramite codice, non vengono inseriti i volti delle persone che si sono già iscritte, e non so come aggiornarlo affinchè compaiano
    :(

    RispondiElimina
  10. ciao parsifal.
    io ho un dominio blogspot.com
    ma come faccio ad aggiungere il gadget MEMBRI di GFC al rispettivo tasto BLOGGER?

    riformulo la domanda.
    ora che GFC è chiuso, come faccio ad inserire il codice HTML?

    RispondiElimina
    Risposte
    1. @CercoSanso
      Bella domanda, vorrei saperlo anch'io visto che non si può accedere :(
      http://www.google.com/friendconnect/admin/site/

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy