自定义Facebook FOSFacebookBundle登录按钮

Question

有人知道如何自定义/更改FosFacebook登录按钮的图像吗？

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

并在整页Facebook登录而不是弹出窗口中重定向。

Answer 1

这使用树枝助手并使用 facebook sdk js 渲染带有 '' 表示法的模板。

如果您需要重定向到登录页面，请使用 html 链接，从 php facebook sdk 调用方法"getLoginUrl"

您可以通过该服务访问它'fos_facebook.api'通过FOSFacebookBundle注册

使用代码示例进行了更新

这是我用来登录Facebook的javascript代码"无摩擦"

<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'} ) }}

我还定义了一个重定向到facebook身份验证的路由（/login/facebook

）。

//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);
}

就是这样！