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!

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

9 Commenti

  1. Daniele

    Utilizzando il plugin Facebook con WordPress, è sufficiente inserire soltanto il codice CSS?

  2. 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.

Commenti