badge facebook responsive

eleumas

badge facebook responsive

Che per caso qualcuno ha una porzione di codice per inserire la like box che sia già responsive? Per capirci come quella che mi ha gentilmente fornito FDA per il badge di google+?

fda

Joomliani e programmatori fatevi avanti!
Intanto perché eleumas non ci fornisci qualche info in più? Ad esempio quale tipo di badge ti occorre.

P.S. Quale sarebbe il "like box"? Mi confondo sempre ...

eleumas

Facebook ci mette a disposizione nella sezione developers (developers.facebook.com/docs/plugins/like-box-for-pages) la possibilità di crearne una su misura delle nostre esigenze, solo che non è responsive (odio profondo!!!). La like box è la "tabellina" che generalmente si trova nelle sidebar dei siti web e che ci permette di cliccare "mi piace" e seguire la pagina. In oltre ci consente di vedere gli ultimi post e le facce di alcune persone che seguono la pagina. In pratica è quella che viene visualizzata nel link che ho messo in questo post!

fda

Ok, grazie mille. Avere il box responsive è tutta un'altra storia

fda

Il Like Box di Facebook si ottiene specificando l'URL della propria pagina Facebook e le altre opzioni a partire da qui:
developers.facebook.com/docs/plugins/like-box-for-pages

Una volta specificate le opzioni, bisogna fare clic sul pulsante Get Code e fare un copia e incolla del codice.
Per rendere responsive il box bisogna modificare leggermente il codice come nell'esempio che segue, relativo a un Like Box del ForumGT:


<div id="facebook-likebox" style="width: 100%;">
                    <div class="fb-like-box" data-href="https://www.facebook.com/ForumGT" data-width="300" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="true"></div>
                    <div id="fb-root"></div>
                    <script>
                        document.getElementsByClassName('fb-like-box')[0].setAttribute('data-width', document.getElementById('facebook-likebox').clientWidth);
                        (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/sdk.js#xfbml=1&version=v2.0";
                            fjs.parentNode.insertBefore(js, fjs);
                        }(document, 'script', 'facebook-jssdk'));
                    </script>
                </div>

eleumas

Ok, allora, nella seconda riga del tuo codice hai inserito le informazioni come il link alla pagina le dimensioni ecc. Tutto il resto dovrebbe rimanere sempre uguale. O sbaglio? Se volessi cambiare lingua del badge? Mi basta modificare questa stringa con il codice della lingua che voglio? ```
js.src = "//connect.facebook.net/it_IT/

fda

Puoi procedere così:

Generi il box con le opzioni che preferisci a partire da qui: developers.facebook.com/docs/plugins/like-box-for-pages .
Lo rendi responsive.

Per quanto riguarda il responsive, le modifiche da fare sono queste:

Alla parte dello script aggiungi un'istruzione JavaScript per fare adattare la larghezza al div:


document.getElementsByClassName('fb-like-box')[0].setAttribute('data-width', document.getElementById('facebook-likebox').clientWidth);

Chiudi tutto in un div con id "facebook-likebox":


<div id="facebook-likebox" style="width: 100%;">
...
...
</div>

Tutte le altre modifiche riguardano il like box e non il fatto di renderlo o meno responsive.

eleumas

FUNGE! Grazie mille...una noia in meno!