facebook - 如何使用我的自定义图像更改 facebook 登录按钮

Question

我的脚本有这样的代码

echo '<p class="wdfb_login_button"><fb:login-button scope="' .
     Wdfb_Permissions::get_permissions() . '" redirect-url="' .
     wdfb_get_login_redirect() . '">' .
     __("Login with Facebook", 'wdfb') . '</fb:login-button></p>';

它使用 facebook 的默认登录按钮插件。但我想使用我的自定义 facebook 连接图像。谁能帮我？

score 137 · Accepted Answer

您使用的方法是从 Facebook Javascript 代码呈现登录按钮。但是，您可以编写自己的 Javascript 代码函数来模仿该功能。这是如何做到的 -

使用要显示的图像创建一个简单的锚标记链接。在锚标签上有一个onclick方法，它实际上可以完成真正的工作。

<a href="#" onclick="fb_login();"><img src="images/fb_login_awesome.jpg" border="0" alt=""></a>

接下来，我们创建 Javascript 函数，该函数将显示实际的弹出窗口，并在用户允许的情况下获取完整的用户信息。如果用户不允许我们的 facebook 应用程序，我们也会处理这种情况。

window.fbAsyncInit = function() {
    FB.init({
        appId   : 'YOUR_APP_ID',
        oauth   : true,
        status  : true, // check login status
        cookie  : true, // enable cookies to allow the server to access the session
        xfbml   : true // parse XFBML
    });

  };

function fb_login(){
    FB.login(function(response) {

        if (response.authResponse) {
            console.log('Welcome!  Fetching your information.... ');
            //console.log(response); // dump complete info
            access_token = response.authResponse.accessToken; //get access token
            user_id = response.authResponse.userID; //get FB UID

            FB.api('/me', function(response) {
                user_email = response.email; //get user email
          // you can store this data into your database             
            });

        } else {
            //user hit cancel button
            console.log('User cancelled login or did not fully authorize.');

        }
    }, {
        scope: 'public_profile,email'
    });
}
(function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

我们完了。

请注意，上述功能已经过全面测试并且可以正常工作。您只需输入您的 facebook APP ID 即可。

score 12 · Accepted Answer

我通过调用一些简单的东西来实现它

function fb_login() {
  FB.login( function() {}, { scope: 'email,public_profile' } );
}

我不知道 facebook 是否能够阻止这种规避，但现在我可以使用我想调用的任何 HTML 或图像fb_login，它工作正常。

参考：Facebook API 文档

score 6 · Accepted Answer

实际上只能使用 CSS，但是，您用来替换的图像必须与原始 facebook 登录按钮的大小相同。幸运的是，Facebook 提供了不同大小的按钮。

来自脸书：

size - 不同大小的按钮：小、中、大、xlarge - 默认为中。 https://developers.facebook.com/docs/reference/plugins/login/

将登录 iframe 不透明度设置为 0 并在父 div 中显示背景图片

.fb_iframe_widget iframe {
    opacity: 0;
}

.fb_iframe_widget {
  background-image: url(another-button.png);
  background-repeat: no-repeat; 
}

如果您使用的图像比原始 facebook 按钮大，则图像中超出原始按钮宽度和高度的部分将无法点击。

score 4 · Accepted Answer

在 google 上找到一个网站解释一些变化，根据页面 fb 的作者不允许自定义按钮。继承人的网站。

不幸的是，这违反了 Facebook 的开发者政策，其中规定：

您不得规避我们对 Facebook 核心功能的预期限制。

Facebook Connect 按钮旨在以 FBML 呈现，这意味着它仅旨在以 Facebook 允许的方式呈现。

facebook - 如何使用我的自定义图像更改 facebook 登录按钮

4 回答 4

Related

Reference