Come aggiungere la Recommendations Bar di Facebook in un sito

Facebook è il più grande Social Network del mondo e per questo motivo molti siti web si integrano con lui in modi diversi, aggiungendo componenti quali: facebook like box, facebook comments, facebook like button, e facebook send button.

In questo articolo vi mostreremo come aggiungere la Recommendations Bar di Facebook in un sito, in modo da poter aumentare ulteriormente le visite nel vostro sito mettendo in risalto articoli diversi.

La Recommendations Bar aggiunge un pulsante Mi Piace nella parte inferiore dello schermo, e si espande dopo alcuni secondi per suggerire, all’utente che sta leggendo un articolo, altri articoli che potrebbero interessargli.

La prima cosa da fare è andare nel sito Developers di Facebook nella sezione Plugin e scegliere nell’elenco di sinistra, tra le varie voci, Recommendations Bar.

Nella pagina che si apre occore inserire:

• in Domain l’indirizzo del sito;
• in Expand Delay il tempo di espansione della finestra che contiene i post suggerito;
• in Side of Window la posizione in cui la Recommendations Bar deve apparire, in questo caso Sinistra o Destra;
• in Verb to Display la scelta è sul like o sul Recommend per i post che appariranno.

Dove aver inserito questi dati non solo avrete un anteprima, in basso, della Recommendations Bar che avete creato ma cliccando su Get Code avrete la possibilità di ottenere il codice per inserirla nel vostro sito.

Il codice è diviso in due parti, il primo va inserito nell’Head della vostra Home Page:

<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/it_IT/all.js#xfbml=1&appId=1412918738939796";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Il secondo va inserito all’interno del body della vostra pagina:

<div class="fb-recommendations-bar" data-site="www.informarea.it" data-read-time="30" data-side="right" data-action="like"></div>

Quest’ultimo codice può essere modificato a proprio piacimento intervenendo su alcuni parametri. Ad esempio:

• data-read-time: sono i secondi di espansione della Recommendations Bar, nel codice sopra mostrato i secondi, 30, possono essere cambiati (il minimo è 10 secondi);
• data-num_recommendations: è il numero di post che la Recommendations Bar contiene (es. data-num_recommendations=”3″);
  
• data-side: è la posizione sullo schermo, destra o sinistra, della Recommendations Bar.

Trovate le altre opzioni da implementare nelle Settings della Recommendations Bar nella Developers di Facebook.

Se volete seguire i post di www.informarea.it potete iscrivervi al suo feed RSS.

Non esitate a lasciare le Vostre impressioni o a porre domande.