Incorporare pagina Facebook in un sito

A chi è rivolta questa guida?

A tutti coloro che hanno un sito in wordpress (e non solo) e vogliono integrare la story line della propria pagina facebook.

Non tutti ancora sanno che è possibile incorporare una pagina Facebook nel proprio sito web andando a ricreare una finestra che racchiude tutte le informazioni essenziali della propria pagina, come like, story line, nome, copertina e immagine profilo oltre alla possibilità di aprire la pagina completa.

Di cosa abbiamo bisogno?

Per riuscire ad implementare la propria pagina facebook nel vostro sito web i passaggi sono molto semplici e intuitivi.

Per prima cosa dobbiamo andare in questa pagina che Facebook Developers ci predispone proprio a questo scopo – > Plugin di incorporazione Pagina

Ci troveremo una schermata simile a questa:

e andremo a completarla nel seguente modo:

  • URL della Pagina Facebook: Qui andremo ad inserire il link della propria pagina (quello della parra http per intenderci)
  • Tab: qui va customizzata in base a cosa si vuol mostrare come messaggi, timeline, eventi. Io vi consiglio di lasciare solo timeline che vi mostra così l’elenco dei post pubblicati nella pagina
  • Larghezza: qui andiamo ad impostare la larghezza della finestra facebook che comparirà sul nostro sito
  • Altezza: qui andiamo ad impostare l’altezza della finestra facebook che comparirà sul nostro sito
  • Usa titolo più piccolo: Se vogliamo che la fascia alta dove appare immagine profilo e nome pagina sia più o meno larga
  • : con questa opzione il plugin tenterà sempre di adattarsi in maniera responsive alla finestra dove è inserito
  • Nascondi immagine di copertina: Se volete perlappunto che l’immagine di copertina sparisca e la foto profilo e nome pagina cadano su fondo bianco
  • Mostra i volti dell’amico: Flagghiamo questa opzione se vogliamo che nel riquadro appaiano anche i volti degli amici che seguono la pagina.

 

Contattaci! La nostra creatività è a tua disposizione!

 

Le opzioni ogni volta che vengono modificate generano automaticamente una nuova anteprima che vi permette di rendervi conto di cosa verrà pubblicato sul vostro sito.

Ogni volta che modificate una delle opzioni, l’anteprima si aggiorna automaticamente quindi vedete in tempo reale quello che state andando a costruire.

Finito di settare le varie impostazioni vi basterà andare su “Ottiemi il Codice” e Facebook in una frazione di secondo vi risponderà con un popup dove vi mostretà il codice da inserire sul vostro sito web.

Facebook vi dà due blocchi di codice da inserire nel sito e indica di inserire il primo blocco subito dopo il tag body della pagina web e il secondo nel punto in cui volete vedere il plugin sul sito.

Facebook in questa finestra vi consiglierà due tipologie di codice:

  • SDK Javascript: Questa opzione di divide in due blocchi, un primo blocco “Step 1” che va inserito come codice nella pagina interessata dopo il tag di testo di apertura e un secondo blocco “Step 2” con il codice da inserire nella posizione della pagina dove vuoi appaia la finestra (questa opzione è la più funzionale ma più complessa per i meno esperiti)
  • IFrame: Questo è un unico codice da inserire nella posizione dove si vuole far comparire la finestra.

Seguendo questi passaggi dovreste riuscire ad avere la vostra bellissima pagina Facebook integrata al vostro sito.

Consigli per WordPress:

Se volete inserire la finestra di Facebook solo su alcune pagine il mio consiglio è di utilizzare l’SDK Javascript andando a inserire il codice dello “Step1” nell header.php di wordpress e lo “Step2” all’interno delle pagine interessate cliccando sull’opzione “Testo”.

Se volete inserire il codice nei widget del footer o della sidebar potete utilizzare tranquillamente lo spazio “Testo” dei widget e andare ad inserire lo “Step1” e “Step2” uno sotto l’altro in modo tale che appaia sempre nel vostro footer o sidebar laterale.

Se avete impostato un’altezza e una larghezza fissa e avete già incollato il codice nel vostro sito ma le dimensioni non vanno bene o non vi piacciono potete sempre andare a modificare il codice dello “Step2” andando a modificare le seguenti voci:

  • data-width=”larghezza pixel (es. 200)” data-height=”altezza pixel (es. 400)“

Spero che questa piccola guida vi sia stata utile e possa aiutarvi a migliorare il vostro sito web.