Logotipo Design Interativo

Como Fazer a Like Box do Facebook ser Responsivo


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.

Comentários
  1. Frances disse:

    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 disse:

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

  3. kaio cesar disse:

    funciona no plugin do WordPress?

  4. Rafael Gomes disse:

    Boa!!! Solução bem simples =)

  5. Leonardo disse:

    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 ?

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade