2014-04-13 132 views
0

我正在開發與Laravel和使用Facebook的PHP SDK的Web應用程序。我想讓Facebook的「登錄」按鈕出現在我的主頁上,但顯然只有JavaScript SDK纔有。當我使用Facebook的PHP SDK登錄用戶時,如何獲取Facebook的「登錄」按鈕?Facebook的PHP SDK和登錄按鈕

回答

0

這些按鈕不會像這樣。在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 ?> 

的代碼是不言自明我猜:)

+0

嗨薩赫勒。 Facebook是一個受歡迎的可信應用程序。我非常特別希望FB的登錄按鈕,這樣我的應用程序就可以利用Facebook的10億用戶成功,而不僅僅是任何人都可以在未知的,不可信的應用程序上製作的通用登錄按鈕。 –

+0

@AndrewKoper不要擔心的人。僅供參考 - 大多數應用程序不使用默認登錄按鈕,因爲它太小,可能不適合他們的主題。爲什麼這是一個問題,別擔心。它的行爲就像一個fb登錄按鈕,沒有任何區別。祝你好運 :) –

0

我只是測試從Abdussami Tayyab的答案,工作正常

我從http://fontawesome.io/最新版本(4.2.2)然後在網站的頂部文件夾中創建一個/ fonts和/ css。

<!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>

0

我繼續執行JavaScript的登錄,然後用螢火蟲來獲得風格和包含圖片。我沒有打算清理CSS,因此可能有些東西不需要在這裏,隨意清理一些並重新發布。我的尺寸與'like'和'post'按鈕相匹配,而不是原始登錄按鈕。

這裏沒有涉及的兩件事:按鈕沒有做任何事情。使其成爲一個鏈接或使用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>