Trouble with facebook sdk quickstart - facebook

Following directions here https://developers.facebook.com/docs/javascript/quickstart
I started with a mostly blank HTML page, just the HTML, Body tags, and a simple Hello World.
I copied and pasted directly from the quickstart page but get nothing (but Hello World does Load).
I have an app ID (I wasn't sure if I should include the {} or not, tried both ways, no change.
I added the code from section "Using the SDK to add Social Plugins", "Using the SDK to trigger a Feed dialog" etc and nothing. Running on CentOS/Apache, server is fine. Not sure what I'm missing. Thoughts?
Thank you for your time.
PS page is here to view source: http://nex916.elementfx.com/purity3.html

Maybe something like the following will be of help?
<div id="fb-root"></div>
<!-- Load the Facebook JavaScript SDK -->
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
// Initialize the Facebook JavaScript SDK
FB.init({
appId: 'YOUR_APP_ID',
xfbml: true,
status: true,
cookie: true,
});
// Check if the current user is logged in and has authorized the app
FB.getLoginStatus(checkLoginStatus);
// Login in the current user via Facebook and ask for email permission
function authUser() {
FB.login(checkLoginStatus, {scope:'email'});
}
// Check the result of the user status and display login button if necessary
function checkLoginStatus(response) {
if(response && response.status == 'connected') {
//alert('User is authorized');
// Hide the login button
document.getElementById('loginButton').style.display = 'none';
// Now Personalize the User Experience
//console.log('Access Token: ' + response.authResponse.accessToken);
} else {
//alert('User is not authorized');
// Display the login button
document.getElementById('loginButton').style.display = 'block';
}
}
FB.ui(
{
method: 'feed',
name: 'The Facebook SDK for Javascript',
caption: 'Bringing Facebook to the desktop and mobile web',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
link: 'https://developers.facebook.com/docs/reference/javascript/',
picture: 'http://www.fbrell.com/public/f8.jpg'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
</script>
<input id="loginButton" type="button" value="Ligin with Facebook" onclick="authUser();" /></div>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>

You have a syntax error in your JS
SyntaxError: syntax error purity2.html:26
To fix it, remove }; from line 19
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
console.log('Logged in');
} else {
FB.login();
}
});
}; // this
it should be like
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
console.log('Logged in');
} else {
FB.login();
}
});
Now your code should work

Related

Facebook xd_arbiter.php JSON.parse

I've put together a test site to try and get facebook login working with the following code, but I get two errors showing up in FireBug which doesn't seem to effect the functionality of the web page when I just ignore them and carry on.
HTML:
<div class="fb-login-button" show-faces="true" autologoutlink="true" width="200" max-rows="1"></div>
<div id="FBLogin"><a id="FBLoginLnk" href="#" title="Login with Facebook"><img src="./login-button.png" /></a></div>
Javascript:
$(document).ready(function(){
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function(){
FB.init({
appId: "012345678901234",
status: true, // check login status
channelUrl : '//website.co.uk/bla/channel.php', // Channel File
cookie: true,
xfbml: true, // parse XFBML
oauth: true
});
FB.Event.subscribe('auth.statusChange', function() {
console.timeStamp("Login even")
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
console.log("Connected Event");
// Good to go
} else if (response.status === 'not_authorized') {
console.log("Not Authorized Event");
NotLoggedIn();
}else{
console.log("Not Logged In Event");
NotLoggedIn();
}
});
});
FB.getLoginStatus(function (response) {
console.timeStamp("getLoginStatus")
if (response.status === 'connected') {
console.log("Connected");
} else if (response.status === 'not_authorized') {
console.log("Not authorised");
NotLoggedIn();
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.website.co.uk/bla';
} else {
console.log("User not logged in status unknown");
NotLoggedIn();
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.website.co.uk/bla';
}
});
});
$('div#FBLogin').click(function(){
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.danthegeek.co.uk/bla';
});
});
function NotLoggedIn(){
console.timeStamp("notLoggedIn Called");
// Reset Website
}
The two errors I'm getting are with xd_arbiter.php?version=27 which seems to get called.
JSON.parse: bad control character in string literal
Line 13
JSON.parse: unexpected non-whitespace character after JSON data
Line 13
As a overview, The intention is to have the page auto-redirect to Facebooks login page (not a pop-up window as this doesn't display correctly on mobile devices). If logged in already, no re-direction happens but user can Log Out which will cause a Login button to be displayed which when clicked goes to the Facebook login page, again no pop-up. This all seems to work fine, but I'm not sure if the code structure is exactly how it should be. I don't believe this to be part of the fault. I really wanted to use the facebook social button to login but couldn't get this to work redirecting to the facebook login page, it only seems to cause a pop-up window which is why I show my own Login with Facebook button.
If it wasn't for firebug halting the code all the time saying there was a error I wouldn't even know there was a problem.
The javascript on my test page is quite complicated but even with everything stripped out and running as above I get this problem.
Any help greatly appreciated.

Facebook send dialogue authentication

I’m creating a custom share to facebook functionality, which has been more complicated than I originally thought.
I’ve had to create a facebook app and then use It’s ID to get it going.
If you try to share the page on facebook, it gets you login to facebook(if not logged in), then it requests access to your profile(only on your first share), and then proceeds to share dialogue to let you share it.
However I’ve noticed that other sites including youtube and BBC, that they don’t request access to share on facebook, It will take you straight to the share dialogue instead.
Is there a way to achieve this?
Code using is below:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '*APP_ID*', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
link : '*LINK*'
});
$('.share-print .facebook > a').click(function(e){
e.preventDefault();
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
facebookSend();
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
FB.login(function(response) {
if (response.authResponse) {
console.log('Logged in');
facebookSend();
} else {
console.log('Not logged in');
}
});
} else {
// the user isn't logged in to Facebook.
FB.login(function(response) {
if (response.authResponse) {
console.log('Logged in');
facebookSend();
} else {
console.log('Not logged in');
}
});
}
});
});
var facebookSend = function() {
console.log('facebookSend started');
FB.ui({
method: 'feed',
display: 'iframe',
link: '*PAGE_LINK*'
});
}
</script>

