Custom Facebook FOSFacebookBundle Login Button

Question

some one know how custom/change image of FosFacebook login button ?

{{ facebook_login_button({'autologoutlink': true}) }}

And redirect on a full page facebook login not on pop-up.

Answer 1

This uses a twig helper and render a template with '' notation using facebook sdk js.

If you need to redirect to the login-page, use an html link, call the method 'getLoginUrl' from the php facebook sdk

You can access to it via the service 'fos_facebook.api' register through FOSFacebookBundle

Updated with code examples

Here is the javascript code i use to login with facebook 'frictionless'

<script>
//scopes string stored as container parameter
var fb_scope='{{ facebook_scope }}';
//connected in sf2 app ?
{% if app.user %}
    var isLogged=true;
{% else %}
    var isLogged=false;
{% endif %}
//var to store fb status
var fb_connected = false;

function onFbInit() {

  if (typeof(FB) != 'undefined' && FB != null ) {

      // fetch the status on load
      FB.getLoginStatus(handleSessionResponse);

      //my facebook connect link
      $('a.facebook_connect').on('click', function(e) {
        FB.login(function(response) {
           if (response.authResponse) {
             checkAccount();
           } else {
              onAuthRefusal();
           }
         }, {scope: fb_scope});
        e.preventDefault();
      });
      //my logout link
      $('#logout').on('click', function(e) {
        FB.logout(null);
      });

      //want to distinguish three status states
      FB.Event.subscribe('auth.statusChange', handleSessionResponse);
  }
}




function handleSessionResponse(response) {
    if (response.status === 'connected') {
        // the user is logged in and has authenticated your
        // app, and response.authResponse supplies
        // the user's ID, a valid access token, a signed
        // request, and the time the access token
        // and signed request each expire
        var uid = response.authResponse.userID;
        var accessToken = response.authResponse.accessToken;
        var expiresIn = response.authResponse.expiresIn;

        //already logged in sf2 app
        if(!isLogged){
            checkAccount();
        }
        fb_connected = true;

      } else if (response.status === 'not_authorized') {
        // the user is logged in to Facebook,
        // but has not authenticated your app
         fb_connected = false;
      } else {
        // the user isn't logged in to Facebook.
          fb_connected = false;
      }
}

function checkAccount(){
   //route defined in your security.yml  ( check_path value in your fos_facebook firewall )
   top.location.href  = '{{ path('_security_check_facebook' ) }}';
}

function onAuthRefusal(){
 //message, special page ?
 console.log('refused authentification, message to display ?');
}


</script>

{{ facebook_initialize({'xfbml': true, 'fbAsyncInit': 'onFbInit();', 'frictionlessRequests' : 'true'} ) }}

I have also defined a route ( /login/facebook ) that redirects to facebook auth

//controller action for /login/facebook pattern
function loginFacebookAction()
{
    //get facebook api service registered by FacebookBundle
    $api = $this->container->get('fos_facebook.api');
    //get scope provided in url or default
    $scope = $this->container->get('request')->get('scope', 'publish_stream');
    //generate call url that use facebook check_path (used by FacebookBundle for authentification)
    $callback = $this->container->get('router')->generate('_security_check_facebook',array(), true);
    $redirect_url = $api->getLoginUrl(array('scope' => $scope, 'redirect_uri' => $callback));

    return new RedirectResponse($redirect_url);
}

And this is it !