Uma das coisas mais chatas que tem nesta moda da responsividade* de websites é quando alguns elementos fogem ao nosso controle. A Like box do Facebook é um bom exemplo disso. É necessário informar o tamanho que você quer que o widget tenha. E isto pode criar uma quebra no seu layout.
Para resolver isso, basta pegar o código da Like Box normalmente, adicionar no lugar desejado e adicionar o código abaixo a sua folha de estilos.
#fb-root {
display: none;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}Testei o código acima com a like box usando o script em HTML 5. Não testei com a versão em iframes. Veja em ação aqui mesmo na lateral do blog.
*Um website responsivo é quando ele se adequa ao tamanho do dispositivo que o lê. Ele se adapta bem tanto no iPad como no celular ou em várias resoluções de desktop. Nosso layout é responsivo, faça o teste redimensionando a janela do seu navegador ou acessando de outro dispositivo que não seja o desktop.