Pubblicato il 11/05/10 - aggiornato il  | 39 commenti :

Come inserire il Like Box di Facebook su Blogger.

Come installare il Like Box di una pagina fan di Facebook su un sito della piattaforma Blogger.
Su Facebook, dopo aver introdotto i plugin per gli sviluppatori, alcune procedure di inserimento dei widget sono mutate. Oltre al nuovissimo iFrame "Mi Piace", la novità più importante riguarda le pagine fan. Ricordo alcuni post che ho dedicato all'argomento e che sono da aggiornare in alcuni punti

Adesso non è più possibile inserire il badge accedendo alla nostra pagina fan e cliccando su "Aggiungi riquadro dei fan al tuo sito" in quanto il link non è più presente. 

E' stato infatti creato un nuovo widget, denominato Like Box, che è sostanzialmente identico al precedente ma che ha una diversa procedura di installazione.

Bisogna accedere alla nostra pagina fan e acquisirne l'ID, cioè il numero che la contraddistingue in modo univoco. Si trova nella barra del browser

pagina-fan-id

L'ID della pagina fan di Idee per Computer ed Internet è 207337935513. Adesso andate alla pagina del plugin Like Box e inserite tale ID nella prima riga. Dopo aver cliccato in un punto qualsiasi della pagina si vedrà l'anteprima del widget

like-box-pagina-fan
Si possono fare alcune importanti personalizzazioni
  1. Indicare la larghezza in pixel del widget da calcolare a seconda delle dimensioni della sidebar del blog
  2. Digitare il numero delle foto dei sottoscrittori che si vogliono visualizzare
  3. Mostrare lo stream della pagina. Cioè far vedere gli ultimi contributi che sono apparsi nella bacheca
  4. Mostrare l'header della pagina. In questo caso apparirà la scritta Ritrovaci su Facebook 
  5. Per attivare il punto 4) e 5) occorre mettere il segno di spunta nell'apposito quadratino
Tutte le volte che faremo una modifica ne vedremo l'anteprima sulla destra. Se volete avere un'idea del gadget nella sua interezza lo potete vedere nel blog che uso per le demo in alto a destra. E' presente anche un cursore per scorrere tutto lo streaming

like-box-pagina-fan-facebook
Quando siete soddisfatti dell'aspetto del widget dovete cliccare su Get Code, selezionate e copiate il codice dal popup che si aprirà

pagina-fan-like-box-facebook

E' più semplice copiare l'iFrame in quanto la seconda opzione presuppone una ulteriore modifica del codice del sito. Se avete Blogger non vi resta che andare su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollare il codice che successivamente va posizionato con il mouse. Occorre cliccare su Salva ed è fatto.

Coloro che avranno scelto una opzione minimalista, cioè senza header e senza stream, si troveranno di fronte a un piccolo problema estetico. Non si riusciranno cioè a vedere i nomi della seconda riga delle miniature perché l'altezza del widget è insufficiente.

Di default l'altezza, in questo caso, è stabilita in 255 pixel come si evince dal codice acquisito

codice-like-box

Per mostrare in modo corretto anche questi nomi è sufficiente sostituire 260 a 255 in entrambe le occorrenze. Concludo osservando che il widget non è di proprietà dell'amministratore della pagina fan. Volendo quindi si può inserire nel nostro sito il Like Box di una qualsiasi pagina fan, basta acquisirne l'ID attraverso l'indirizzo del browser.


