BigThink

Come inserire il Like Button sulla tua Pagina Facebook

In molti mi chiedono come fare ad inserire il Like Button sul Tab FBML della Pagina Facebook.

Ufficialmente non si può: tentando di inserire il tag FBML fb:like non verrà visualizzato nulla. Tantomeno se provi ad inserire quello in versione IFRAME.

Per fortuna esiste un trucchetto che non tutti sanno…

1. Il segreto: i commenti

Girando su Facebook avrai notato che ci sono Pagine che effettivamente mostrano il Pulsante Mi Piace, come ad esempio Threadless oppure questo Tab che abbiamo realizzato per EMP.

Come fanno? Se noti, il Like Button compare sopra al widget dei commenti, inserito grazie al tag fb:comments.

Ecco quindi la soluzione per inserire solo il Like Button: inserisci i commenti, ma nascondi le parti che non ti servono, con i CSS.

Ecco il codice:

<fb:comments xid="[NOME-A-SCELTA]" canpost="false" showform="false" candelete="false" numposts="0" returnurl="[URL-PAGINA-FACEBOOK]" publish_feed="true" simple="true"></fb:comments>

Così si inserisce il widget dei commenti, ridotto al minimo, con i commenti chiusi e senza il form. Vediamo i parametri da modificare:

  • xid dovrà essere una qualsiasi stringa che identifica questo set di commenti.
  • returnurl sarà l’URL della Pagina Facebook o pagina web a cui volete associare il Like.

Lascia pure gli altri attributi così come sono. Ecco cosa visualizzerai:

2. Rifinisci con i CSS

Per nascondere le due righe sotto relative ai commenti, devi aggiungere questa regola di CSS:

<style>
.comment_body{display:none;}
</style>

Se vuoi nascondere anche le facce, usa invece:

<style>
.comment_body, .connect_widget_sample_connections{display:none;}
</style>

Ed ecco il risultato:

Esageriamo: vuoi visualizzare solamente il Pulsante? Ecco il codice CSS finale:

<style>
.comment_body, .connect_widget_sample_connections, .connect_confirmation_cell{display:none;}
</style>

Verrà mostrato solo il Like Button, senza scritte, numeri o altro. Cliccandovi sopra, scomparirà del tutto.

3. Si può fare?

Solitamente Facebook vieta di alterare i suoi widget con i CSS. Ad esempio, per il normale Like Button dice:

By using the Like Button, you agree to the general guidelines and terms found here. You also agree that you will not modify the Like Button in any way beyond the customization options provided on this page.

Nel caso del widget per i commenti, invece, Facebook permette espressamente di personalizzarli come si vuole, con i CSS:

You can style fb:comments arbitrarily by using overriding styles and embedding CSS (or using link tags) as described in CSS Tips and Tricks.

D’altra parte, la Pagina Facebook della Disney usa esattamente la medesima tecnica.

Articolo scritto da Ghido

Fondatore di BigThink.it, si occupa dello sviluppo e del coordinamento dei progetti tecnologici. Specializzato nel Marketing su Facebook e nello sviluppo di Applicazioni Social, fa consulenza e formazione ad aziende ed agenzie.

Leggi anche...

Perchè il mio Like Button non mostra la Pagina Fantasma?

Perchè il mio Like Button non mostra la Pagina Fantasma?

Dopo il mio intervento al Symposium GT, in molti hanno iniziato a chiedermi perchè non riuscissero ad amministrare le "Pagine Fantasma" create dal Pulsante Mi piace, nè a visualizzare il link di amministrazione. In realtà ho scoperto che non è così immediato e bisogna compiere esattamente tutta una serie di passi perchè tutto funzioni. ...
Come trasferire gli utenti da un Profilo ad una Pagina Facebook

Come trasferire gli utenti da un Profilo ad una Pagina Facebook

Qualche giorno fa abbiamo visto che l'errore principale commesso dalle aziende su Facebook è quello di aprire un Profilo Privato invece di una Pagina Facebook. Se un'azienda si rende conto dell'errore e vuole rimediare, come può fare a trasferire tutti i suoi amici e portarli a diventare fan della nuova Pagina, senza perdere troppe ...
Ora sì che il Like button manderà in pensione lo Share!

Ora sì che il Like button manderà in pensione lo Share!

