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="https://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!
9 Commenti
Fantastico trick non capivo ancora come fare!!!
Come al solito NUMBER ONE! I miei colleghi ti ringraziano di cuore!
Grazie per il trucchetto!
Fantastico! Grazie come sempre per la condivisione!
Buona giornata!
Fantastica soluzione grazie mille!
Utilizzando il plugin Facebook con WordPress, è sufficiente inserire soltanto il codice CSS?
Grazie mille per questo tutorial, mi è stato utilissimo. Una soluzione semplicissima!
Grazie!
The fully-functional, self-contained kitchen replete
with a fridge, gas burner, toaster, water filter, microwave oven, electric kettle, crockery, cutlery and glassware adds to the cheer generated by the uplifting decor.
However, these apartments can be rented for minimum 7 days.
For those who are visiting London on business or on work assignments during summer, accommodation will be in short supply.
In addition to the best accommodation Melbourne has a diverse range of
things to do and activities that can be enjoyed by people of all ages.