Come personalizzare il Plugin Pagina Facebook nel proprio sito

Sicuramente ti sarai accorto che il vecchio Plugin Pagina Facebook, che genera un box all’interno del tuo sito per l’acquisizione di nuovi fan, è stato sostituito da una nuova versione. Se non hai ancora aggiornato manualmente il codice, non hai bisogno di preoccuparti. Facebook ha automaticamente fatto la migrazione di tutti i box della versione vecchia a quella nuova.

La nuova grafica del plugin si presenta pulita, togliendo importanza al brand di Facebook e dando priorità al brand della pagina personale/aziendale.
Con la nuova versione hai la possibilità di visualizzare la cover che hai impostato su Facebook. Come avrai notato su Facebook c’è la possibilità di inserire un bottone “Call to action”, che viene usato solitamente per reindirizzare il pubblico in una pagina di acquisto, newsletter, form di contatto ecc.
Con il nuovo plugin ora si può tranquillamente scegliere se visualizzare o meno questo bottone.

Tra le altre differenze che puoi notare c’è la possibilità di visualizzare le immagini delle persone in una riga.
Perchè è importante questo? Direi che è molto importante, Facebook mostra solo gli amici in comune che hanno già cliccato “Mi Piace”, quindi quando un visitatore atterra su una pagina e vede i like di volti familiari ha più chance di ottenere dei “Mi piace”.

Personalizzare il Plugin Pagina di Facebook è molto semplice. Puoi trovare una guida completa nel sito ufficiale. Seguendo la guida puoi scegliere se creare un box complesso con immagine cover, post, bottone call to action ecc oppure un box semplice con logo della tua pagina e bottone “Mi piace”.

Poi se la personalizzazione di default non è abbastanza per te, non è finita qui dal momento che le possibilità sono infinite. Tutto quello che dovrai fare sarà utilizzare la classe .fb-page del foglio di stile e sovrascriverla. (Solo se parti da zero con la programmazione css vedi questo corso )

plugin-facebook

Questo è un esempio che ho creato per Prima Posizione. (Vedi Esempio)

.fb-page, .fb-page:before, .fb-page:after {
border: 1px solid #ff5500;
}

.fb-page:before, .fb-page:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #ff5500;
-webkit-box-shadow: 0 35px 20px #ff5500;
-moz-box-shadow: 0 35px 20px #ff5500;
box-shadow: 0 35px 20px #ff5500;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}

.fb-page:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}

 

Se hai bisogni di consigli, lascia un commento qui sotto e sarò felice di risponderti.

Scritto da    |   settembre 18th, 2015   |   Nessun commento
Ertil Gani

Lascia un commento