I'm setting up Solspace Facebook Connect (fbc) for the first time and I would like to use my own custom buttons (anchor tag) instead of the ugly default button. Is this possible?

  • Now that facebook have redesigned these buttons they are not so much on an eyesore and I've decided to stick with the default button. Commented Mar 6, 2014 at 22:14

1 Answer 1


Unfortunately Facebook has a lot of control over the display of the Facebook-related UI in FBC, so your options are limited. You can change the label or size of the login button (the list of parameters can be found here: http://www.solspace.com/docs/facebook_connect/login/), but that's about what is possible with FBC.

If you need to further customize the FBC buttons, try using CSS rules to override the default style provided by Facebook. If you need to add something such as a custom class or id, javascript (which would add said class/id when it's run) would be the way to go. Another way is to wrap the button with an element (eg. a div with a specific class), and modify your CSS rules to do what you need.

  • It looks like the login button is inside an iframe, so CSS manipulation will be impossible. It also looks like the login function can be triggered via JS, and could be added manually to any click event. developers.facebook.com/docs/reference/javascript/FB.login - FB.login(function(response){}) - So is there any way to manipulate the FBC code to use a custom anchr tag with this function attached to click rather then using facebook's iframe button? Commented Jan 16, 2014 at 3:46
  • Also, why is the iframe version being used instead of HTML5 or XFBML? Commented Jan 16, 2014 at 3:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.