homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

how to avoid facebook 'like' button turning gray

5+ Year Member

Msg#: 4278532 posted 10:51 pm on Mar 8, 2011 (gmt 0)

Facebook is blocked in some offices and countries. If a website has a 'Like' button, it will turn gray (page not found in the iframe) to those viewers and it makes the page look broken.

Do you have any idea (maybe CSS method) to hide this gray area? When <iframe> is not loaded, it will show some other thing (like white color background) instead of showing a gray "dead" page?

The code for like button is like this:
<iframe src="http://www.facebook.com/plugins/like.php?href=your URL;layout=standard&amp;show_faces=false&amp;width=40&amp;action=like&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:35px;" allowTransparency="true">



WebmasterWorld Senior Member 10+ Year Member

Msg#: 4278532 posted 3:13 am on Mar 9, 2011 (gmt 0)

Before you begin, you might want to make real sure this isn't contrary to any Facebook terms of service.

One way you could tackle this is to use JavaScript to test browser access to Facebook. If the browser doesn't have access, then don't display the iframe. Here's a page explaining the JavaScript techniques for making requests.

[eloquentjavascript.net ]

One tricky part to be aware of is that different organizations block in different ways. Some might just let the request time out, while others return a response telling the users that site is forbidden.


5+ Year Member

Msg#: 4278532 posted 8:14 am on Mar 23, 2011 (gmt 0)

I'm not familiar with Javascript at all and try to put those things together part by part. Thanks timster for the hints.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved