Posted on August 5, 2013 , Last Modified on: August 5, 2013
Custom Facebook Login/registration Button with BuddyPress Facebook Connect Plugin
The code below allows you to use your own custom login/registration button with facebook connect plus plugin
Please put the following code in your functions.php or bp-custom.php
function bpdev_custom_fb_login_button( $btn_label = '' ){
echo bpdev_custom_get_fb_login_button( $btn_label );
}
function bpdev_custom_get_fb_login_button( $btn_label = '' ){
$fb = BPDevFacebook::get_instance();
//if user is already logged in, do not show the button
if( $fb->get_current_user_id() || is_user_logged_in() || !bp_get_signup_allowed() )
return;
$helper = BPDevFBUserSettings::get_instance();
$permissions = $helper->get_permissions();
//pass a label for chaning the login text
return "<div class='fb-login-button' data-scope='".$permissions."'><a href='#'>".$label."</a></div>";//so incase the custom text is given
}
You will Need to call/show the button using
<?php bpdev_custom_fb_login_button('Login Please');?>
To make this button work, we will need to add following javascript code
//bind facebook login button click
jq('body').on('click','.fb-login-button a', function(){
var fb_scope=jq(this).parent().attr('data-scope');
//console.log(fb_scope);
FB.login(function (response) {
if (response.status == "connected") {
//alert('We are debugging our app. Please be patient...');
window.location.reload();
}
else {
//console.log("Error" + response);
}
}, {scope: fb_scope});
return false;
});
You can put that js code in your theme's js file
Once you are done with that you can use following css classes to change the image etc.
div.fb-login-button{
}
div.fb-login-button a{
}
div.fb-login-button a:hover{
}
Hope that helps.
#buddypress, #fb-connect-plus, #custom, #plugins