39 commenti :

  1. Salve Ernesto ho provato a seguire la procedura da te indicata e mi sono ritrovata un problema di compatibilità con il widget friend connect di Google che sparisce se è presente il widget like box. Ho provato in tanti modi e non ne sono venuta a capo. Hai avuto altre sengalazioni tipo la mia?
    Grazie anche per i post sempre interessanti per tenere aggiornati i blog.

    Rosalba

    RispondiElimina
  2. @Rosalba
    E' la prima volta che sento parlare di questa incompatibilità. Prova un po' a cambiargli di posizione. Se hai due o più sidebar mettili separati. Probabilmente però lo avrai già fatto... Non so che dirti.
    Ciao

    RispondiElimina
  3. perchè da un po' di giorni non si vedono più le foto dei fan nella like box? :(

    RispondiElimina
  4. @francesco88
    E' un problema che riguarda molti blog e alcuni browser. In questo blog la Like Box si vede con Chrome ma non con Firefox e IE. In altri blog non si vede con nessun browser. Di questi problemi se ne discute molto in rete. Il fatto è che milioni di siti le hanno installate simultaneamente e sembra che ci siano dei disservizi da parte di Facebook.
    Ho provato a reinstallarle ma anche nell'anteprima non si riesce a vedere il like box correttamente.
    Quando e se ne saprò di più ci farò un articolo.
    Ciao

    RispondiElimina
  5. Grazie mille per l'efficiente risposta :)

    Come avevo intuito, quindi è un problema sostanzialmente di Facebook: infatti fino a qualche giorno fa la like box si vedeva correttamente, poi sono scomparse le immagini dei fan e ora compare solo lo spazio bianco... quando sistemeranno però? Uff, che pizza!

    Complimenti per il blog, davvero ben fatto.

    RispondiElimina
  6. Ciao scusa, ho seguito le tue ottime indicazioni, ma il colore di sfondo del mio sito non è bianco, mentre il widget mi sembra sia solo trasparente (o almeno io non sono riuscito a impostarlo.
    Sai darmi qualche dritta su come fare ad inserire uno sfondo bianco?

    io ho scritto così nell'html ma il risultato non cambia.
    grazie

    iframe scrolling="no" frameborder="0" src="http://www.facebook.com/plugins/likebox.php?id=XXX&width=292&connections=10&stream=false&header=false&height=260" style="border: medium none; overflow: hidden; width: 292px; height: 255px; color: rgb(255, 255, 255);" allowtransparency="false&"/iframe

    RispondiElimina
  7. @Progetto Ghiaia
    Segui le indicazioni di questo articolo
    http://www.ideepercomputeredinternet.com/2010/07/come-rendere-visibile-il-pulsante-mi.html

    RispondiElimina
  8. mi ha dato questo feedback... che faccio ???

    The page you requested was not found.
    You may have clicked an expired link or mistyped the address. Some web addresses are case sensitive.

    RispondiElimina
  9. @Cloo
    Forse non hai copiato correttamente il codice del plugin di Facebook. Oppure non hai inserito il numero ID della tua pagina ufficiale

    RispondiElimina
  10. fata procedura varie volte...
    il codice di fb copiato per bene... e tutto... fatto tutto con copia e incolla ma nulla... come do il get code da dietro l'anteprima già mi da quel feedback

    RispondiElimina
  11. risolto... ancora più in basso nella pagina c'è qualcosa di ancora più facile :
    scorrere in basso la pagina e clikka su ottieni badge...
    poi basta copiare e incollare nella web page o blog !!!
    grazie ugualmente

    RispondiElimina
  12. tutto mi è stato molto utile, grazie.
    il mio unico problema è che generando il codice dalla pagina di facebook, qualsiasi cosa cambio, ad esempio elimino la spunta su stream e header, nell'anteprima di facebook vedo in modo esatto come vorrei che fosse la mia like box, ma quando aggiungo il codice su blogger, nn tiene conto di nessuna mia modifica, cioè si vede lo strem e la header. da cosa può dipendere?

    RispondiElimina
  13. ritiro la mia domanda, nn so cmq da cosa dipende il fatto che il codice è inesatto. ho dovuto modificarlo a mano e adesso ho il risultato che volevo.
    grazie ancora per le dritte :)

    RispondiElimina
  14. Ciao, vorrei sapere come rendere questo like box in italiano!

    RispondiElimina
  15. @Pierzollo
    Guarda che è già in italiano :)

    RispondiElimina
  16. Ciao, questo tipo di widget funziona solo se la pagine FB è fan oppureanche con un profilo?
    perchè io ho il profilo e vorrei mettere nel blog un quadretto con il collegamento.
    mi aiuti?
    grazieeee!

    RispondiElimina
  17. @Ventuone
    Vai su Facebook e apri il tuo Profilo. In basso a sinistra vedrai il link "Aggiungi un badge al tuo sito". Seguilo, lo puoi aprire anche da qui
    http://www.facebook.com/badges/profile.php
    Vai su Modifica Badge per configurarlo quindi aggiungilo a Blogger cliccando sopra all'icona. Con il mouse poi lo posizioni come vuoi andando su Design > Elementi pagina.

    RispondiElimina
  18. Ciao, da un mesetto a questa parte nn mi funziona il Like Box di FB sul mio blog per promuovere il gruppo su FB, ed ho deciso di cancellarlo. Ho provato a reinstallarlo ma mi da sempre errore, tra l'altro il codice da inserire non mi appare come da te descritto ma nel seguente modo: /group.php?gid=75301919014&ref=ts Ho provato più volte eliminando pure alcune parti ma niente mi compare la seguente scritta: "Plugin cannot be rendered with the specified parameters". C'é un modo per risolvere questo problema? Grazie.

    RispondiElimina
  19. @Sail Away
    Prova a seguire questa guida
    http://www.ideepercomputeredinternet.com/2011/06/come-installare-tutti-i-plugin-di.html
    Naturalmente puoi installare solo il LikeBox e non gli altri plugin. Facebook ultimamente ha cambiato qualcosa.

    RispondiElimina
  20. Ciao,
    da un mesetto circa non visualizzo più in modo corretto il like box...anzi, a volte visualizzo solo la scritta " vai a facebook".
    ho provato a installare un altro like box, pensando che forse inavvertitamente avevo cancellato parte del codice...ma anche la seconda ha gli stessi problemi.
    Secondo te cosa devo fare?
    Grazie mille:-)))

    RispondiElimina
  21. @Leda
    Prova a seguire questa procedura
    http://www.ideepercomputeredinternet.com/2011/06/come-installare-tutti-i-plugin-di.html
    che serve per tutti i plugin. Poi puoi installare solo quelli che ti interessano come il Like Box.

    RispondiElimina
  22. Ciao Ernesto,
    grazie per la risposta e per la velocità!:-)
    Grazie, provo a fare come mi hai detto!
    Leda

    RispondiElimina
  23. Ciao, sto provando ad inserire il like box in una pagina html.
    Ho però un problema: al posto del box mi compare un riquadro bianco delle stesse dimensioni del box stesso.
    Ho controllato mille volte... ho copiato bene il codice iframe!
    Come posso risolvere questo problema?
    Grazie

    RispondiElimina
  24. @Daniele M.
    Il problema non è tuo e neppure mio ma di Facebook che modifica i codici di continuo. Adesso devi seguire questo tutorial
    http://www.ideepercomputeredinternet.com/2011/12/come-installare-i-plugin-di-facebook.html
    Nella parte finale del post acquisisci il codice della Fan Box modificando i dati.

    RispondiElimina
  25. Ciao Ernesto
    grazie per la velocità della risposta
    Il mio però non è un blog su blogger ma un sito web.
    In tal caso cosa devo fare?

    RispondiElimina
  26. @Daniele M.
    Devi seguire ugualmente il tutorial che ti ho indicato. Cambia solo la parte finale. Il codice invece di incollarlo su un widget HTML lo inserisci nel tuo sito web con le modalità che lo consentono. Se hai un sito certamente saprai modificarne il codice ;)

    RispondiElimina
  27. Grazie infinite per i tuoi preziosissimi consigli, pratici e semplici da seguire. Davvero, fino a ieri impazzivo per quel benedettissimo like box, ora finalmente compare nel mio blog. D'ora in avanti terrò d'occhio il tuo sito, sono una blogger da un paio di mesi e sto imparando moltissimo su questo mondo...è tosta, ma voglio farcela! Grazie ancora e continua a postare articoliiiii...^_^

    RispondiElimina
  28. Grazie mille! Questo post è stato l'unico (degli almeno 20 che ho letto) a spiegare in modo semplice e chiaro ogni singolo passaggio! Complimenti, ottimo lavoro! :D

    RispondiElimina
    Risposte
    1. @Virna-OgniRiccioUnCapriccio
      Grazie però il post è un po' datato e ora ci sono dei sistemi più semplici. Però se a te funziona bene lascia pure tutto così.

      Elimina
  29. DOPO 3 ORE E INFINITE PAGINE LETTE PER METTERE STO CAVOLO DI PULSANTE SOLO TU HAI SCRITTO COME SI METTE DAVVERO!!!! GRAZIEEEEEEEEEEEEEEE

    RispondiElimina
  30. Ciao,
    seguo il tuo blog da un bel pò ma solo ora scrivo.
    Ho installato la Like box in base alle istruzioni ed è andato tutto bene.
    L'unica cosa che non capisco è come mai si vedano le stesse facce degli iscritti più volte. Non so se ho sbagliato qualcosa...
    Mi puoi aiutare?

    RispondiElimina
    Risposte
    1. @StartfromScratch
      E' la prima volta che sento di questa cosa. Non dipende certamente da Blogger perché lo script arriva dai server di Facebook. Probabilmente si tratta di un bug. Prova a rivolgerti al loro supporto però può darsi anche che alcuni fan utilizzino lo stesso avatar o che la stessa persona si sia iscritta con due account con la stessa immagine.

      Elimina
  31. Ciao!

    Ho un problema: quando vado a cliccare la versione "iframe" del codice non succede nulla. Ovvero: ora facebook di defaul ti da la versione HTML5 e ti fa scegiere fra XFBML, IFRAME e URL e quando vado a scegliere la fersione iframe non cambia nulla ma rimane su HTML5. ome poso fare?

    Grazie inanticipo!

    RispondiElimina
    Risposte
    1. @ MatteoMerlotti
      Il tool attualmente non funziona. Non dà neppure l'anteprima. Prova nelle prossime ore o nei prossimi giorni

      Elimina
  32. grazie mille, spiegazione molto chiara!

    RispondiElimina
  33. Ciao, io non riesco a integrare il Like Box nel sito personale (non è un blog), ho provato con il codice IFrame, Url e HTML5. Mesi fa ci sono riuscito e adesso (ho aggiornato il sito, non ho salvato il tutto come backup...è stato cancellato il Like box) non so dov è l'errore.

    RispondiElimina
    Risposte
    1. Prova con questo sistema
      http://www.ideepercomputeredinternet.com/2013/08/like-box-facebook-code-blogger-wordpress.html
      Potrebbe esserti utile anche leggere i commenti dei lettori con le relative risposte
      @#

      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