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的默认login button plugin。但我想使用我的自定义facebook连接图像。任何人都可以帮助我吗？

Answer 1

您正在使用的方法是从Facebook Javascript代码渲染登录按钮。但是，您可以编写自己的Javascript代码函数来模拟功能。这是怎么做的 -

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

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

2）接下来，我们创建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: 'publish_stream,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);
}());

3）我们完成了。

请注意，上述功能已经过全面测试并且有效。你只需要把你的Facebook APP ID，它就会起作用。

Answer 2

我让它调用了一些简单的事情

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

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

参考：Facebook API Docs

Answer 3

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

来自facebook：

尺寸 - 不同尺寸的按钮：小，中，大，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按钮，则图像中原始按钮宽度和高度之外的部分将无法点击。

Answer 4

在谷歌上发现了一个解释一些更改的网站，根据页面的作者fb不允许自定义按钮。 Heres the website.

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

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

Facebook Connect按钮旨在以FBML呈现，这意味着它只是为了让Facebook看起来像这样。

Answer 5

如果您不想使用编码，则此处是Google Chrome的扩展程序，名为FB Refresh，可以将任何自定义图像添加到您的Facebook主页登录中。您可以使用预制主题或上传自己的背景。你可以在这里阅读更多相关内容。

http://www.crunchytricks.com/2015/02/how-to-change-refresh-facebook-homepage-login-screen.html

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

5 个答案: