Post incorporati

I post incorporati sono un modo semplice per inserire post pubblici (di una Pagina o di una persona su Facebook) nel contenuto del tuo sito web o della tua pagina web. È possibile incorporare solo post pubblici da Pagine e profili Facebook.

Generatore di codici

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

Impostazioni

Impostazione Descrizione Impostazione predefinita

data-href

L'URL univoco del post.

n/a

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).

false

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. Imposta su true per includere il testo del post su Facebook, se presente.

false

Acquisizione del codice da un post

1. Vai al tuo 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 incolla il codice

Vedrai apparire una finestra di dialogo con 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 al 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 async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

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

3. Posiziona il 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, puoi testare il tuo post incorporato. Un'integrazione completata avrà un aspetto simile a questo:

<html>
  <title>My Website</title>
<body>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></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 regolare le dimensioni, la lingua e altre impostazioni.

Ottenere l'URL di un post

Potrebbero esserci scenari in cui il tuo codice di incorporamento viene creato da un CMS e hai bisogno dell'URL del post raw. 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 l'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 al seguente:

{
  "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à utilizzando l'SDK di Facebook per JavaScript nel tuo sito WordPress, puoi utilizzare il plug-in Post incorporati semplicemente 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 stai utilizzando l'SDK di Facebook per JavaScript e incorpori un post tramite lo snippet copia e incolla, che puoi ottenere da ogni post di Facebook, molto probabilmente il plug-in Post incorporato non verrà visualizzato poiché WordPress convertirà tutti i caratteri & in #038; corrompendo il plug-in.

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

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v9.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

Prossimamente verrà rilasciata una nuova e semplice integrazione con WordPress.

FAQ

Se utilizzi le versioni HTML5 o XFBML, devi includere il codice della lingua quando istanzi la libreria.

Durante il caricamento dell'SDK, modifica il valore di js.src per usare la tua lingua. Sostituisci en_US con la lingua desiderata, ad es. fr_FR per il francese (Francia):

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

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

Le lingue supportate sono indicate nel file XML Facebook Local.

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.

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.