Settimana scorsa Facebook ha fatto alcuni aggiornamenti al pulsante Mi piace che potrebbero sembrare di poco conto, ma che invece credo siano sostanziali. Se sfruttati come si deve, permetteranno di incrementare il passaparola ed il traffico da Facebook sul tuo sito. Analizziamoli uno alla volta. 1. Aggiunta la funzione di Share anche al Like Button ...
Leggi, guarda, compra... L'evoluzione del Facebook Like!

Leggi, guarda, compra… L’evoluzione del Facebook Like!

Facebook è cambiato. Se nell'Aprile 2010 il buon Zuck aveva lanciato l'ormai famoso Like Button, pochi giorni fa ha davvero deciso di rivoluzionare il modo di relazionarsi su Facebook. Prima, l'unico modo per connettersi con un oggetto dell'Open Graph era mediante l'azione di Like: cliccando sul pulsante Mi piace, creavo una connessione tra me ...
Come inserire il Facebook Like Button su WordPress

Come inserire il Facebook Like Button su WordPress

Nello scorso articolo ti ho spiegato i pro e i contro del Like Button. Se ti sei convinto e ora vuoi installarlo su ogni post del tuo blog WordPress, ora vedremo come fare. In molti hanno avuto problemi, quindi ti spiegherò nel dettaglio sia come inserirlo manualmente, che con i plugin appositi. Pronti, via! Inserire il ...

