6

I have a facebook 'Like' button on my page and it's working fine. But when the visitor is logged in as a 'Page' at facebook it includes a photo and breaks my design. I guess this is because Pages aren't allowed to like things.

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

Any ideas of how I get rid of this image? Any way to alter the design, disable this "feature" or check if the user is logged in as a page (to hide the whole thing)?

Thanks

Edit: Screenshot of the issue: i.imgur.com/gLa7Q.png In the top one I'm logged in as a regular user and the bottom I'm "Using facebook as Page"

The code I'm using: <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>

AndSoYouCode
  • 229
  • 1
  • 12
  • Pages are allowed to Like other pages, FYI. –  Jul 01 '11 at 09:27
  • Can you include a picture of what you want to be fixed please? –  Jul 01 '11 at 09:29
  • Sorry, was out for lunch. But here's a screenshot. http://i.imgur.com/gLa7Q.png In the top one I'm logged in as a regular user and the bottom I'm "Using facebook as Page". – AndSoYouCode Jul 01 '11 at 11:16
  • Ok, (1) let me clarify my first comment: Facebook pages are allowed to Like ***other*** Facebook pages ***on Facebook***. I just wanted to clear that up, otherwise I could have meant that Facebook pages can just go to any website and Like it. (2), why does it matter if it breaks if a user is logged in as a page, the vast majority of users won't be visiting your page like that anyway...? –  Jul 01 '11 at 11:21
  • 1
    The vast majority yes. But I'd like to fix it if possible. I actually assumed a whole lot of other people had this issue too, and that someone else already fixed it. – AndSoYouCode Jul 01 '11 at 11:30
  • Can you post your like button code? You said like button but you linked to like box. Also, can you post a screenshot of the issue? – bkaid Jul 04 '11 at 16:44
  • I added it to the original question. – AndSoYouCode Jul 05 '11 at 07:44
  • I am using FB as a page and I cannot like some other sites. Sometimes it work, sometimes I get the same http://i.imgur.com/gLa7Q.png For me it is a problem, since I need to add some Like when initiating a FB page. – snowflake Aug 07 '12 at 17:36
  • workaround here using a timed js check for div width : http://stackoverflow.com/questions/16369247/how-to-make-the-facebook-like-button-display-none-when-logged-in-as-page – here Jan 07 '14 at 06:12

4 Answers4

2

You can use the 'overflow' element in your css to stop it breaking the design. This at least keeps the like box the same size whatever somebody is logged in to Facebook as.

1) Wrap your like box in a div and give it an id (in the HTML)

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

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

#mylikebox {
height: 70px;
width: 210px;

overflow: hidden;
}

Let Me Know if it works out!

Nathaniel James Smithies
  • 21
  • 3
1

I just noticed the exact same issue. Seems a bug on FB's part, as they provide an insertion code for their like button that breaks under a particular but perfectly normal condition (i.e. signed in to FB as a page.) I would love a solution too. In the meantime the bug has prompted me to remove the FB like button altogether from my blog, which unfortunately seems to be the only solution at the moment.

Hagbard Celine
  • 11
  • 1
  • Looks as if the issue was actually introduced by my confining the iframe to the size the button needs for it's normal display. The larger footprint it has when displaying it's content for those signed in to FB as a page needs to be taken into account when placing the button in a layout. A bit of layout tweaking to the iframes containing element seems to have helped to avoid the issue. – Hagbard Celine Jul 22 '11 at 11:38
  • That's a possible solution in most cases, but not in mine. My problem is that I don't have enough space to display the image. Thanks for the input. – AndSoYouCode Jul 26 '11 at 12:30
0

I found this to be true on the facebook developers like box configuration page. Definitely a facebook bug.

OKParrothead
  • 31
  • 1
0

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

By setting a div height of 30, and adding the overflow: hidden attribute, if someone is logged in as a page rather than personal account they can see part of the red box, and the 'switch' URL allowing them to log back in as personal.

It's not perfect, but for the amount of users it will affect it is a good fix.

ConradGoodman
  • 1
  • 1