facebook - 自定义 Facebook FOSFacebookBundle 登录按钮

Question

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

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

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

Answer 1

这使用了 twig helper 并使用 facebook sdk js 渲染带有 '' 符号的模板。

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

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

更新了代码示例

这是我用来通过 facebook 'frictionless' 登录的 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 auth 的路由 (/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);
}

就是这样!