Pubblicato il 07/01/13e aggiornato il

Widget scorrevole con Like Box di Facebook, Google+, Twitter e iscrizione ai feed.

Widget scorrevole per Pagina Fan di Faceboo, Twitter, Google Plus e Iscrizione alla Newsletter di Feedburner. i installa in un gadget HTML/Javascript di Blogger.
In un commento mi è stato segnalato un widget scorrevole che si posiziona sulla destra del blog e che mostra il Like Box di Facebook, gli ultimi tweet su Twitter, il bottone di Google Plus e il campo per sottoscrivere la Newsletter con FeedBurner. Penso di fare cosa gradita a molti lettori se lo ripresento tradotto in italiano. Per la sua installazione non occorre modificare il modello ma basta andare su Layout > Aggiungi un gadget > HTML/Javascript.

Per poterlo utilizzare bisogna essere iscritti a Facebook e avere una nostra pagina fan, essere inoltre iscritti a Twitter e a Feedburner. I dati che servono sono l'username di Twitter, l'ID della pagina fan su Facebook e l'ID di Feedburner. Ecco la solita demo online



L'aspetto del widget sarà il seguente

slide-widget-blogger

Passando il mouse sopra ciascuna linguetta si visualizzeranno il Like Box di Facebook, gli ultimi tweet, il bottone di Google Plus e il modulo per l'iscrizione alla newsletter. Per l'installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il seguente
I dati essenziali da modificare sono stati evidenziati di giallo e riguardano
  1. ideepercomputeredinternet che è l'ID della pagina fan su Facebook cioè la parte dell'URL dopo www.facebook.com/
  2. parsifal32 è l'ID su Twitter ovvero il nome utente
  3. Le due occorrenze di ideepercomputeredinternet/zUQN che è la parte finale dell'URL dei feed del blog su Feedburner
Naturalmente si possono modificare anche altri parametri come gli URL delle 4 immagini delle linguette. Concludo ricordando che sono presenti gli script di Google Plus e di JQuery evidenziati di verde. Se fossero già presenti nel modello si può tralasciare il loro codice.
Fonte | Helper Blogger -




