我需要一个自定义的Facebook登录按钮。具有中型,大型等的fb:登录按钮解决方案不是我所需要的。我知道FB TOS。我的按钮将非常相似。
如何使用自定义按钮将我的按钮转换为 javascript onlick 解决方案?"onlogin="top.location.href='example.com/facebook_connect.php"链接非常重要。
这是我的代码:
<div id="fb-root"></div>
<script type="text/javascript" language="JavaScript" src="http://connect.facebook.net/de_DE/all.js#appId=myappid6&xfbml=1"></script>
<script type="text/javascript" language="JavaScript"> FB.init({
appId : myappid,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<fb:login-button scope="email, public_profile" size="xlarge" onlogin="top.location.href='example.com/facebook_connect.php'">Connect with Facebook</fb:login-button>
谢谢。
HTML:
<button id="loginBtn">Facebook Login</button>
JavaScript:
document.getElementById('loginBtn').addEventListener('click', function() {
//do the login
FB.login(function(response) {
if (response.authResponse) {
//user just authorized your app
top.location.href = 'example.com/facebook_connect.php';
}
}, {scope: 'email,public_profile', return_scopes: true});
}, false);
来源: http://www.devils-heaven.com/facebook-javascript-sdk-login/
不要为此使用 a 标签,它不是链接。你也不需要jQuery,它只是一个简单的点击处理程序。不过,我建议使用异步方式加载 JS SDK。
我使用了隐藏默认Facebook登录按钮的自定义按钮。看看是否有帮助。
<div class="img_container">
<a class="btnFacebookLogin" href="#" role="button">
<span class="img_icon icon_facebook" title="Facebook"></span>
<div class="fb-login-button" onlogin="javascript:CallAfterLogin();" width="200" size="medium" autologoutlink="true" scope="user_education_history,user_birthday,friends_birthday,user_hometown,user_likes,email,user_checkins,user_groups,friends_groups,user_photos,user_events,user_location,user_relationships,user_relationship_details,user_religion_politics,user_website,user_work_history,user_interests,user_about_me"
style="display: none;">
</div>
</a>
</div>
.JS
$(document).ready(function () {
$('.btnFacebookLogin').on('click', function () {
FB.login(function (response) { CallbackAfterLogin(response); }, { scope: 'email' });
});
});
.CSS
.img_container
{
display: inline-block;
margin-right: 5px;
}
.img_icon
{
display: block;
width: 42px;
height: 42px;
}
.icon_facebook
{
background-image: url("../Images/Icons/social.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 172px 84px;
height: 42px;
width: 42px;
}
您可以根据自定义图像调整 CSS。我允许多个网站的"登录方式"选项,如推特、g+;等。所以我使用了一张具有所有必要图标的图像。