如何使用我的自定义图像更改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连接图像.谁能帮我？

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文档

Answer 3

实际上只能使用CSS,但是,用于替换的图像必须与原始Facebook登录按钮的大小相同.幸运的是,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按钮,则图像中原始按钮宽度和高度之外的部分将无法点击.