Facebook Custom Button FOSFacebookBundle Login

does anyone know how to custom / change the image of the login button on FosFacebook?

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

      

And redirect to facebook full screen account not in popup.

+3


source to share


1 answer


This uses the helper branch and renders the template with '' notation using facebook sdk js.

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

You can access it through the service 'fos_facebook.api'

via the FOSFacebookBundle

Updated with code examples

Here is the javascript code I am using to login 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 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 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!

+5


source







All Articles