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