1

O que normalmente é feito é isso:

<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5"
data-colorscheme="light"></div>

Adicionei também essa div com a classe fp-container e coloquei a div do plugin dentro dela, ficando assim:

<div style="padding:0;" class="fb_container">
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5"
data-colorscheme="light"></div>
</div>

Isso é para fazer com que o plugin ignore a formatação original e peque a formatação do meu CSS que configura a largura em 100% da div pai, que coloquei assim:

.fb-comments, .fb-comments * {
width:100% !important;
}

Isso funciona em navegadores Desktop, entretanto em navegadores mobile utilizados na vertical não faz diferença alguma.

Essa dica é dada pelo próprio Facebook:

The width (in pixels) of the plugin. The mobile version of the Comments plugin ignores
the width parameter, and instead has a fluid width of 100%.

Alguém tem alguma dica de como fazer para esse plugin ficar responsivo em navegadores mobile na vertical?

2
  • Não seria height o seu problema? eu não consegui entender o que está acontecendo de errado, por favor, reformule um pouco a sua dúvida em si, a explicação está ok porém a pergunta não está clara. 17/02/2014 às 12:43
  • Caro Paulo, está acontecendo o seguinte, quando utilizamos o plugin de comentários do Facebook na página e a mesma é aberta em um browser mobile, o plugin aumenta drasticamente a largura da página, ignorando a largura da div pai.
    – Heavypipo
    17/02/2014 às 13:01

1 Resposta 1

2

Depois de vários dias de busca, encontrei uma solução adaptável no blog da Suzanne Ahjira. Essa solução foi criada para WordPress, podendo ser totalmente adaptada para ser usada em qualquer site.

Ela criou depois do script normal do SDK do Facebook, uma rotina que verifica qual plugin esta sendo executado, o de desktop ou o de mobile:

<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/en_US/all.js#xfbml=1&appId=YOUR_APP_ID_HERE";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
      if(!d.getElementById(id)){js=d.createElement(s);
      js.id=id;js.src="//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js,fjs);}
      }(document,"script","twitter-wjs");
</script>

Caso esteja executando o plugin para mobile, a rotina insere o JS do Twitter, impressionante =D.

Adicione mais essa meta dentro da tag head, para configurar o ID do app do Facebook:

<meta property="fb:app_id" content="YOUR_APP_ID_HERE"/>

E por fim a div que irá mostrar o campo de comentarios:

<div class="fb-comments" data-href="url_atual" mobile="false" order_by="time"
    data-width="470" data-num-posts="10"></div>

Não esquecendo de adicionar as configurações de width 100% em seu CSS:

.fb-comments,
.fb-comments span, 
.fb-comments iframe[style],
.fb-comments iframe span[style] {
    width: 100% !important;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .