Facebook Widget – manipulating it with CSS

  • Author
  • #860999


    Hi guys!

    I’m trying to make the Facebook Like Box so that it matches my theme a bit better.

    I found that I could manipulate it a bit, and added a dropshadow to it with this code:

    #facebook-likebox-2 iframe {
    -moz-box-shadow:0 2px 8px #aaaaaa;
    -webkit-box-shadow:0 2px 8px #aaaaaa;
    box-shadow:0 2px 8px #aaaaaa;

    But what I’d really love to do would be to simply eliminate the border from Facebook’s Widget.
    I think I can’t really do anything about that border directly -it’s on Facebook’s side- but I can resize the box from my side so that it is a couple of pixels smaller. This would clip the Widget by those two pixels and fix my problem.

    The thing is, when I try to do it, the Widget align to top and left, and so only the right side and bottom borders are clipped..

    Any ideas??

    Thanks again :)

    The blog I need help with is blog.tiagodovale.com.



    All CSS editing is theme specific. Please post an active link starting with http:// to the blog you are CSS editing.



    Thanks for that reminder :)


    That’s actually not possible to do with CSS because the Facebook likebox is controlled on Facebook’s side (as you mentioned).



    I was hoping that we could control the side and positioning of it on our side, defining a smaller box for it and placing it centered in it, so that the border is clipped… I managed to get to the first part… couldn’t center it, though..



    (“control the size”)


    There isn’t a way that I know of. It’s because of how Facebook loads their likebox.



    Thanks again, designsimply :)
    It’s nice to have your advice once again!


    Sorry I didn’t have better new about the FB likebox.



    We can’t win them all, though I didn’t quite quit yet: if I learn something new about it, I’ll report it here
    Cheers! :)



    This code

    #facebook-likebox-2 {
    border:1px solid white!important;

    makes the left border go white… but only the left one… any ideas? :$


    Looks like what you’re doing is shifting the element over a bit with the border and that force part of the likebox to the side and obscured the border on one side.

    An iframe is universally handled like a different HTML page by most browsers. If the iframe is on a different domain, like it is in the case of Facebook’s likebox, then you cannot adjust that content using CSS on the site displaying the iframe. To adjust it, you would need to have access to the Facebook iframe content directly, which is something you cannot do from the WordPress.com side.

The topic ‘Facebook Widget – manipulating it with CSS’ is closed to new replies.