Continua CSS Trick la rubrica su JuliusDesign in cui vedremo alcuni codici CSS per facilitare o agevolare il flusso di lavoro.

Oggi vediamo insieme come integrare i Commenti di Facebook in modo tale che la sua larghezza si adatti alla nostra pagina web, caratteristica che attualmente non è implementata.

Può capitare di progettare un layout Responsive Design e dover inserire i commenti FB e che quest’ultimi si adattino alla larghezza in cui sono contenuti.

Codice HTML

Questo è il classico codice HTML5 fornito dal wizard di Facebook Comment.

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

Infine inseriamo nel punto esatto in cui vogliamo includere i commenti questa porzione di codice.

Ovviamente nel parametro data-href dobbiamo inserire la URL della nostra pagina in cui andremo a inserire il modulo commenti facebook.

<div class="fb-comments" data-href="http://www.juliusdesign.net/diventare-freelance/index.php" data-num-posts="10" data-width="470"></div>

Codice CSS

Andiamo ad aggiungere al nostro foglio di stile CSS esterno o interno le seguenti classi che trovare di seguito.

.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;}

Come vediamo alcune classi sono impostate sull’important in quanto andranno a sostituire alcuni stili che lo stesso Facebook associa esternamente.

Segnala un Tuo CSS Trick!

Conosci un codice CSS che potrebbe essere utile ai lettori di JuliusDesign?

Invia una email con il codice CSS+HTML dettagliato a csstrick@juliusdesign.net, il prossimo codice potrebbe essere firmato da te!

Conoscevi questo codice CSS?

Consiglia questa tecnica ai tuoi collegi o ai tuoi amici!

Letture Consigliate per CSS Trick


Autore: Giuliano Ambrosio

Creative Strategist e Designer Freelance di Torino, fonda il blog JuliusDesign nel 2007, attualmente collabora con diverse agenzie su tutta Italia con le quali ha avuto modo di lavorare per diversi big brand.