Commenti Facebook Responsive? Ecco come fare

Libro Questo sito funziona

Intento a creare una pagina di un tema wordpress responsive mi sono imbattuto nella richiesta del cliente di voler integrare i commenti facebook.

Caricando però mi sono accorto che anche se il classico codice che prelevi dal generatore di commenti Facebook genera un iframe, quest’ultimo richiede delle proporzioni fisse.

Testa dura quale sono mi sono chiesto come devo trasformare i commenti facebook responsive?

Armato di pazienza e del buon firebug in modalità explorer ho caricato su una pagina web: il codice dei commenti e l’attivatore.
Modificando, modificando, sono arrivato a tracciare un paio di regole css che mi permettono di creare finalmente i commenti facebook responsive.

Vediamo cosa ti serve:

Innanzitutto dalla pagina dei commenti facebook devi generare i due codici:

  • L’attivatore, altro non è che una chiamata ai server ed alle librerie di facebook
  • Il codice dei commenti

Partiamo dal primo: L’attivatore

<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=XXXXXXXXXXX";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

al posto delle XXX comparira l’id dell’applicazione/pagina.

Inserisci questo codice appena dopo <body>

Visualizziamo i commenti

Qui c’è da prestare un minimo di attenzione.

Il codice generato da facebook è cosi per il sito andrealeti.it:

<div data-href="http://www.andrealeti.it" data-width="470" data-num-posts="10"></div>

l’attributo data-width=”470″ definisce una larghezza fissa pertanto è da rimuovere.

quindi ricaveremo:

<div data-href="http://www.andrealeti.it" data-num-posts="10"></div>

Passiamo al codice css

Essendo un codice che viene generato con una chiamata ad una libreria esterna qualche linea di codice css inline viene automaticamente generata.

In successione di applicazione le regole css (cascading style sheet) ovvero le regole a cascata “uno dopo l’altro”, vengono interpretate dal browser in questo ordine:

  1. prima il file css esterno incluso
  2. poi sovrascrivo le regole precedenti con css in page (se c’è)
  3. poi sovrascrivo le regole precedenti con css inline (se c’è)

Questa cascata può essere bypassata nel momento in cui all’interno della regola compare l’attributo !important

Proprio grazie a quest’ultimo sono riuscito a scrivere codice che APPLICA il mio css al posto del css inline generato da facebook.

Ecco il codice css da usare:

.fb-comments.fb_iframe_widget > span,
.fb-comments span{ display:100% !important; }
.fb-comments{width: 100% !important;}
.fb-comments iframe[style]{width: 100% !important;}
.fb-like-box{width: 100% !important;}
.fb-like-box iframe[style]{width: 100% !important;}
.fb-comments span{width: 100% !important;}
.fb-comments iframe span[style]{width: 100% !important;}
.fb-like-box span{width: 100% !important;}
.fb-like-box iframe span[style]{width: 100% !important;}

AGGIORNAMENTO – Dal 3 Marzo 2014 Facebook ha cambiato la struttura dei commenti facebook. Questa tecnica al momento potrebbe non essere più valida

Libro Questo Sito Funziona