Post incorporati

I post incorporati consentono di inserire in modo semplice post pubblici di Pagine o utenti Facebook nei contenuti del tuo sito o della tua pagina Web. È possibile incorporare solo post pubblici provenienti da Pagine e profili Facebook.

Generatore di codici

URL del post
La larghezza in pixel del post (comprese tra 350 e 750)
Ottieni il codice

Impostazioni

Impostazione Descrizione Valore predefinito

data-href

L'URL univoco del post.

n/a

data-width

La larghezza del post. Minima 350 pixel, massima 750 pixel. Lascia il campo vuoto per una larghezza variabile.

fluid width

data-show-text

Applicata a un post con foto. Seleziona true per includere il testo del post su Facebook, se presente.

false

Acquisizione del codice da un post

1. Accesso al post

Puoi ottenere il codice di incorporamento direttamente dal post. Se il post è visibile a Tutti, clicca sull'icona in alto a destra nel post stesso su Facebook.

Scegli Embed Post nel menu a discesa:

Per i post con foto, seleziona il pulsante Embed Post in basso a destra:

2. Copia e inserimento del codice

Verrà visualizzata una finestra di dialogo contenente il codice per incorporare il post. Copia e incolla il codice nel punto della tua pagina Web in cui desideri posizionarlo.

Per informazioni tecniche dettagliate, consulta la sezione Aggiunta manuale del codice

Aggiunta manuale del codice

Oltre a usare il generatore di codici, puoi anche incorporare il codice manualmente.

1. Acquisizione dell'URL del post

Devi innanzitutto ottenere l'URL del post da condividere. Il post deve essere visibile a tutti, ossia deve presentare un'icona grigia a forma di mondo accanto alla data di pubblicazione del post:

Per eseguire un test, usa questo URL di esempio:

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2. Caricamento dell'SDK JavaScript

Per usare il plug-in dei post incorporati, o altri plug-in social, devi aggiungere l'SDK di Facebook per JavaScript al tuo sito Web. Devi caricare l'SDK una sola volta nelle pagine, possibilmente subito dopo il tag iniziale <body>:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Per ricevere maggiore assistenza con l'implementazione dell'SDK JavaScript, consulta l'apposita guida di avvio rapido.

3. Posizionamento del tag del post incorporato

Posiziona il tag del post incorporato in qualsiasi punto del tuo sito Web. Sostituisci {your-post-url} con l'URL del post.

<div class="fb-post" data-href="{your-post-url}"></div>

4. Test

Dopo aver completato questi passaggi, potrai testare il post incorporato. Un'integrazione completata avrà un aspetto simile a questo:

<html>
  <title>My Website</title>
<body>
  <script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5" 
      async></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

Il risultato del nostro test d'esempio è illustrato nello screenshot seguente.

5. Personalizzazione

Segui le istruzioni più in basso in questa pagina per modificare le dimensioni, la lingua e altre impostazioni.

Acquisizione dell'URL di un post

In alcune situazioni, il codice di incorporamento viene creato da un CMS ma serve solo l'URL del post non elaborato. Puoi ottenere l'URL dei post in due modi:

  1. Copia l'URL del permalink dalla barra degli indirizzi del browser.
  2. Clicca con il tasto destro del mouse sulla data di pubblicazione del post e copia l'indirizzo del link.

Entrambi i metodi sono evidenziati in rosso nello screenshot seguente.

Tramite API Graph

Se desideri integrare automaticamente i post incorporati nel tuo sito Web, puoi usare l'API Graph per aggregare i post. Ad esempio, puoi usare l'endpoint API Page Feed e il parametro permalink_url di fields.

La risposta alla richiesta effettuata a /{page-id}/feed?fields=permalink_url avrà un aspetto simile:

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

Layout su computer

Puoi modificare la larghezza dei post incorporati su computer tramite l'attributo data-width nell'apposito tag, come mostrato nell'esempio seguente. Scegli un valore compreso tra 350 e 750 pixel.

Non usare i tag di stile CSS per modificare le dimensioni dei plug-in poiché potrebbero verificarsi errori di visualizzazione.

<!-- WRONG! -->
<style type="text/css">
.fb-post {
  width: 500px;
}
</style>
<div 
  class="fb-post"
  data-href="{your-post-url}">
</div>

<!-- CORRECT -->
<div 
  class="fb-post" 
  data-width="500"
  data-href="{your-post-url}">
</div>

Layout sul Web mobile

Sul Web mobile, i post incorporati si adattano automaticamente alla larghezza del contenitore.

WordPress

Se stai già usando l'SDK di Facebook per JavaScript in un sito WordPress, puoi usare il plug-in dei post incorporati aggiungendo il tag fb-post al tuo post WordPress:

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

Se non usi l'SDK di Facebook per JavaScript e incorpori un post copiando e incollando lo snippet, reperibile nei post di Facebook, molto probabilmente il plug-in dei post incorporati non verrà visualizzato poiché WordPress converte tutti i caratteri & in #038;, bloccando il funzionamento del plug-in.

In questo caso, per aggiungere il plug-in, usa il codice seguente:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v2.10'
    });
  }; 
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

Una nuova e più semplice integrazione con WordPress sarà disponibile a breve.

FAQ

Se usi le versioni XFBML o HTML5, devi includere il codice della lingua quando crei un'istanza per la libreria.

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. "fr_FR" per il francese (Francia):

// Example 1:
'//connect.facebook.net/fr_FR/sdk.js';

// Example 2:
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6";

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.

Permalink

I post incorporati presentano i contenuti multimediali allegati e il numero di "Mi piace", di condivisioni e di commenti. I post incorporati mostrano a chi visita il tuo sito Web le stesse informazioni dettagliate presenti su Facebook.com e consentono di seguire autori di contenuti o Pagine e mettere "Mi piace" direttamente dall'incorporamento.

Permalink

Il post incorporato viene sostituito dal messaggio seguente:

Permalink