How would I replace the generated facebook login button with my own custom one?
I am guessing it can either be done by creating a function of the code that fires up the dialog or driving the button off the screen with some css tricks. I'd prefer the first solution.
How could I make my own button do what theirs does and get rid of the the default button?
Here's the example code from the facebook developers site:
require 'fb/facebook.php';
$facebook = new Facebook(array(
'appId' => 'X',
'secret' => 'X',
));
// See if there is a user from a cookie
$user = $facebook->getUser();
if ($user) {
try {
// Proceed knowing you have a logged in user who's authenticated.
$user_profile = $facebook->api('/me');
} catch (FacebookApiException $e) {
echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
$user = null;
}
}
?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<?php if ($user) { ?>
Your user profile is
<pre>
<?php print htmlspecialchars(print_r($user_profile, true)) ?>
</pre>
<?php } else { ?>
<fb:login-button></fb:login-button>
<?php } ?>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo $facebook->getAppID() ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
Just use FB.login method of the JavaScript SDK, and call it onclick on your own button.
http://developers.facebook.com/docs/reference/javascript/FB.login/
Related
The reference:
https://developers.facebook.com/docs/howtos/login/extending-tokens/
states:
By default most Access Tokens have a finite validity period that is generally around 1 to 2 hours long. In order to continue using these tokens after the expire time, they need to be extended.
So why in all the example given in the facebook php sdk the login expires only after a few minutes and after that a new login is required?
thanks
EDIT
This is one example's code (https://github.com/facebook/facebook-php-sdk/blob/master/examples/with_js_sdk.php)
<?php
require '../src/facebook.php';
$facebook = new Facebook(array(
'appId' => '344617158898614',
'secret' => '6dc8ac871858b34798bc2488200e503d',
));
// See if there is a user from a cookie
$user = $facebook->getUser();
if ($user) {
try {
// Proceed knowing you have a logged in user who's authenticated.
$user_profile = $facebook->api('/me');
} catch (FacebookApiException $e) {
echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
$user = null;
}
}
?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<?php if ($user) { ?>
Your user profile is
<pre>
<?php print htmlspecialchars(print_r($user_profile, true)) ?>
</pre>
<?php } else { ?>
<fb:login-button></fb:login-button>
<?php } ?>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo $facebook->getAppID() ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
I ran into this too recently. I think it has something to do with the /me so I tried changing it to /user_id. Here is the code I used:
require_once 'facebook-php/src/facebook.php';
$facebook = new Facebook(array(
'appId' => '13********',
'secret' => '7a***********',
));
$userId = $facebook->getUser();
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '13**********', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script> <?
if ($userId) {
$userInfo = $facebook->api('/' . $userId);
?>
<img src="http://graph.facebook.com/<?php echo $userId; ?>/picture" align="left" width="24px" height="24px" style="padding: 2px 10px 2px 5px"> <div style="margin:0 0 0 0; padding:0 0 0 0; display:inline; height:24px; line-height:28px"><b>Hi there, <?php echo $userInfo['name']; ?>!</b></div>
<? } else { ?>
<div class="fb-login-button" style="display:inline; position:relative; top:3px" scope="email,user_birthday,publish_stream,offline_access"></div>
<? } ?>
</body>
</html>
That code works prefect for me and as long as they are signed into Facebook they come up on the site.
I have a big problem that I tried to fix for days now without being able.
I got the following code to Log in an aplication on Facebook. Everything is working well except that when the page is reloading (with window.location.reload();) it is not updating API /me so it always coming back with the login button.
EXCEPTION: when I click F5 to refresh the page then it is working well
If someone could help that would be appreciated
Thanks
<?php
require 'facebook.php';
// Create our Application instance (replace this with your appId and secret).
$facebook = new Facebook(array(
'appId' => 'xxxxxxxxxxxx',
'secret' => 'xxxxxxxxxxxxx',));
$user = $facebook->getUser();
// login or logout url will be needed depending on current user state.
if ($user) {
$logoutUrl = $facebook->getLogoutUrl();
} else {
$loginUrl = $facebook->getLoginUrl();
}
$user = $facebook->getUser();
// Session based API call.
if ($user) {
try {
$me = $facebook->api('/me');
} catch (FacebookApiException $e) {
echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
$user = null;
}
}
?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>test full name and photo</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $facebook->getAppId(); ?>', // App ID
channelURL : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function() {
window.location.reload();
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/fr_CA/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function fbLogin() {
FB.login(function(response) {
if (response.status == 'connected') {
window.location.reload(); }
else {
alert('Try to connect');
}
}, {scope: 'email,user_likes'});
}
</script>
<?php if ($user): ?>
USER LOGGIN
<?php else: ?>
<div>
Connexion button: <INPUT TYPE="BUTTON" ONCLICK="fbLogin()" value="login">
</div>
<?php endif ?>
<?php if ($user): ?>
<?php $uid = $me['id']; ?>
<div align="center">
<img id="image" src="https://graph.facebook.com/<?php echo $uid; ?>/picture" />
<div id="name"><?php echo $me['name']; ?></div>
<div id="name">UID: <?php echo $me['id']; ?></div>
<div id="name">Courriel <?php echo $me['email']; ?></div>
</div>
<?php endif ?>
</body>
</html>
FB.login does not return response.status, this is returned by FB.getLoginStatus. Please also refer to the FB.login document for more information.
I have an application which is in a Facebook fan page's tab.
When a user access to this page's tab, I request to him some permissions.
My issue is that, when the user accept the permissions, he is redirected to http://apps.facebook.com/ and not the page's tab.
$my_url = "https://apps.facebook.com/<my_app_name>/";
If I change my_url value to http://www.facebook.com/pages/, then the user is on an infinite loop.
My code:
if (isset($_REQUEST["code"])) {
$code = $_REQUEST["code"];
}
if(empty($code)) {
// Get permission from the user to manage their Page.
$dialog_url = "http://www.facebook.com/dialog/oauth?client_id="
. $app_id . "&redirect_uri=" . urlencode($my_url)
. "&scope=read_stream";
echo('<script>top.location.href="' . $dialog_url . '";</script>');
} else {
//my code
}
Thanks.
That is because the code variable is never passed to the contents of your iFrame tab via the Fan Page/Application Tab URL (if you use an application tab URL no additional parameters will be passed to the iFrame URL). As such, going by the code example above the, JavaScript redirect to the authentication dialog will always passed to the client browser.
You should look at using the latest PHP SDK (v3.1.1) with the JavaScript SDK to do your authentication:
http://developers.facebook.com/blog/post/534/
Code example from the above blog post:
require 'php-sdk/src/facebook.php';
$facebook = new Facebook(array(
'appId' => 'YOUR_APP_ID',
'secret' => 'YOUR_APP_SECRET',
));
// See if there is a user from a cookie
$user = $facebook->getUser();
if ($user) {
try {
// Proceed knowing you have a logged in user who's authenticated.
$user_profile = $facebook->api('/me');
} catch (FacebookApiException $e) {
echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
$user = null;
}
}
?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<?php if ($user_profile) { ?>
Your user profile is
<pre>
<?php print htmlspecialchars(print_r($user_profile, true)) ?>
</pre>
<?php } else { ?>
<fb:login-button></fb:login-button>
<?php } ?>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo $facebook->getAppID() ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
Once I initiate the FB.login(), I need the php code to grab all the information after the login. It was working fine before I updated to the new api. Any ideas? Seems as though the session isnt being stored?
window.fbAsyncInit = function() {
FB.init({
appId: 'xx',
status: true,
cookie: true,
xfbml: true,
oauth : true // enables OAuth 2.0
});
};
function test () {
window.location.reload();
}
Here's my html:
login plz
For getting data from FB.login() you can subscribe to the auth.login event - for example:
FB.Event.subscribe('auth.login', function(response) {
console.log(response);
console.log(response.session.access_token);
console.log(response.session.expires);
console.log(response.session.secret);
console.log(response.session.session_key);
console.log(response.session.sig);
console.log(response.session.uid);
});
You should look at using the latest PHP SDK (v3.1.1) with the JavaScript SDK for maintaining the session across client and server:
http://developers.facebook.com/blog/post/534/
Code example from the above blog post:
require 'php-sdk/src/facebook.php';
$facebook = new Facebook(array(
'appId' => 'YOUR_APP_ID',
'secret' => 'YOUR_APP_SECRET',
));
// See if there is a user from a cookie
$user = $facebook->getUser();
if ($user) {
try {
// Proceed knowing you have a logged in user who's authenticated.
$user_profile = $facebook->api('/me');
} catch (FacebookApiException $e) {
echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
$user = null;
}
}
?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<?php if ($user_profile) { ?>
Your user profile is
<pre>
<?php print htmlspecialchars(print_r($user_profile, true)) ?>
</pre>
<?php } else { ?>
<fb:login-button></fb:login-button>
<?php } ?>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo $facebook->getAppID() ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
I have create a simple facebook application.
Now I want to get permission for read_stream.
I have read a lot of documentation but I don't understand.
Could you tell me how to get this permission with PHP or javascript ?
Edit:
I have used this source code ( you can se it working here ) but doesn't work because I get only basic permission:
<?php
require_once('facebook.php');
// Create our Application instance (replace this with your appId and secret).
$facebook = new Facebook(array(
'appId' => 'xxx',
'secret' => 'xxx',
'cookie' => true,
));
$session = $facebook->getSession();
$me = null;
// Session based API call.
if ($session) {
try {
$uid = $facebook->getUser();
$me = $facebook->api('/me');
} catch (FacebookApiException $e) {
error_log($e);
}
}
// login or logout url will be needed depending on current user state.
if (!$me) {
$loginUrl = $facebook->getLoginUrl();
} else {
// $fbme is valid i.e. user can access our app
$logoutUrl = $facebook->getLogoutUrl();
}
// This call will always work since we are fetching public data.
?>
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>php-sdk</title>
<style>
body {
font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
}
h1 a {
text-decoration: none;
color: #3b5998;
}
h1 a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!--
We use the JS SDK to provide a richer user experience. For more info,
look here: http://github.com/facebook/connect-js
-->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $facebook->getAppId(); ?>',
session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:'read_stream'});
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function() {
window.location.reload();
});
};
(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);
}());
</script>
<h1>I love you</h1>
<?php if ($me): ?>
<a href="<?php echo $logoutUrl; ?>">
<img src="http://static.ak.fbcdn.net/rsrc.php/z2Y31/hash/cxrz4k7j.gif">
</a>
<?php else: ?>
<div>
Using JavaScript & XFBML: <fb:login-button></fb:login-button>
</div>
<?php endif ?>
<h3>Session</h3>
<?php if ($me): ?>
<pre><?php print_r($session); ?></pre>
<h3>You</h3>
<img src="https://graph.facebook.com/<?php echo $uid; ?>/picture">
<?php echo $me['name']; ?>
<h3>Your User Object</h3>
<pre><?php print_r($me); ?></pre>
<?php else: ?>
<strong><em>You are not Connected.</em></strong>
<?php endif ?>
</body>
</html>
var cb = function(response) {
//Log.info('FB.login callback', response);
if (response.status === 'connected') {
//Log.info('User logged in');
} else {
//Log.info('User is logged out');
}
};
FB.login(cb, {
scope: 'publish_stream',
enable_profile_selector: 1
});
references:
http://www.fbrell.com/saved/ac4c4abe0ea46d6363350b6f0c12c6ea
http://www.softwareandfinance.com/apps/facebook/graph_api_access_feed_publish.html
// server-side to verify
$permissions = $facebook->api("/me/permissions");
if( array_key_exists('publish_stream', $permissions['data'][0]) ) {
$result = $facebook->api($feed_dir, 'post', $msg_body);
}
// result is id of post
In javascript API you can request permissions during login using FB.login(). More about it here (with examples)
In PHP you can request extended permission during authentication process. More about it here (see "Requesting Extended Permissions")
Javascript approach is much easier imo.
UPDATE
Ok there is the third way of getting permissions using fb:login-button fbml tag:
<fb:login-button perms="read_stream,offline_access"></fb:login-button>