Facebook like button “breaks” at login as page

Question

I have a facebook like button on my page and it works fine. But when a visitor registers as a “Page” on facebook, he includes a photo and breaks my design. I guess this is because pages are not allowed to like things.

I pretty much have an iframe like this: http://developers.facebook.com/docs/reference/plugins/like-box/

Any ideas on how I get rid of this image? Is there any way to change the design, disable this “feature” or check if the user is registered as a page (to hide all this)?

thanks

Edit: Screenshot: i.imgur.com/gLa7Q.png At the top, I logged in as a regular user, and below I am "Using facebook as Page"

The code I'm using is: <iframe class="facebook" src="http://www.facebook.com/plugins/like.php?href=<?=urlencode('http://www.mysite.com')?>&amp;layout=standard&amp;show_faces=false&amp;width=210&amp;action=like&amp;colorscheme=light&amp;height=45" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Answer 1

You can use the overflow element in your CSS to stop its design disruption. This, at the very least, keeps the box the same size, regardless of whether someone logs into Facebook.

1) Wrap your field in a div and give it an identifier (in HTML)

 <div id="mylikebox"> Facebook like Box Code in here </div> 

2) Add to CSS (adjust height and width if you need)

 #mylikebox { height: 70px; width: 210px; overflow: hidden; } 

Let me know if this works!

Answer 2

I just noticed the same problem. It seems to be a mistake in the FB part, since they provide an embed code for them, like a button that breaks under a specific, but completely normal state (that is, signed in FB as a page.) I would also like the solution. At the same time, the error prompted me to remove the FB button as part of my blog, which, unfortunately, seems to be the only solution at the moment.

Answer 3

I found this to be true for facebook developers such as the box configuration page. Definitely a facebook bug.

Answer 4

The answer provided by Nathaniel works for me. I have all my social icons in line: http://www.cg-its.com

By setting the height of div 30 and adding an overflow attribute: hidden, if someone is registered as a page, and not a personal account, they can see part of the red field and the switch URL, allowing them to register back as personal.

This is not ideal, but for the number of users it will affect it.