1

I am trying put place a Facebook Like-Box on a page on my site, and then style it via my own CSS (chiefly to increase the height awarded to div#stream_content. (The idea is to have the FB feed act as a news feed, but I don't want the user to have to scroll to see more the top two items or so as it does by default).

I have read and experimented with suggestions from these articles and more: http://stackoverflow.com/questions/4064038/customizing-facebook-like-box,
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/,
http://hitech-tips.blogspot.com/2010/05/facebook-like-button-xfbml-tutorial.html

I am going the FBML route (rather than using an iframe) as I gather is required for applying a cross-domain stylesheet. I gather also that I need this doctype declaration for my webpage:
<!doctype html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">

So then I have this in the body of the page:

    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    <fb:like-box
            profile_id="***my ID here***" 
            width="450"
            height="600"
            colorscheme="dark"
            show_faces="false"
            stream="true"
            header="false"
            logobar="0"
            css="http://***my domain here***/css/FBstyles.css?1"
            href="http://www.facebook.com/***my page name here***"
    ></fb:like-box>

But I still get these sorts of errors: "(4) Unsafe JavaScript attempt to access frame with URL ...(my webpage)...from frame with URL http://www.facebook.com/plugins/likebox.php?channel=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Dfd907a0e%26origin...blahblahblah. Domains, protocols and ports must match."

Where am I screwing up?

Clifford
  • 88,407
  • 13
  • 85
  • 165
Colin May
  • 451
  • 4
  • 6

1 Answers1

3

I went this route too. Although you are using FBML, the actual embedded code ends up being an iframe anyway. (you can see it in the DOM with an HTML inspector after it loads). About the only thing I was able to do was put it in a div with a colored background, since the iframe is transparent, and a border.

You are probably getting errors since the javascript on the Facebook server is trying to access the CSS on your server. I didn't think you could do this.

EDIT:

In the StackOverflow link you provided, the posted answers clearly state that using your own CSS only works with a "Fan" box, not with a "Like" box.

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • Thanks for bringing that Fan-vs-Like Box issue up, Sparky, since I forgot to address it: it doesn't matter which I try, as both give me the same Unsafe Javascript errors and no luck with styling. Only the Like-Box lets me automate the setting of 'dark' theme and removal of photos and extra header. – Colin May May 21 '11 at 03:36
  • I see no mention of using your own stylesheet in the Facebook developer documentation. I do not believe it's possible. – Sparky May 21 '11 at 04:51
  • @Sparky672: It could be argued that this is a *feature*, for Facebook at least: they get to promote their brand, *plus* people can't easily masquerade the FB-plugin controls as something else ("I clicked *what*?! It didn't look like it had anything to do with Facebook at all!") – Piskvor left the building May 21 '11 at 19:10
  • @Piskvor: I agree. Maybe it was somewhat possible a year ago, but like I mentioned, I cannot find mention of being able to use your own stylesheet in the developer documentation. It all just runs counter-intuitive to everything you know about branding. – Sparky May 21 '11 at 19:29
  • @Sparky672: As I said, I think FB cares about its *own* branding, not yours. Having 0.5G users, they can very well get away with "our way or the highway" :( – Piskvor left the building May 21 '11 at 19:31
  • @Piskvor: Who are you arguing with? I've only been talking about Facebook branding and I'm agreeing with everything you said in this whole thread. In other words, the whole idea of being allowed to use your own CSS on a Facebook plugin really makes no sense at all. – Sparky May 21 '11 at 21:01
  • @Sparky672: Then I'm probably arguing with myself, as I've misunderstood you :D Oh well, it happens. – Piskvor left the building May 21 '11 at 21:39
  • Bah, curses... It sounds like the consensus is that it may have been possible before, but it is (probably) not now. I am now sad. :( – Colin May May 23 '11 at 05:37
  • @user763393: Yes, if it were possible, I'm sure it would be someplace in the Developers' documentation. Sorry. – Sparky May 23 '11 at 14:44