Customize CSS for Facebook Social Plugins

Question

Facebook has these social plugins:

http://developers.facebook.com/docs/plugins/

that can be plugged into a website very easily. They offer limited customization options, and I was wondering if it is possible to change the default CSS to allow custom fonts and colors, re-size images and re-arrange the placement of the buttons or comment.

The particular plugin that I'm looking at is the comments plug in.

Any help or reference that can help me out is greatly appreciated.

Answer 1

Using javascript, YES you can.

give the iframe a name and using prototype framework it can be done like this

frame1.$('mydiv').style.border='1px solid #000000'

and so on. It is possible with any framework.

Make sure you load this javascript after everything is loaded. Try adding it just before the </body> ....

Answer 2

You're changing the style locally, not on the remote server. In other words, your browser retrieves the vanilla content from facebook and then the JS does it's work inside your browser w/o FB knowing about it... (might be counter-EULA?)