Pulsante "Mi piace" per il web

Quando una persona che visita la tua pagina web clicca sul pulsante Mi piace, viene attivato un evento nell'app per registrare il Mi piace su Facebook.

Ottieni un pulsante "Mi piace" personalizzato

Usa il Configuratore del pulsante "Mi piace" per ottenere il codice per il pulsante "Mi piace" da inserire nella tua pagina web.

  1. Imposta l'URL della tua pagina web nel punto in cui collochi il pulsante "Mi piace"
  2. Personalizza il tuo pulsante "Mi piace"
  3. Visualizza un'anteprima del pulsante
  4. Clicca su Ottieni codice e copia e incolla il codice nella tua pagina web

Configuratore del pulsante "Mi piace"

URL per mettere "Mi piace"
Width
Layout
Tipo di azione
Dimensioni pulsante

Se stati già registrando eventi nell'app, rimuovi l'istruzione autoLogAppEvents=1 dal codice del pulsante per evitare registrazioni duplicate.

Usa i metatag di Open Graph per modificare l'anteprima dei link. Il tag og:url e l'attributo data-ref devono essere lo stesso URL.

Esempio di codice completo

Formattato per la leggibilità.

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" 
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1
             &version={graph-api-version}
             &appId={your-facebook-app-id}
             &autoLogAppEvents=1" 
        nonce="FOKrbAYI">
  </script>

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="https://www.your-domain.com/your-page.html" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>

</body>
</html>

Attributi HTML5 pulsante "Mi piace"

Attributo HTML5 Descrizione

data-action

Il verbo da mostrare sul pulsante: può essere like (predefinito) o recommend.

data-colorscheme

La combinazione di colori usata dal plug-in per il testo al di fuori del pulsante: può essere light (predefinito) o dark.

data-href

L'URL della pagina web a cui verrà messo "Mi piace".

data-kid-directed-site

Se il tuo sito web o servizio online è rivolto anche solo in parte a bambini di età inferiore a 13 anni, devi impostare questo valore su true. L’impostazione predefinita è false.

data-layout

Consente di selezionare uno dei vari layout disponibili per il plug-in: può essere standard (predefinito), button_count, button o box_count. Consulta le FAQ per maggiori informazioni.

data-lazy

true implica l'utilizzo del meccanismo di lazy-loading del browser impostando l'attributo iframe loading="lazy". Ne consegue che il browser non esegue il rendering del plug-in se non è vicino al viewport e potrebbe non essere mai visto. Può essere true o false (impostazione predefinita).

data-ref

Le etichette per il monitoraggio dei reindirizzamenti non devono superare 50 caratteri e possono contenere caratteri alfanumerici e alcuni caratteri di punteggiatura (al momento +/=-.:_). Consulta le FAQ per maggiori informazioni.

data-share

Specifica se includere un pulsante Condividi accanto al pulsante "Mi piace", true o false (predefinito). Funziona solo con la versione XFBML.

data-size

Il pulsante è disponibile in 2 dimensioni, large e small (predefinito).

data-width

La larghezza del plug-in (solo per layout standard), soggetta a quella minima e quella predefinita. Consulta la tabella Impostazioni di layout per maggiori dettagli.

Impostazioni di layout

Le Impostazioni di layout sono opzionali.

Layout Dimensioni predefinite

standard

Larghezza minima: 225 pixel.
Larghezza predefinita: 450 pixel.
Altezza: 35 pixel (senza immagini) o 80 pixel (con immagini).

box_count

Larghezza minima: 55 pixel.
Larghezza predefinita: 55 pixel.
Altezza: 65 pixel.

button_count

Larghezza minima: 90 pixel.
Larghezza predefinita: 90 pixel.
Altezza: 20 pixel.

button

Larghezza minima: 47 pixel.
Larghezza predefinita: 47 pixel.
Altezza: 20 pixel.

Modifica della lingua

Puoi modificare la lingua del pulsante "Mi piace" caricando una versione localizzata dell'SDK di Facebook per JavaScript. Sostituisci en_US con la lingua desiderata, ad es. fr_FR per il francese (Francia).

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version={graph-api-version} />"; 

In base alla lingua, potresti dover modificare la larghezza dei Plug-in social.