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.

Duplicates: - http://stackoverflow.com/questions/4518024/facebook-like-box-external-css/4852787#4852787 - http://stackoverflow.com/questions/4874755/fblike-box-custom-css — Babiker, Jun 20 '11 at 19:49

score 1 · Answer 1 · answered Jun 20 '11 at 19:49

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> ....

answered Jun 20 '11 at 19:49

Boopathi Rajaa

4,659
2
31
53

2

As the iframe is on a different domain (facebook.com vs. mydomain.com), wouldn't that dis-sallow access to the iframe content? – electblake Oct 26 '11 at 05:46
1

the iframe name changes each time it's created – Graham Morley Mar 05 '12 at 00:35

score 1 · Answer 2 · answered Jan 29 '12 at 00:01

1

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?)

answered Jan 29 '12 at 00:01

Silvio Gucek

11
1

Customize CSS for Facebook Social Plugins

2 Answers2