Question

我正在使用Laravel开发一个Web应用程序并使用Facebook的PHP SDK。我希望Facebook的“登录”按钮出现在我的主页上，但显然只有JavaScript SDK附带。当我使用Facebook的PHP SDK登录用户时，如何获得Facebook的“登录”按钮？

Answer 1

在Web应用程序中添加这三个css文件。

http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css

bootstrap.min.css

https://raw.github.com/noizwaves/bootstrap-social-buttons/v1.0.0/social-buttons.css

然后在你的视图中写下这个。

<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>

Answer 2

这些按钮不是那样的。在JS中你必须使用facebook-login-button，这就是它到来的原因。使用PHP SDK时无法使用相同的按钮。

在PHP中，您可以自己创建它们。试试这个 -

$user = $facebook->getUser();
if ($user) {
   $logoutUrl = $facebook->getLogoutUrl();
} else {
   $loginUrl = $facebook->getLoginUrl();
}

<?php if ($user): ?>
   <a href="<?php echo $logoutUrl; ?>">Logout</a>   <!-- design these buttons -->
<?php else: ?>
   <a href="<?php echo $loginUrl; ?>">Login with Facebook</a>
<?php endif ?>

我想这段代码是不言自明的：）

Answer 3

我刚刚测试了Abdussami Tayyab的答案并且工作正常

我从http://fontawesome.io/（4.2.2）获得最新信息，然后在网站的顶级文件夹中创建了/ fonts和/ css。

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<?php include 'css/font-awesome.css'; ?>
<?php include 'css/font-awesome.min.css'; ?>
<?php include 'css/social-buttons.css'; ?>
</style>



</head>

<body>

<?php 

print "Hello world!"; 
?>

<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>

</body>
</html>

＆＃13;

Answer 4

我继续实施Javascript登录，然后使用Firebug获取图像的样式和URL。我没有费心去清理CSS所以有可能不需要在这里的东西，随意清理它并重新发布。我的大小匹配“喜欢”和“发布”按钮，而不是原始登录按钮。

这里没有涉及的两件事：按钮没有做任何事情。使其成为链接或使用Javascript。我包含了“进度”图形的链接，但没有实现它。

链接到facebook图片（稍后更改图片名称）： https://fbstatic-a.akamaihd.net/rsrc.php/v2/yB/r/t4ZSL-NWK2R.png https://fbstatic-a.akamaihd.net/rsrc.php/v2/yE/r/49Rx-CGUu94.gif

CSS：

.facebook_button{
    background: linear-gradient(#4c69ba,#3b55a0) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #4c69ba;
    border-radius: 2px;
    color: #ff;
    font-family: "Helvetica neue";
    text-shadow: 0 -1px 0 #354c8c;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    /*now inherited*/
    border-collapse:collapse;
    border-spacing: 0;
    color: #fff;
    text-shadow: 0 -1px 0 #354c8c;
    cursor: pointer;
    -moz-text-size-adjust: none;
    direction: ltr;
    line-height: 1.28;
    padding: none;
};
.facebook_button:hover{
    background: linear-gradient(#5b7bd5, #4864b1) repeat scroll 0 0 rgba(0,0,0,0);
    border-color: #5874c3 #4961a8 #3b5998;
    box-shadow: 0 1px 0 #607fd6 inset;
    cursor: pointer;
}

.facebook_login{
    border: 0 none;
    border-collapse: collapse;
    border-spacing: 0;
    color: #fff;
    text-align: left;
    font-size: 11px;
    font-family: "Helvetica neue";
    text-shadow: 0 -1px 0 #354c8c;
    cursor:pointer;
    -moz-text-size-adjust: none;
    direction: ltr;
line-height: 1.28;
}

.outer{
    padding-bottom: 0;
    padding-top: 0;
    padding-right: 0;
    font-family: "helvetica neue", helvetica,arial,"lucida grande",sans-serif;
    text-align:left;
    font-size:11px;
    /*now inherited*/
    border-collapse:collapse;
    border-spacing:0;
    color: #fff;
    text-shadow: 0 -1px 0 #354c8c;
    cursor: pointer;
    -moz-text-size-adjust: none;
    direction: ltr;
    line-height: 1.28;
}

.middle{
    border: medium none;
    display: inline-block;
    font-family: "helvetica neue",helvetica,arial,"lucida grande",sans-serif;
    text-align:left;
    font-size: 11px;
    /*inherited*/
}

.inner{
    font-size: 11px;
    line-height: 14px;
    padding: 2px 6px;
    font-weight: bold;
    border: medium none;
    display: inline-block;
    white-space: nowrap;
    -moz-text-size-adjust: none;
    direction: ltr;
}

HTML：

<div class="facebook_button">   
<table class="facebook_login">
    <tbody>
        <tr>
            <td class="outer">
                <span class="middle">
                    <span class="inner">
                     <img src="library/img/facebook.png" style="width:16px;height:16px;">
                    </span>
                </span>
            </td>
            <td class="outer">
                <span class="middle">
                    <span class="inner">
                     Log In
                    </span>
                </span>
            </td>
        </tr>
    </tbody>
</table>

Facebook PHP SDK和登录按钮

4 个答案: