domingo, 29 de novembro de 2015

Facebook comments: versão responsiva

Certo dia, estava testando o sistema de comentários do Facebook em meu blog, e descobri algo nada promissor. Na versão móvel (para celular), os comentários do Facebook não ficam responsivos, sendo um problema para seus usuários, já que dependem da plataforma, para promover o engajamento de seus leitores diante dos posts. Lendo tópicos relacionados com essa discussão, vi que é possível reverter essa situação, adicionando um código em CSS bastante simples. Perante esse fato, iremos auxiliar nossos leitores com a resolução abaixo. Confira!

Confira como fica a caixa de comentários sem o código CSS:

Caixa de comentários sem o código CSS
Agora, confira o resultado da caixa de comentários do Facebook com o CSS:


Caixa de comentários do Facebook em perfeito funcionamento para celular

Vamos ao código. Vá ao painel do Blogger e clique em Modelo Editar HTML e ative o atalho CTRL + F. Procure pela linha ]]></b:skin> e antes dela, cole o seguinte código:
.fb-comments, .fb-comments span, .fb-comments iframe {
    min-width: 100% !important;
    max-width: 100% !important;
}
Ficando deste jeito:

Localize o seguinte trecho


Após adicionar o código CSS, clique em Salvar. Seu blog contará com um sistema de comentários bastante útil, e funcionando perfeitamente na versão móvel.

Bruno Bezerra

Bruno Bezerra é blogueiro e estudante. Mantém como foco principal a plataforma Blogger, no qual começou a realizar seus projetos. Gosta de mexer com HTML e CSS.
comments powered by Disqus

 

Copyright @ 2011-2015 Fique Sabendo!.