57 Commenti

  1. sara-

    e x inserirlo sull fbml come si fa? D: a me serve quello!

    19 novembre 2011, 18:21
  2. feffoxD

    Senti scusa ma come si fa nell’fbml a mettere quel coso che cliccando mi piace, condividi e premendo f5 esce o una scritta o una foto , rispondimi ti pregooooo

    10 novembre 2011, 18:20
  3. Francesco

    Sembra che Facebook li abbia bloccati:

    “Sorry, this post contains a blocked URL

    The content you’re trying to share includes a link that’s been blocked for being spammy or unsafe:

    Body of an error/warning message. Title is: Sorry, this post contains a blocked URL

    For more information, visit the Help Center. If you think you’re seeing this by mistake, please let us know.”

    31 ottobre 2011, 20:43
  4. Come lo imposto io è giusto il codice? Perché non mi funziona?

    .comment_body, .connect_widget_sample_connections, .connect_confirmation_cell{display:none;}

    10 settembre 2011, 13:53
  5. Antonio

    scusa ma sul fbml sul pulsante mi piace che devo mettere su xid?

    8 settembre 2011, 11:25
  6. Alvise

    Ciao, volevo chiedere un’informazione a voi professionisti ed esperti. é possibile in qualche modo inserire il like botton all’interno di una pagina sviluppata in flash as2?

    Grazie della cortesia.

    Bel sito, bravi!

    2 settembre 2011, 09:34
  7. Riccardo

    Scusate per l’ignoranza qualcuno mi puoi dare tutto preparato da fare un copia e incolla nell’FMBL di questa pagina: https://www.facebook.com/Loveforthebeatles ???? grazie ciao…!!!!grazie ancora!!!

    30 agosto 2011, 20:07
  8. Riccardo

    Scusate per l’ignoranza qualcuno mi puoi dare tutto preparato da fare un copia e incolla nell’FMBL di questa pagina: https://www.facebook.com/Loveforthebeatles ???? grazie ciao…!!!!

    30 agosto 2011, 20:06
  9. Martina

    Ciao ho provato a mettere il bottone ma non si vede nulla, l’ho inserito sulla prima casella mentre su quella sotto ho messo quella che dovrebbe vedersi se l’utente fosse fan, e funziona, mentre il bottone like non si vede e anche se aggiugno lo style css non va nulla come ma ?? Ah e per caso sai come si mette il nome dell’utente e il bottone condividi ?? L’ho visto in alcune pagine
    Grazie

    27 agosto 2011, 14:54
  10. genninho94

    Il tasto funziona..xò quando clikko su benvenuto mi compare la scritta:
    Bad Parameter
    there was an error understanding the request.. è normale?

    30 luglio 2011, 01:39
    • Marco

      Ho il tuo stesso problema, funziona tutto alla perfezione, ma mi da il Bad Parameter… ho fatto una ricerca su google ho trovato alcune cose ma non ci ho capito tanto, ho provato diversi codici che ho trovato e mi dava sempre lo stesso problema!

      1 agosto 2011, 14:40
  11. uff

    allo’ io metto <style ecc
    bottone
    ma nn va
    nemmeno lo style=blabla nell’apertura (come si fa con le table) consigli?

    19 luglio 2011, 16:53
  12. Scusate la mia pagina ha circa 200 fan ma mi viene scritto che a 5000 e passa persone piace questo elemento. Come posso fare?

    26 febbraio 2011, 11:30
  13. Michele

    Ciao! Ho aggiunto il codice a questa pagina, ma come vedi non mi funziona! http://www.facebook.com/pages/The-Jokers/159236708215?v=app_4949752878
    Come mai?

    1 febbraio 2011, 20:14
  14. Marco

    Ciao, ho seguito il tutorial ma non riesco a far scomarire il campo commento in internet explorer. Potresti creare un esempio di css esterno e come lincarlo ? Grazie Marco

    30 dicembre 2010, 17:36
  15. Alessandra

    Ottimo tutorial! Anche inserendo più widget dei commenti il tempo di caricamento della pagina non aumenta di molto e si possono diminuire gli step al “mi piace” nel caso di più pagine collegate tematicamente tra loro. I risultati del tuo post a http://www.facebook.com/jobville grazie :)

    19 novembre 2010, 10:50
    • Bellissimo! Davvero complimenti, direi che ne hai davvero fatto buon uso ;)

      19 novembre 2010, 11:24
    • Ciao Alessandra!!!

      Davvero complimenti per il tuo tab (benvenuto e gli altri!!!)!
      Ti chiedo una cosa: nel tab “Connettiti”, come sei riuscita a creare link diversi per i canali social a livello di codice??? Nella mia ignoranza io penso banalmente ad una mappatura di un’immagine, che però FBML non “capisce” e che quindi non funziona…sapete suggerirmi qualche trucchetto???

      grazie!

      19 novembre 2010, 11:40
  16. mi sfugge un passaggio:

    nella tab EMP fai “mi piace” di un url esterno, e fin li ok.

    Sulla tab disney invece ti iscrivi alla pagina di cui c’è il like button (sono delle mini like box quelle)..secondo te si può fare o facebook ha permesso alla disney di fare un magheggio del genere?

    12 novembre 2010, 11:29
    • La Disney usa esattamente il metodo che ho spiegato: associa i widget dei commenti alle Pagine Facebook e nasconde il form con i CSS.
      In un recente aggiornamento, Facebook ha affermato che è permesso associare il Like Button non solo a pagine esterne, ma anche a Pagine Facebook:

      Can I link the Like button to my Facebook page?
      Yes. Simply specify the URL of your Facebook page in the href parameter of the button.

      12 novembre 2010, 12:16
      • Ecco una buona notizia! Grazie Ghido e complimenti per i tuoi articoli, sono sempre utilissimi!

        12 novembre 2010, 12:21
        • Grazie Davide ;)

          12 novembre 2010, 12:26
  17. Ciao Ghido, ottimo post. Volevo chiederti se per caso conosci la tecnica attraverso cui usare il pulsante like più volte all’interno della stessa pagina.

    Come ad esempio fanno quei siti in cui nello stesso articolo sono presenti molte frasi per fare gli auguri di compleanno, e ad ogni frase è associato il like (oltre che il pulsante twitter).

    12 novembre 2010, 11:10
  18. Alberto

    ciao a tutti, ho usato questa tecnica e funziona bene!!
    vorrei aggiungere un’osservazione:

    nel momento in cui si clicca il “mi piace” inserito nel Tab, quello esterno non scompare (come succederebbe cliccando su quello esterno) e anche il contatore dei fan non viene aggiornato. Per vedere l’aggiornamento bisogna ricaricare la pagina.

    E’ possibile usare una funzione javascript per ricaricare la pagina, ad es dopo 1secondo dalla pressione del pulsante?
    E se si, la richiamiamo? onclik sul pusante è possibile?

    10 novembre 2010, 17:20
    • Verissimo quello che dici. Purtroppo, però, non è possibile usare javascript che ricarichino la pagina (vengono filtrati da Facebook), nè associare eventi al pulsante.

      12 novembre 2010, 12:18
  19. stequad

    “semplici”… per te!! eheeh scherzo! ti rinnovo i complimenti e ti ringrazio per il “sapere” che metti a disposizone di tutti!

    9 novembre 2010, 23:48
  20. stequad

    cioè… per esempio… nella Tab di EMP c’è uno sfondo nero e “sopra” immagini varie e vari link… sembrano vari livelli…

    9 novembre 2010, 23:32
    • Si tratta solo di semplici div con sfondo, niente di particolare ^^

      9 novembre 2010, 23:37
  21. stequad

    Grandissimo Ghido!! Come sempre! Lo stavo aspettando!!!

    Ora serve solo da capire come inserire il like Button dentro un’immagine come fai tu! ;-)

    9 novembre 2010, 23:13
    • Uhm.. cioè?

      9 novembre 2010, 23:14
    • Marco

      haahah facile usa lo style per muovere il bottone dove vuole… puoi farlo con qualunque cosa
      -apri style-

      #NOME DIV{
      position:absolute;
      left:SPAZIO DA SINISTRApx;
      top:SPAZIO DA SOPRApx;
      }

      -chiudi style-

      -apri div id=”NOME DIV”
      QUELLO CHE TI PARE O IL BOTTONE MI PIACE
      -chiudi div

      20 luglio 2011, 17:46
  22. Ma in che senso xid dovrà essere una qualsiasi stringa che identifica questo set di commenti ?

    9 novembre 2010, 19:51
    • Mettici un testo a piacere. Ad esempio il nome della tua pagina.

      9 novembre 2010, 20:37
  23. mi dai il codice del bottone solo con qst link? http://www.facebook.com/pages/-El-cyeits-de-Flsaicieita-u-dsi-miiims-liik-/160037817368235?v=app_4949752878

    Nell’ fbml dopo varie cose vorreiinserire il bottone mi piace da solo… mi puoi dare il codice completo che lo copio e lo incollo…. Grazie

    9 novembre 2010, 19:45
    • Dai che ce la puoi fare anche da solo, è tutto spiegato qui sopra…

      9 novembre 2010, 20:34
  24. per qualche motivo non riesco a inserire il bottone…

    è sufficinete inserire nell’app fbml i codici di cui sopra modificando i 2 parametri, giusto?
    mi son perso qualche cosa?

    grazie comunque del tip ;-)

    9 novembre 2010, 14:07
    • Sì, basta inserire i due codici. Li hai inseriti nello Static FBML, vero?

      9 novembre 2010, 14:16
      • si, nella pagina “Modifica FBML”… prima c’era un’immagine statica e un breve testo e le vedevo, invece il tasto no…

        9 novembre 2010, 14:22
  25. Ciao,

    innanzitutto complimenti per tutto ciò che fai e per gli articoli, ti seguo sempre!!!
    Ti chiedo una cosa veloce, e scusa per la base di ignoranza che è insita nella domanda: ma nella stesura di un codice FBML per un tab, come e dove inserisco la dichiarazione dello style ovvero del CSS?

    Grazie mille di nuovo!!!

    9 novembre 2010, 11:10
    • Lo puoi inserire subito dopo il normale codice HTML/FBML.

      9 novembre 2010, 11:15
      • Giacomo

        Beh inserendo lo style nel testo:
        - style
        blabla
        - chiusura style

        non verrà visualizzato da IE . Quindi per far funzionare il tutto, linkare un file css esterno o scrivere lo style inline:

        - div style=”blabla”
        bottone
        - chiusura div

        9 novembre 2010, 16:26
        • Mmmm, vero. Inline non si può fare comunque, perchè il codice viene generato da Facebook. Quindi la soluzione è quella di richiamare il CSS esterno.

          9 novembre 2010, 20:33
          • Giacomo

            Giusto! Non pensavo che il lke button è generato automaticamente da facebook.

            10 novembre 2010, 22:57
        • stequad

          scusate…
          che intendete per “linkare un file css esterno”?? come si fa?

          10 novembre 2010, 11:31
          • Così:

            <link rel="stylesheet" href="http://www.miosito.it/style.css" type="text/css" />
            10 novembre 2010, 15:58

5 Citazioni