Plug-in di incorporazione di Pagine

Grazie al plug-in di incorporazione di Pagine, puoi incorporare e promuovere in modo semplice le Pagine Facebook nel tuo sito Web. Proprio come su Facebook, i visitatori possono mettere "Mi piace" alla Pagina e condividerla senza abbandonare il tuo sito.

Impostazioni

Oltre alle impostazioni precedenti, puoi anche modificare quelle indicate di seguito:

Impostazione Attributo HTML5 Descrizione Valore predefinito

href

data-href

L'URL della Pagina Facebook.

Nessuno

width

data-width

La larghezza del plug-in in pixel (minimo 180 e massimo 500).

340

height

data-height

L'altezza del plug-in in pixel (minimo 70).

500

tabs

data-tabs

Tab da visualizzare, ad es. timeline, events, messages. Aggiungi più tab mediante un elenco separato da virgole, ad es. timeline, events.

timeline

hide_cover

data-hide-cover

Nasconde l'immagine di copertina nell'intestazione.

false

show_facepile

data-show-facepile

Mostra le immagini del profilo quando gli amici mettono "Mi piace".

true

hide_cta

data-hide-cta

Nasconde il pulsante di invito all'azione personalizzato (se disponibile).

false

small_header

data-small-header

Usa l'intestazione ridotta.

false

adapt_container_width

data-adapt-container-width

Cerca di adattarsi alla larghezza del contenitore.

true


Attributi obsoleti

  • L'attributo data-show-posts non è più usato. Usa l'attributo tabs/data-tabs e il valore timeline per visualizzare i post del diario della Pagina.

Aggiunta del plug-in di incorporazione di Pagine a un sito Web

La configurazione standard del plug-in di incorporazione di Pagine comprende solo l'intestazione e un'immagine di copertina. Questo formato è ideale per la promozione della Pagina in spazi ristretti, ad esempio nella parte superiore di una barra laterale.

<div class="fb-page" 
  data-href="https://www.facebook.com/facebook"
  data-width="380" 
  data-hide-cover="false"
  data-show-facepile="false"></div>

Invito all'azione

Se la tua Pagina contiene un pulsante di invito all'azione personalizzato, viene mostrato in sostituzione di quello predefinito, ovvero il pulsante Condividi.

Se la larghezza del plug-in è inferiore a 280 pixel, viene mostrato il pulsante Condividi predefinito, per evitare problemi di allineamento nelle varie versioni tradotte.

Tab della Pagina: Diario, Eventi e Messaggi

Adesso, puoi avere le tab Diario, Eventi e Messaggio nel plug-in:

  • Tab Diario: mostra i post più recenti nel diario della tua Pagina Facebook.
  • Tab Eventi: consente di seguire gli eventi della Pagina e attivare i relativi aggiornamenti dal plug-in.
  • Tab Messaggi: consente di inviare messaggi alla Pagina direttamente dal tuo sito Web. Per usare questa funzione, è necessario aver effettuato l'accesso.

Abilitazione dei messaggi sulla Pagina

Per abilitare i messaggi nella tua Pagina Facebook, accedi a Settings della Pagina. In corrispondenza di Messages, spunta Consenti agli utenti di contattare privatamente la mia Pagina mostrando il pulsante Messaggio (link diretto: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view).

Aggiunta di più tab

Per aggiungere più tab, usa un elenco separato da virgole all'interno dell'attributo data-tabs:

<div class="fb-page" 
  data-tabs="timeline,events,messages"
  data-href="https://www.facebook.com/YoloBookStore"
  data-width="380" 
  data-hide-cover="false"></div>

Tab singola

Puoi anche soltanto aggiungere un'unica tab contenente timeline, events o messages:

<div class="fb-page" 
  data-tabs="events"
  data-href="https://www.facebook.com/YoloBookStore"
  data-width="380"></div>

Larghezza adattabile

Per impostazione predefinita, il plug-in si adatta a width del contenitore principale al caricamento della Pagina (minimo 180px, massimo 500px). Ciò è utile per i layout variabili:

<div style="width: 190px;">
  <!-- Page plugin's width will be 190px -->
  <div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

Se width dell'elemento principale è maggiore di width del plug-in di incorporazione di Pagine, verrà mantenuto il valore definito in data-width:

<div style="width: 600px;">
  <!-- Page plugin's width will be 500px -->
  <div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

Il plug-in non sarà mai inferiore a 180px:

<div style="width: 100px;">
  <!-- Page plugin's width will be 180px -->
  <div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

Puoi disattivare la larghezza adattabile deselezionando l'opzione Adatta alla larghezza del contenitore del plug-in; in questo modo il plug-in viene visualizzato alla larghezza specificata, indipendentemente dal contenitore principale.

Nessun ridimensionamento dinamico

Il plug-in di incorporazione di Pagine funziona con i layout responsive, variabili e statici. Puoi usare media query o altri metodi per impostare width dell'elemento principale, tuttavia tieni presente che il plug-in:

  • stabilirà widthal caricamento della Pagina;
  • non modificherà il modello di riquadrodopo il caricamento della Pagina.

Per modificare width del plug-in in base al ridimensionamento della finestra, devi eseguire il rendering del plug-in manualmente.

Visualizzazione delle immagini degli amici

Mostra chi mette "Mi piace" alla Pagina usando le immagini del profilo reali anziché un semplice numero. Chi visita la Pagina vedrà il numero di amici che hanno messo "Mi piace" a essa e le relative immagini del profilo.

Puoi attivare l'opzione selezionando Show Friend's Faces nel configuratore.

<div class="fb-page"
  data-href="https://www.facebook.com/imdb" 
  data-width="340"
  data-hide-cover="false"
  data-show-facepile="true"></div>

Pagine con restrizioni relative alla privacy

Le Pagine Facebook con limitazioni di privacy non possono essere incorporate.

Modifica della lingua

Puoi modificare la lingua del plug-in di incorporazione di Pagine caricando una versione localizzata dell'SDK di Facebook per JavaScript. Durante il caricamento dell'SDK, modifica il valore js.src per usare la tua lingua: ti basta sostituire en_US con la lingua desiderata, ad es. ru_RU per il russo (Russia):

Esempio
js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

Le lingue supportate sono indicate nel file XML delle lingue di Facebook. In base alla lingua, potresti dover modificare la larghezza dei plug-in social. Per maggiori informazioni, puoi consultare la nostra pagina dedicata a localizzazione e traduzione.