I'm new to developing for Facebook. I'm actually writing an app for a university course.
I followed the tutorials on the developer website, and they originally worked like a charm. I used the example which produced a login with Facebook button, and another page which would retrieve information from the logged in user and display it on the page.
I left it for a couple of weeks to work on other commitments, now this code doesn't work. Whereas before it would list the profile picture, name, email etc. Now it just says undefined. The only thing I could put it down to was that I had been using something which had been depreciated, since I'd now switched over to the timeline for my Facebook account (however why would the original example I used still be the first set of tutorials on the developer website https://developers.facebook.com/docs/guides/web/).
I also went to the Open Graph page on the developer website, they have a tutorial there which just displays a picture of a cookie and then adds the app to your timeline (I'm sure you're all familiar with it). That doesn't work either! It just brings up a blank box which immediately vanishes (doesn't ask me to authorise anything) and doesn't add anything to my timeline.
I've tried looking at my app settings but I can't see anything odd.
Probably you are using some deprecated functions.
First thing to do is to make sure you have an application created on facebook, and that the site URL on the settings of the application is the site that you are writing your application (example: http://locahost/application_name). Also, take note of the application id (you can find all these settings on https://developers.facebook.com/apps/).
Now that you got this, here is working example for extracting information for your user (replace "YOUR_APP_ID" with your application ID:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/styles.css" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/default.css" />
<script type="text/javascript" src="js/jquery-ui.min.1.8.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type='text/javascript' src="js/jquery-ui.min.js"></script>
<script type='text/javascript' src="js/main.js"></script>
<script type='text/javascript' src='js/default.js'></script>
<script language="JavaScript">
function get_feed()
{
FB.api('/me', function(response) {
alert(response.name);
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="login"></div>
<div id="test"></div>
<div id="stream"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
oauth : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
window.location.reload();
});
FB.getLoginStatus(function(response) {
if (response.status == "connected") {
// logged in and connected user, now get the facebook info
get_feed();
document.getElementById('login').innerHTML
='Logout fom Facebook<br/>';
} else {
document.getElementById('login').innerHTML
='<fb:login-button show-faces="true" width="200"'
+ ' max-rows="1" perms="user_about_me, user_likes, friends_likes, read_stream, publish_stream">'
+ '</fb:login-button>';
FB.XFBML.parse();
}
});
</script>
</body>
</html>
Hope it helps.
Related
I'm having trouble getting the Messenger Checkbox plugin to work: the Facebook script loads fine, it parses the page well (I can see this with the debug version of the SDK), but the checkbox remains in "hidden" status.
This is an HTML sample of my page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TestCheckboxMessenger</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: "[my-app-id]",
autoLogAppEvents: true,
xfbml: true,
version: "v10.0",
});
FB.Event.subscribe("messenger_checkbox", function (e) {
if (e.event == "rendered") {
console.log("Plugin was rendered");
} else if (e.event == "checkbox") {
var checkboxState = e.state;
console.log("Checkbox state: " + checkboxState);
} else if (e.event == "not_you") {
console.log("User clicked 'not you'");
} else if (e.event == "hidden") {
console.log("Plugin was hidden");
}
});
};
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk/debug.js"
></script>
<div
class="fb-messenger-checkbox"
origin="https://[my-domain-name]/"
page_id="[my-page-id]"
messenger_app_id="[my-app-id]"
user_ref="[some-random-id]"
size="medium"
skin="light"
center_align="true"
></div>
<app-root></app-root>
</body>
</html>
I have carefully read the facebook documentation and the solutions proposed on StackOverflow, but the checkbox does not appear. I have taken into account the following points:
My page is served on HTTPS with a domain name that is whitelisted in my page options
The user_ref is a randomly generated id that is new on every page refresh
My app is in what was called "development mode" so I have Standard access to pages_messaging and I have admin role on the app (and I am connected to my account)
My Messenger webhook is live and working
As strange as it may seem, the conversation plugin works fine.
What conversation plugin looks like
Is there a method to debug the checkbox status? To know why it is hidden? Because I have no error message in the Chrome console and all this is very frustrating :)
Ok so, acccording to this Facebook Update, the checkbox plugin and some other features including optin mechanics, media messages, etc. have been deactivated in Europe and some other countries because of GDPR.
Facebook planned to restore them by Q1 2021, but now they are moving the timeline towards Q2 2021.
I don't understand why they don't put a warning message on the docs about these features... :(
I'm trying to get Slick Nav working and I'm currently testing it unsuccessfully on an empty page online. Locally it works perfectly, but it just doesn't want to run online - even if its the identical code. I have put the files from the "dist" folder from the slick nav download into a folder called "SlickNav" on my main folder on my FTP-Server (just like I did it locally). My test page contains the following:
<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="SlickNav/jquery.slicknav.min.js"></script>
// I already tried putting my URL before the link rel and the script src above but it didn't help
<script>
$(function(){
$('#menu').slicknav({
label: "MENU"
});
});
<ul id="menu">
<li><a class="scroll" href="#features">Features</a></li>
<li><a class="scroll" href="#usage">Usage Instructions</a></li>
<li><a class="scroll" href="#examples">Examples</a></li>
<li>View on Github</li>
</ul>
I'm trying this for over 3 hours now and I just don't see it anymore.. perhaps someone had similar problems or simply sees the (probably dumb) mistake, I would be eternally grateful..
Found the solution after inspecting the console: For the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
which I simply copy and pasted had to be changed to match the https of my site -> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Hi I have been dealing with facebook apps and actions a lot lately and it doesn't seem to work for me. Now I hear that the social button for likes is about to migrate and I can't figure out how to even publish the like built-in action via the app I created (it's an app for websites).
The code to publish actions I have taken from here: https://developers.facebook.com/docs/opengraph/tutorial/ and this is what they say:
<head prefix="og: http://ogp.me/ns# [YOUR_APP_NAMESPACE]:
http://ogp.me/ns/apps/[YOUR_APP_NAMESPACE]#">
<title>OG Tutorial App</title>
<meta property="fb:app_id" content="[YOUR_APP_ID]" />
<meta property="og:type" content="[YOUR_APP_NAMESPACE]:recipe" />
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
other metatag properties etc.
<script type="text/javascript">
function postCook()
{
FB.api(
'/me/[YOUR_APP_NAMESPACE]:cook',
'post',
{ recipe: 'http://fbwerks.com:8000/zhen/cookie.html' },
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[YOUR_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
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
etc etc.
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
<fb:activity actions="[YOUR_APP_NAMESPACE]:cook"></fb:activity>
the fact is that I am not able to publish any action (returns an error) and of course my app has the actions I am trying to publish. Doesn anyone have a clue? I'm not a professional developer but the ones I asked had no solution...
Many thanks!
I found the problem!
Apparently the include function in PHP had the headed we used around the website conflict with the Facebook metadata. When I removed the headers and the "php start", all functions (comments included) were working.
It still seem a peculiar issue though: apparently Facebook's API doesn't clear the cache, so now we have to create new pages to enable functions. No way to have them in the current page locations.
Uncaught ReferenceError: _onloadHook is not defined
Why? My code is below:
<!DOCTYPE html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<html>
<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//Initialize facebook
FB.init({
appId : '12345',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://www.abc.com/channel.html', // channel.html file
});
</script>
</head>
<body>
<div id="fb-root"></div>
<fb:send href="http://abc.com/blah" font="lucida grande" ref="codes_popup"></fb:send>
<fb:send href="http://abc.com/blah" font="lucida grande" ref="codes_popup"></fb:send>
</body>
</html>
Edit: When I have multiple this will happen. When I only have one "send" button , the error is not there.
For every extra "Send" button, the error occurs.
This is a bug in the Facebook Platform; it has already been reported as bug #20041.
Place the Facebook JS library and JS code scripts under the fb-root div:
<!DOCTYPE html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
//Initialize facebook
FB.init({
appId : 'XXX',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://www.abc.com/channel.html', // channel.html file
});
</script>
<fb:send href="http://abc.com/blah" font="lucida grande" ref="codes_popup"></fb:send>
</body>
</html>
I have been getting the exact same error today.
As ifaour mentions, the FB documentation says that you need to place the FB <script> tags under the <div id="fb-root"></div>. However, in his example and in the FB documentation, they put the scripts directly under the <div id="fb-root"></div>. I was doing that and still getting the error the OP mentions. I was finally able to solve the problem by moving the FB <script> tags to the very bottom of the page, right before the closing </body> tag. I believe what was happening is that some of my other scripts were interfering with the loading of the FB scripts. Hope that helps.
You should call the facebook javascript using the upgraded async method. This will make sure that the whole DOM is loaded so that the fb:root is already on the page.
http://developers.facebook.com/docs/reference/javascript/FB.init/
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://www.yourdomain.com/channel.html', // Custom Channel URL
oauth : true //enables OAuth 2.0
});
};
(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>
Also critically important is to add support for OAuth 2.0 http://developers.facebook.com/blog/post/525/
oauth : true
As of Oct 1 if you don't have that your apps will stop working properly.
I got the Facebook login/logout functionality to work, but had to do it with this un-elegant code like this:
<script type="javascript">
function loadfb() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/es_LA/all.js';
document.getElementById('fb-root').appendChild(e);
};
</script>
<body onload="loadfb()">
I plan on putting that Facebook login button on all the pages of the site, so I really don't want to have this function called onload of every page.
Is this function necessary? I don't completely understand what it is for. What is a better way to do this so I can take it out of my onload?
Thanks!
This code is for asynchronous loading of the Facebook JavaScript SDK. What it does is create the tag
<script async scr="https://connect.facebook.net/es_LA/all.js" ></script>
inside the <div id="fb-root"></div> element. While loading the SDK asynchronously is considered better practice, you can leave out this code and manually enter the script tag yourself - eg:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js"></script>
<script>
FB.init({
...
});
</script>