redirect user after share facebook

i want to redirect users to a specific page after they share on facebook, i have found a good answer here at:
redirect user after facebook share and publish
here's the script
<script type="text/javascript">
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function share_me() {
FB.ui({
method: 'feed',
app_id: 'YOUR_APP_ID',
link: 'SHARE_URL',
picture: 'PIC_URL',
name: 'SHARE_NAME',
caption: 'SHARE_CAPTION',
description: 'SHARE_DESCRIPTION'
},
function(response){
if(response && response.post_id) {
self.location.href = 'SUCCESS_URL'
}
else {
self.location.href = 'CANCEL_URL'
}
});
}
</script>";
<div onclick="share_me()">Share</div>
but when i used the script ,there's no redirect at all, even if the user click "cancel"
please help me with this as am searching for a method like this since 1 week!
Try using another javascript function for redirecting like window.location = "YOUR_PAGE"

Custom login button VS. fbml button

For a few days i was trying to use a custom button to invoke login
$(".join").live("click", login);
function login(){
FB.login(function(response) {
if (response) {
console.log('Login success.');
FB.api("/me", handleMe);
}
else {console.log('Login cancelled.')}
});
}
function handleMe(response) {
$.ajax({
async: 'false',
type: 'GET',
url: 'www. address.com',
data:
"uid=" + response.id +
"&name=" + response.name,
success: function(){
console.log('Ajax successful.');
console.log("<?php echo $this->session->userdata('fb_uid'); ?>");
window.location = "www. address.com";
},
error: function(){console.log('Ajax failed.');}
});
}
$(".join,.log,.biggie-btn").live("click", login);
However it was always buggy, the login window would not close (oddly, most of the times) and after I closed it, I would not get the user FB.API details, and I had to refresh the page to get them.
As soon as I switched to the bugs were gone (having exactly the same functionality), however I can't control now the style of the login button.
Is there a solution, to have a fully functional custom login button?
You can use the Facebook javascript SDK and easily build your own login button. Just have the button class FB.login and pass it a callback function and optionally any extended permissions you need. Upon success, this will set a cookie that has an access_token that you can use from server code if needed. Otherwise, you can just call javascript sdk functions.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
Custom Login Button
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: 'your app id', status: true, cookie: true, xfbml : true });
function doLogin() {
FB.login(function(response) {
if (response.session && response.perms) {
FB.api('/me',
function(response) {
alert('User: ' + response.name);
alert('Full details: ' + JSON.stringify(response));
}
);
}
} , {perms:'user_about_me'});
}
</script>
</body>
</html>

Facebook code to prompt for stream publish with in application

I have a bit confusion using facebook API. I am using a code that is working out side of facebook but not in facebook application canvas page.
I have bit idea but not sure. Can anybody let me know the reason behind this and the code that will run in facebook application.
What is difference you run code using application like
http://apps.facebook.com/exampleAPP/test.php
or normal url
http://www. example.com/example/test.php
http://www. example.com/example/ is the canvas URL
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '115454544334343454',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.ui(
{
method: 'stream.publish',
attachment: {
name: 'JSSDK',
caption: 'The Facebook JavaScript SDK',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
href: 'http://fbrell.com/'
},
action_links: [
{ text: 'fbrell', href: 'http://fbrell.com/' }
]
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
</script>
I'm fairly sure stream.publish is deprecated and unsupported. What you want instead is the Feed dialog.