I am trying to test out an Open Graph Facebook action and am having trouble wrapping my head around how to do it. I used this video to get started: http://www.youtube.com/watch?v=8x6T7-WFSBg . It gives me an error when I try to run the code (which I've pasted below). I figured I'd just test out and see if I'm getting the correct response by going to http://graph.facebook.com/me/APP_NAME (with app_name of course being replaced with my apps namespace). I get this error though:
{
"error": {
"message": "An active access token must be used to query information about the current user.",
"type": "OAuthException",
"code": 2500
}
}
I'm assuming the reason I can't test my action is because there is no active access token? The problem I'm finding though is that I'm the administrator on the app so I'm assuming I should have that access either way.
Here's the code used (from that video) in order to just have an easy basic test for an Open Graph action. Be aware that I have substituted the app's info wherever the words are all caps. Thanks for your help in advance, I'm very new to the Open Graph and am just trying to dive in. Thank for your patience with me as well!
Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# APP_NAMESPACE: http://ogp.me/ns/fb/APP_NAMESPACE#">
<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="APP_NAMESPACE:ACTION" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="Sample ACTION" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<input type="button" value="test" onclick="javascript:postAction('ACTION', 'OBJECT', 'URL OF THIS PAGE');" />
<script type="text/javascript">
function postAction( action, object_type, object_url ){
FB.api('/me/APP_NAMESPACE:' + action + '?' + object_type + '=' + object_url, 'post', function(response){
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
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
});
};
// 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>
</body>
</html>
You need to authenticate your user with the app
check here for more info: http://hayageek.com/facebook-dialog-oauth/ or via facebook dev http://developers.facebook.com/docs/concepts/login/
Related
my facebook share isnt reading any of my meta tags. The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id.
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: '924796707731406',
autoLogAppEvents: true,
xfbml: true,
version: 'v3.1'
});
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<meta property="og:image" content="https://#Context.Request.Host/img/OppaFb.png" />
<meta property="og:image:width" content="1200px" />
<meta property="og:image:height" content="630px" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:title" content="OPPA - უნივერსალური ელექტრონული საფულე" />
<meta property="og:description" content="ოპპა ფულის მარტივად მართვაში გეხმარება. საიმედოდ დაცულ სივრცეში შეგიძლია გადაიხადო, გადარიცხო და დააგროვო ფული" />
<meta charset="utf-8" />
<meta property="fb:app_id" content="924796707731406"/>
<script>
document.getElementById('piggy-bank-fb-shear-btn').onclick = function () {
FB.ui({
method: 'share',
display: 'popup',
app_id: '924796707731406',
href: window.fbSheareUrl,
}, function (response) { });
}</script>
Try using Facebooks "Sharing Debugger" here
If I am correct this is for the www.oppa.ge website. And by using the debugger and looking at the html on the url it seems these tags missing...
og:url, og:type, fb:app_id
Results here
Also this could be due to your app on Facebook being "Misconfigured".
I get this error
Misconfigured App
Sorry, oppa-share hasn't been approved for display in App Center.
When doing the following
Going to https://graph.facebook.com/{APP_ID_HERE} (https://graph.facebook.com/924796707731406)
Follow the "link" attribute in the JSON (https://www.facebook.com/games/?app_id=924796707731406)
Using the facebook javascript sdk - I have made this function to post information to the wall of the current facebook user.
But I'm sure this is correct (obviously not) but cannot find the syntax error anywhere.
The error only appears when I click the the post to wall button. Can any one help me understand why the error is coming about?
Thanks
Josh
Please see my full tab app code below.
<?php
require 'facebook-php-sdk-master/src/facebook.php';
$fb_app_id = 'XXXXXXXXXXXXXXX';
$fb_secret = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
$fb_admins = 'XXXXXXXXX';
$fb_channel_url = '//myapp.co.uk';
$og_title = 'My App';
$og_description = 'This is my app';
$facebook = new Facebook(array(
'appId' => $fb_app_id,
'secret' => $fb_secret,
'cookie' => true
));
$signed_request = $facebook->getSignedRequest();
?>
<!DOCTYPE html>
<head>
<meta name="robots" content="noindex, nofollow">
<meta charset="utf-8">
<meta property="fb:app_id" content="<?php echo $fb_app_id; ?>">
<meta property="fb:admins" content="<?php echo $fb_admins; ?>">
</head>
<body>
Post to wall
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $fb_app_id; ?>', // App ID
channelUrl : '<?php echo $fb_channel_url; ?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoGrow(true);
};
function fb_publish(link,title,image,description) {
var obj = {
method: 'feed',
link: link,
picture: image,
name: title,
caption: 'facebook.com/mypage',
description: description
};
function callback(response) {
}
FB.ui(obj, callback);
}
/***** load SDK *****/
(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>
</body>
</html>
I kept on trying figure out my problem and in the I got the post wall function to work.
The reason for the unexpected identifier was because of my php string. Not escaping things properly.
I fixed the problem with some help here: How to echo php string safely in a java script onclick identifier
Also note when wanting to use the post to wall function, you need to allow the access to the domain using App Domains. (see all my setting below)
I am getting the common JS error "Uncaught Reference Error: FB is not defined "
There are a lot of questions on the same issue and I have tried each solution available on
stackoverflow but to no avail. Apparently, people seem to get this issue sometimes, I am getting it all the time. Can anyone spot an error ? I am not using a chnnel url file for the time being
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function()
{
// init the FB JS SDK
FB.init=({
appId : 'xxxxxxxxxxx', // App ID from the App Dashboard
//channelUrl : 'www.something.in/channel.html', // Channel File for x-domain communication
status : false, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
}) ;
// Additional initialization code such as adding Event Listeners goes here
} ;
</script>
<script type="text/javascript">
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
alert(uid) ;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
alert("not authorised");
} else {
// the user isn't logged in to Facebook.
alert("NOTHING") ;
}
});
</script>
</body>
</html>
Can you get the basic example to work?
https://developers.facebook.com/docs/facebook-login/getting-started-web/
(the full text under section 3)
I could get the basic simple example to load BUT when I included my own code base FB was never defined.
It turned out to be the fact that I had prototyped "Object" to have a method called 'copyProperties'.
I changed that method to 'copyProps' and it all works now. So, if Facebook is prototyping Object for their own purposes then I'd guess there are some other potential collisions out there too.
Sure, this must be one reason everyone says not to prototype Object, but so convenient! Obviously, it's not enumerable, so don't yell at me too hard.
I had the same problem and I tried everything. I only solved it by requesting the Facebook script by jQuery and then initializing it:
$(document).ready(function()
{
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
FB.init({ appId: 'xxxxxxxx', status: false, cookie: true, xfbml: true });
});
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
alert(uid) ;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
alert("not authorised");
} else {
// the user isn't logged in to Facebook.
alert("NOTHING") ;
}
});
Your code has a small mistake in FB.init=({.
You have to remove equal sign after FB.init and your code look like:
FB.init({
appId : 'xxxxxxxxxxx', // App ID from the App Dashboard
//channelUrl : 'www.something.in/channel.html', // Channel File for x-domain communication
status : false, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
}) ;
One more mistake you have done . your div id is fb-root but at the time of initialize you declare facebook-jssdk id
just make sure both should be same
I'm a bit stuck.
I have a Joomla site and I've got my app working to the point any app user can post the the video on certain pages to their wall using FBui - but what i reall want is the ability to post the video to anywhere, i looked into using og tags, i've added them but the video doesnt show up - im guessing ive got an issue or conflict somewhere. An example page:
Album page - http://fnoob.com/archives/P/34-alex-paterson/468-chewy-choosedays-vol-91-100
Here's the header part that's relevant ( i've taken out the links + appid - i know they work) :
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#"><meta property="fb:app_id" content="my_app_id">
<meta property="og:type" content="video.other" >
<meta property="og:url" content="path_to_swf" >
<meta property="og:image" content="path_to_image" >
further down we have the post to wall function which is working as:
<div id='fb-root'></div>
<script>
var APP_ID='137867843030139';
window.fbAsyncInit = initFacebook;
function initFacebook()
{
FB.init({
appId : APP_ID,
status : true, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(onFacebookLoginStatus);
};
(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);
}());
function facebookLogout()
{
FB.logout();
var loginButtonDiv=document.getElementById("fb-login-button-div");
loginButtonDiv.style.display="block";
var logoutButtonDiv=document.getElementById("fb-logout-button-div");
logoutButtonDiv.style.display="none";
var contentDiv=document.getElementById("user-is-authenticated-div");
contentDiv.style.display="none";
}
function facebookLogin()
{
var loginUrl='http://www.facebook.com/dialog/oauth/?'+
'scope=publish_stream,manage_pages&'+
'client_id='+APP_ID+'&'+
'redirect_uri='+document.location.href+'&'+
'response_type=token';
window.location=loginUrl;
}
/*
* Callback function for FB.login
*/
function onFacebookLoginStatus(response)
{
if (response.status=='connected' && response.authResponse)
{
var loginButtonDiv=document.getElementById("fb-login-button-div");
loginButtonDiv.style.display="none";
var logoutButtonDiv=document.getElementById("fb-logout-button-div");
logoutButtonDiv.style.display="none";
var contentDiv=document.getElementById("user-is-authenticated-div");
contentDiv.style.display="block";
}
else
{
var loginButtonDiv=document.getElementById("fb-login-button-div");
loginButtonDiv.style.display="block";
var contentDiv=document.getElementById("user-is-authenticated-div");
contentDiv.style.display="none";
}
}
function postToWallUsingFBUi()
{
var data=
{
method: 'feed',
message: '',
display: 'iframe',
caption: '<? echo $this->album->artist_name; ?> Click to Listen',
name: '<? echo $this->album->name; ?>',
picture: 'http://fnoob.com/images/albums/<? echo $this->album->image; ?>',
source: link_to_file',
link: '<? echo $album_link ?>', // Go here if user click the picture
description: 'By artist <? echo $this->album->artist_name; ?> on <? echo $this->album->format_name; ?> and powered by FNOOB.com ',
actions: [{ name: 'fnoob.com', link: '<? echo $album_link ?>' }],
}
FB.ui(data, onPostToWallCompleted);
}
function onPostToWallCompleted(response)
{
if (response)
{
//console.log(response);
if (response.error)
{
alert(response.error.message);
}
else
{
if (response.id)
alert('Posted.... carry on!');
else if (response.post_id)
alert('Posted.... carry on!');
else
alert('Crap... something went wrong');
}
}
// user cancelled
}
</script>
So what i want is basically every time this page is shared on facebook either ( page, feed, etc) that the image and video load and if clicked it plays and is linked to the page on the website. Any help really appreciated on this - been trying to figure it out for a day or so.
Add this tags
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="360" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="DIRECT_VIDEO_FILE_URL" />
<meta property="og:video:secure_url" content="DIRECT_VIDEO_FILE_URL_SSL" />
<meta property="og:image" content="Image_you_want_to_use_as_thumbnail" />
<meta property="og:image:secure_url" content="Image_you_want_to_use_as_thumbnail_SSL" />
Video file will work in format mp4 and swf.
Important part here to get this to work is that you deliver file from an SSL / HTTPS source
The image will be the thumbnail behind the play button
I am trying to get the Facebook Feed dialog to work at a test site but I keep getting the same error message: "An error occurred with [app_name]. Please try again later.".
When I look at the documentation I realize that the example in the documentation doesn't work either.
Have tried a number of different solutions.
Here is my test code:
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '400714233333865', // App ID from the App Dashboard
channelUrl : '//demo.xxxxxxx.se/nptest/channel.html', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
function postToFeed(){
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.');
}
}
);
};
// Load the SDK's source Asynchronously
(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>
<div id='fb-root'></div>
<a onClick="postToFeed('Text');">
Share in the feeeeeeeeeeeeed
</a>
</body>
</html>
Has anyone come across a similar issue or a solution for this?
Make sure that you are testing through same URL as specified in Application settings. In your feed dialog give your own links and images i.e. links of your own domain specified in Application setting and not one given in Facebook example.