geek category image

Até pouco tempo atrás, a Facebook Like Box não permitia alteração da cor de suas bordas. Daí, o Facebook providenciou essa mudança e agora é possível escolher uma cor que combine com seu background.

Mas se você estiver usando um background mais complexo? O que fazer? Essa pequena atualização do widget só permite a mudança de cor da borda, mas ainda não é possível removê-la. Para isso, arrumei uma solução com uma pequena gambiarra.

HTML
<div id="likeboxwrap">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fprofile.php%3Fid%XXXXX&amp;colorscheme=light
&amp;width=297&amp;border=false&amp;connections=10&amp;stream=false&amp;header=false&amp" scrolling="no" frameborder="0" style="border:none !important; background-color:transparent !important; margin: -2px; overflow:hidden; width:297px; color: #595959 !important; height: 235px; .fbConnectWidgetTopmost {
border: none !important;
overflow:hidden;
padding:0;
position:relative;
}" allowTransparency="true">
</iframe>
</div>
CSS
#likeboxwrap {
width:270px;
height:238px;
margin-left:-6px;
border:none;
overflow:hidden;
}

Agora, basta substituir o XXXXX pelo ID da sua Facebook page. Note também que as medidas usadas no tutorial foram baseadas nas atuais medidas do meu layout. Havendo necessidade, você poderá modificá-las. Mas tenha sempre em mente que a largura do iframe é sempre maior que a largura da div id="likeboxwrap" definida no CSS.

Espero que esse tutorial tenha ajudado em alguma coisa. :smile: Mas se tiverem alguma dúvida, é só me chamar no Twitter, que eu ajudo. :razz:

Related Posts with Thumbnails
Listening to: Howie D – Back To Me Filled under: Geek, Tutorial
Tags:

4 Responses to “Tutorial: Removendo as bordas da Facebook Like Box”

  1. Alexandre says:

    vlw pela dica

  2. Fê_Notável says:

    Oi Dany!
    td certinho!?

    AMO essas dicas de web designer! Amo mesmo! ♥
    Obrigada pelo tutorial! ;)

    Mudando de assunto, recebi um meme no Nosso Clube do Livro e no Algumas Observações e passei para você! ;)

    Vá lá nos blogs e veja as orientações, tá?!

    Um beijo,
    http://nossocdl.blogspot.com/ http://algumasobservacoes.blogspot.com/ http://escritoshumanos.blogspot.com/

  3. Bruno says:

    Boa! Valeu pela dica, eu tive de incluir um position relative no wrapper e absolute no iframe porque não estava tirando a borda do lado esquerdo, por menor que fosse a margem negativa. Mas seu artigo me deu a "luz", valeu!

Leave a Reply