28 commenti :

  1. Ottimo,cercavo da tempo questi "menù a scomparsa"
    Grazie :)
    Però ho notato che se la pagina facebook ha un nome piu lungo del dovuto non si visualizza correttamente.
    Non cè un modo per far aprire di più il Like Box Facebook?

    Cmq funziona anche su wordpress :)

    RispondiElimina
  2. Scusa,ma il "problema" non è il nome lungo
    Ho provato in un sito di prova e il like box si vede correttamente
    Mentre se inserisco lo stesso codice nel mio sito principale non si vede per intero ( come la demo che hai postato per intenderci )

    RispondiElimina
    Risposte
    1. @EmanueleDrago
      Onestamente non ti so dire il perché, forse va in conflitto con qualche widget del tuo sito. Ricordati che c'è JQuery. Si può naturalmente inserire il widget anche su Wordpress andando su Widget > Aggiungi widget > Testo e trascinando l'elemento in una sidebar o nel footer.

      Elimina
  3. per togliere il +1 di google plus devo togliere la parte in verde?

    RispondiElimina
  4. E' un ottimo widget, grazie. Anche io però ho lo stesso problema per la finestra di Facebook. Forse non te ne sei accorto, ma anche sulla tua demo compare una finestra troppo corta. Ho provato a modificare la lunghezza della finestra sul codice adeguandola a quella di twitter (196 fb - 246 tw) ma non funziona.

    RispondiElimina
    Risposte
    1. Adesso funziona perfettamente. Sono riuscito a modificare il codice (anche se non ne capisco nulla. I miracoli della testardaggine!).
      Riporto di seguito le modifiche che potrebbero interessare ad altri:
      In tre posizioni che prevedono per facebook width 196 ho inserito 290.
      In una posizione che prevede per facebook width 200 ho inserito 290.
      Per l'altezza l'ho ridotta in tre posizioni da 353 a 300 e in una posizione da 426 a 300.
      La finestra però iniziava troppo avanti pertanto ho dovuto modificare in tre posizioni il valore -200 in -292.
      Infine risultavano soltanto nove foto di amici anziché 10, così ho modificato connections=9 in connections=10.
      Spero di essere stato utile a qualcuno.

      Elimina
    2. @GiancarloChieco
      Non testo le tue modifiche perché non ne ho il tempo ma le prendo per buone e ti ringrazio comunque di averle condivise con i lettori. Mi ero accorto di quell'inestetismo ma mi sono visto costretto a lasciare le distanze del post originale sempre per la solita cronica mancanza di tempo :)

      Elimina
  5. ciao Ernesto, come si può modificare il colore dei link nel box di twitter? grz

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      Prova a scorrere il codice (non è mio) e cerca i CSS di Twitter tipo questo #twitter_left con color:#6CC5FF

      Elimina
  6. Ciao Ernesto, anziché fare comparire le linguette sulla parte destra dello schermo, è possibile con qualche modifica farle comparire sulla sinistra?

    Grazie mille

    RispondiElimina
    Risposte
    1. @EdoardoVanucci
      Più che modifiche bisognerebbe rifare tutto il codice e tutte le immagini visto che sono impostate per l'effetto slide sulla destra

      Elimina
    2. Ah cavolo, una cosa molto complicata, almeno per me. Grazie comunque per la tua disponibilità Ernesto!

      Elimina
  7. Ciao ernesto, scusami...in "subscribe" quando inserisco un indirizzo email mi scrive "The feed does not have subscriptions by email enabled". Come mai? sono andato in feedburner a vedere cosa fosse ma non capisco cosa devo fare, puoi aiutarmi?
    Grazie
    Piergiorgio

    RispondiElimina
    Risposte
    1. Probabilmente non hai sostituito bene l'indirizzo dei feed nel codice. Devi inserire la parte finale di uno come questo
      http://feeds.feedburner.com/ideepercomputeredinternet/zUQN
      cioè la parte dopo
      http://feeds.feedburner.com/
      in due occorrenze
      R @

      Elimina
  8. Ciao Ernesto. Vorrei poter inserire il widget senza G+ e i Feed, e lasciare quindi solo FB e Twitter. Ho provato a lavorare sul codice ma combino guai. Potresti aiutarmi per favore?

    RispondiElimina
  9. Ciao Ernesto ho un widget simile sul mio blog per twitter , praticamente identico nel funzionamento e nel codice solo un po' diverso graficamente.Adesso però quando si apre il menu a tendina rimane azzurro senza visualizzare i twitter, ho notato che la stessa cosa accade nel tuo blog di prova! si può risolvere in qualche modo o è colpa di twitter ? Un caro saluto

    RispondiElimina
    Risposte
    1. @# Può darsi che Twitter abbia modificato le API e che quindi le vecchie non siano più funzionanti

      Elimina
    2. Dovrebbe essere proprio così. Infatti molti moduli non sono più funzionanti. Twitter ha rilasciato la 1.1 che sostituisce la 1, x bloccare le estensioni di terze parti.

      Elimina
    3. E come fare per farlo funzionare di nuovo?

      Elimina
    4. @# Se trovo il modo di ovviare aggiorno il post o ne faccio uno nuovo

      Elimina
    5. Ciao Ernesto,come faccio ad inserire l'accout di google+? Ti ringrazio Simone

      Elimina
  10. Il box di twitter non funziona più.

    RispondiElimina
    Risposte
    1. @# Le vecchie API di Twitter sono state ritirate e ne sono state rilasciate di nuove
      https://dev.twitter.com/blog/api-v1-is-retired
      Bisognerebbe leggersi tutta la documentazione ... Se avrò un po' di tempo (e di voglia...)

      Elimina
  11. Risposte
    1. Non è necessario inserire l'URL di Google Plus
      @#

      Elimina
  12. Salve a tutti, premetto che di programmazione non ne so un tubo. Io uso soltanto un programma per creare sito web, ma tutto in WYSIWYG. avrei bisogno del codice ma con solo facebook. Qualcuno mi può dare un aiuto?

    RispondiElimina
    Risposte
    1. @# Prova a togliere il codice a partire da
      <div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div">

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.