Como Fazer a Like Box do Facebook ser Responsivo


likebox-responsive

Quando utilizamos a Like Box do Facebook nos sites, na página de desenvolvimento do Facebook onde geramos o código colocamos as medidas em pixels para termos o tamanho da caixa, mas usando algumas medidas no CSS conseguimos fazer a caixa ficar responsiva se adaptando para todos os dispositivos.

É muito simples veja:

HTML

Primeiro você insere no HTML os códigos que foram gerados na página de desenvovedores do Facebook (https://developers.facebook.com/docs/plugins/like-box-for-pages)

Você só precisa colocar no data-width o valor auto (data-width=”auto”)

CSS

No seu código CSS insira a seguinte linha:

#fb-root {
  display: none;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

Pronto agora seu Like Box esta utilizando porcentagem e se adapta a qualquer resolução de tela.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

9 comentários em “Como Fazer a Like Box do Facebook ser Responsivo

  1. Frances 11 de maio de 2015 10:18

    Funcionou durante anos com a caixinha antiga. Agora com essa nova que tem o background do header da página no widget não funciona mais… Parece ser tudo igual, coloquei o “auto” no width, o código no CSS, mas no ipad e iphone ela fica com mesmo tamanho do sidebar full screen. Você sabe como tornar a caixinha nova responsive?

  2. Yuri Foxx 14 de janeiro de 2015 9:20

    Ótima Solução, Simples e Rápida, aliás , Lindo Site hein ??

  3. Leonardo 27 de julho de 2014 18:15

    Olá, testei seu codigo, mas pelo menos em meu celular (resolução aprox 800×400) a caixa fica um pouco maior, passando da largura do site. Deve se algo em torno de 10 pontos.
    Você saberia como fazer a like box ficar um pouquinho menor que a resolução do celular ?

    • Robson Moulin 29 de julho de 2014 11:30

      Era pra funcionar Leonardo, com este código a Like Box fica com 100% de width então ele se adapta automáticamente.

      • Dorival Jr 17 de setembro de 2014 15:07

        Olá, boa tarde Robson e Leonardo. Realmente fiz várias visualizações e varia um pouco entre navegadores também. Mas fica apenas a “linha” da borda de fora.
        A solução foi deixar 99% ao invés de 100%. Assim fica correto em todos.
        Abs

        • Robson Moulin 17 de setembro de 2014 17:20

          Boa observação Dorival Jr, mais é isso com criatividade vamos resolvendo os pequenos problemas. No meu caso eu escolhi a like box sem borda por isso não notei essa diferença.

          Abs

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>