如何更改我的自定义图像的Facebookloginbutton
我的脚本有这样的代码
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的默认loginbutton插件 。 但我想用我的自定义Facebook连接图像。 谁能帮我？
你正在使用的方法是从Facebook的JavaScript代码呈现loginbutton。 但是，您可以编写自己的Javascript代码函数来模拟function。 这是如何做到这一点 –
1）创build一个简单的锚点标签链接与您要显示的图像。 在锚标签上有一个onclick方法，实际上可以做真正的工作。
<a href="#" onclick="fb_login();"><img src="images/fb_login_awesome.jpg" border="0" alt=""></a>
2）接下来，我们创build了Javascript函数，它将显示实际的popup窗口，如果用户允许，将获取完整的用户信息。 如果用户不允许我们的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）我们完成了。
请注意，上述function已经过全面testing并正常工作。 你只需要把你的Facebook应用程序ID，它会工作。
我用它来调用一些简单的东西
function fb_login() { FB.login( function() {}, { scope: 'email,public_profile' } ); }
我不知道Facebook是否能够阻止这种规避，但现在我可以使用任何HTML或图像我想调用fb_login ，它工作正常。
参考： Facebook API文档
它实际上只能使用CSS，但是，您用来replace的图像必须与原始的Facebookloginbutton的大小相同。 幸运的是，Facebook提供了不同大小的button。
从脸书：
大小 – 不同大小的button：小，中，大，大 – 默认是中等。 https://developers.facebook.com/docs/reference/plugins/login/
将loginiframe不透明度设置为0，并在父div中显示背景图像
.fb_iframe_widget iframe { opacity: 0; } .fb_iframe_widget { background-image: url(another-button.png); background-repeat: no-repeat; }
如果您使用的图像比原来的facebookbutton更大，则原始button的宽度和高度以外的图像部分将不可点击。
根据网页的作者fb不允许自定义button在google上find一个网站解释一些变化。 下面是网站。
不幸的是，这违反了Facebook的开发者政策，其中规定：
您不能绕过我们对核心Facebookfunction的预期限制。
Facebook连接button的目的是在FBML中呈现，这意味着它只是看看Facebook的方式。
如果你不想使用编码，那么这里是谷歌浏览器的扩展名为FB刷新，它可以添加任何自定义图像到您的Facebook主页login。 您可以使用预先制作的主题或可以上传自己的背景。 你可以在这里读更多关于它的内容。
http://www.crunchytricks.com/2015/02/how-to-change-refresh-facebook-homepage-login-screen.html
