开发者

Facebook like button "breaks" when logged in as page

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>


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!


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.


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