Facebook PHP SDK and login button
Question
I am developing a Web app with Laravel and using Facebook's PHP SDK. I want to have Facebook's "Login" button appear on my homepage, but that apparently only comes with the JavaScript SDK. How do I get Facebook's "Login" button when I'm using Facebook's PHP SDK to log users in?
4 answers
solution1
0 2014-04-13 09:44:54
Add these three css files in your Web app.
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
And then write this in your view.
<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>
solution2
0 2014-04-13 10:19:45
These buttons don't come just like that. In JS you must have use facebook-login-button that's the reason its coming there. The same button can not be used while using the PHP SDK.
In PHP you can create them yourself. Try this-
$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 ?>
The code is self-explanatory I guess :)
solution3
0 2014-12-22 12:27:53
I just tested the answer from Abdussami Tayyab and works fine
I got the latest from http://fontawesome.io/ (4.2.2) then created a /fonts and /css in top folder of website.
<!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>
solution4
0 2015-04-08 15:29:45
I went ahead and implemented the Javascript login and then used Firebug to get the styles and URLs to images. I didn't bother to clean up the CSS so there is likely things that don't need to be here, feel free to clean it up some and re-post. My sizing matches the 'like' and 'post' button's, not the original log-in button.
Two things not covered here: The button doesn't do anything. Make it a link or use Javascript. I included the link to the 'progress' graphic but didn't implement it either.
Link to facebook images (image names changed later): 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;
}
The 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.