FB.ui apprequest not working in page tab - facebook

I have a page tab app with an invite button (aka FB.ui -> apprequests), which when it's run from example.com/pagetab works fine (ie, it pops up a FB.ui friend selector windows etc.) But when I point my app's pagetab to there and load it as an iframe from within Facebook, nothing happens. At first I thought it was a problem with the button not being linked because of jquery not knowing which document was ready but I switched to using onclick and even typing in the command from the Chrome console (in the iframe's scope, of course) but nothing happens... Is this a bug or am I missing something?
Minimal code:
window.fbAsyncInit = function() {
FB.init({
appId : '123456789', // App ID
channelUrl : '//fbjscache.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
}); };
(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));
function sendInvite() {
console.log("Inviting...");
FB.ui({method: 'apprequests',
title: 'Check out this great app!',
message: 'Join the fun!',
}, inviteCallback);
}
Then on the page
<div class="facebookButton">Invite</div>
This code works exactly as expected (pops up the cute friend selector dialog) when the page is loaded directly and does nothing when loaded from an iframe. Is this a bug or is there some hidden setting/JS quirk that I'm not catching on to?

After discovering a related question, ( Send dialog doesn't work in page tab ) I realized that the problem is that you need to manually include the parameter display : 'popup' in the options, so the working code requires:
function sendInvite() {
FB.ui({method: 'apprequests',
title: 'Check out this great app!',
message: 'Join the fun!',
display: 'popup'
}, inviteCallback);
}
This behavior is expressly against what the docs say is supposed to happen:
Platform Dialogs are all built to seamlessly run in a variety of display contexts on both the web and mobile web. If you're invoking a Dialog using the JS, iOS or Android SDKs, the display mode will be automatically chosen for you based on the platform and the device being used by the user.
Unless the automatic choice is "no display, with no warning or error message" for the arcane combination of "page tab" and "desktop browser."
For the record, proper canvas apps do not have this limitation. I used line-for-line the same code in a full app and everything worked fine.

Related

How do I create a custom Facebook share dialog box passing parameters?

I've seen a few posts here and around the interwebs explaining how to create a custom Facebook share dialog box for my website.
But I have found a few differences from the average situation to mine:
1- I want a custom area in my page to open and close when people click on a button (the share button)
2- I want share the content in a lightbox, not the page's content. For example, we have a list of products, each product will open in a lightbox. I want to share information about this product that is now open in a lightbox
I saw someone talking about the Javascript SDK, but it the installation guide it tells me to set the APP_ID, but don't have any App create for my website. Do I have to create one to use this SDK?
I also found this pattern
http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg
If I copy and paste this to the address bar it works. but the user is redirected to a new page. that is not nice.
and I tried this with the pattern said above, but couldnt make it work
<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
Share on Facebook
</a>
It doesn't accept the parameters I am trying to pass.
Do any of you know how to solve this problem? Will it be by changing the 'content' of metatags? What are your solutions?
#EDIT
Just answered with the solution I used
#EDIT 2
Updated with v2.2
This is an old question, but here is what works for me:
window.open(
'http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg',
'facebook-share-dialog',
'width=626,height=436'
);
basically all I had to do was remove the /sharer/ from the facebook url. I am guessing it is a typo in the documentation.
This is what I did to solve the problem in my website:
First I added the tools Facebook provides me:
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR APP ID GOES HERE', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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 = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then I created a function shareOnFacebook that opens the sharer and the button that will call this function
var globalFacebookShareObject = {} //will be set when I click on a product, on a picture, on a comment or post, or whatever I want to share on Facebook or when I load the page
function shareOnFacebook(){
FB.ui({
method: 'feed',
name: globalFacebookShareObject.name,
link: globalFacebookShareObject.link,
caption: 'R$ '+globalFacebookShareObject.caption,
picture: globalFacebookShareObject.picture,
description: globalFacebookShareObject.description
}, function(response) {
if(response && response.post_id){}
else{}
});
}
<button onclick='shareOnFacebook()'>Share it!</button>
#edit at 10/01/2015
Still working for v2.2
Refere to Feed method to understand how to create the share dialog (I am using the feed method that seems to be more flexible)
And to Quickstart
To understand how to import the Javascript SDK to your page
December 2017: Custom object sharing is being deprecated. Your best bet from now on is to create another page for that object and have the respective meta tags facebook looks for in there. More info here: developers.facebook.com/docs/sharing/reference/share-dialog

Facebook Share Feed Dialog only working for Admins

After creating a Facebook App, leaving it in Sandbox and attempting to setup a Share button using the Feed Dialog, it seems only FB accounts I've added as Admins are able to use the Share button - all other non-Admins are able to see the Feed Dialog popup, but are then seeing "An error occurred, please try again.".
I thought it was a browser specific issue but seems to be dependant on your FB accounts relationship with the App. A person who is a non-Admin has been testing the App and is unable to Share at all.
I am using Wordpress as a CMS backend for this App. As far as I can tell the App ID and App URL are all correct, the only difference is that being on my dev environment it will be moved to a clients production FB page once this is all working.
I find it very bizarre that it works excellent provided you are an Admin of the page. Could it be possible this is simply a Sandbox thing?
I also checked that trying to use the Share button when logged in as a Page as opposed to yourself was the issue, and it is not (if anyone was wondering).
I believe I am using the SDK/API and Feed Dialog correctly, but my code for reference:
header.php
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
// Called when FB SDK has been loaded
window.fbAsyncInit = function () {
// Auto resize FB Canvas
FB.Canvas.setSize({height:600});
setTimeout("FB.Canvas.setAutoGrow()",500);
};
// Load the FB 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>
footer.php
<script type="text/javascript">
FB.init({
appId: '515010801895800',
status: true,
cookie: true,
xfbml: true
});
function postToFeed() {
var obj = {
method: 'feed',
display: 'popup',
picture: '<?php echo get_template_directory_uri(); ?>/images/app/app-icon-75.png',
name: 'Suncorp Brighter Futures Heroes',
caption: '',
link: 'https://www.facebook.com/aaronlepikdev/app_515010801895800',
description: 'Suncorp Brighter Futures Heroes is a place where our people come together to share their stories, raise money, volunteer and apply for grants for causes close to their hearts.',
actions: {name: 'Suncorp Brighter Futures Heroes', link: 'https://www.facebook.com/aaronlepikdev/app_515010801895800'}
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
Any help at all is much appreciated.
It seems I indeed may have answered my own question - I have removed Sandbox and it seems to be working. I did stumble across this though: Sandbox Mode - Please note that when your app is in Sandbox Mode, you cannot call any API calls on behalf of users who cannot see your app.

Fan Gate and Liking an App

I'm trying to figure out how to do something, and I've tried searching Stack Overflow, but I'm honestly not 100% sure what I'm looking for, so I'm not coming up with anything great.
Here is what I need to do:
We have an app, and you're supposed to like the page to see the app. Great that works.
The client wants us to put a facebook share button on the site, so that when you're finished using the app, you can click the "Share" button and post something to your wall saying, "I just used XXX and you should too!" or whatever. The problem is that the Share button is deprecated. Everything on the facebook developer site says I need to use the like button, but, since you've already LIKED the page to get in, you're going to see that you've already liked the page and not be allowed to click it again to share content on your news feed.
It seems like I'm missing something here. Can you have a like button for a page AND a specific app inside that fan page? It doesn't seem like I can do that. Is what I'm asking even possible?
Yes, you can use the Javascript SDK to post to the wall... this uses jQuery to detect a click on an id which is the share button so make sure you add this before any facebook javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You will also need to load the FB Javascript SDK if you haven't already:
<script>
window.fbAsyncInit = function () {
FB.init({
appId: 'INSERT APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
oauth: true // enable OAuth 2.0
});
};
// Load the SDK 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>
Then add the following code:
$("#shareclick").click(function () {
FB.ui({
method: 'feed',
name: 'The Post Title',
caption: 'skruffymedia testing caption post',
description: (
'Testing the description of the skruffymedia app post!'),
link: 'http://www.skruffymedia.com',
picture: 'http://www.skruffymedia.com/facebook.jpg'
}, function (response) {
if (response && response.post_id) {
alert('posted');
} else {
alert('not shared');
}
});
}); //End Share Click
I'll be including this answer on the next step of my blog
http://www.skruffymedia.com/blog/creating-a-facebook-like-gate-competition/
It is now against Facebook's policies to gate an app or content within an app based on if someone has liked your page.
See the announcement here: https://developers.facebook.com/blog/post/2014/08/07/Graph-API-v2.1/

Facebook login connect

I want facebook login in my website
For that I followed these steps:
1)Created a demo site at developers (i uploaded the image as well)
2)Copied the app id at the place where required
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<MY APP ID>',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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>
<div class="fb-login-button">Login</div>
3)I got the fb login button as shown in image:
on clicking the button a new window is popped up asking fb username and password and after coming back it shows this error
Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/dialog/permissions.request?_path=permissions.request&app_id=158742990907100&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D5%23cb%3Dfbf1cdd54%26origin%3Dhttp%253A%252F%252Flocalhost%253A8080%252Ffa53db99%26domain%3Dlocalhost%26relation%3Dopener%26frame%3Df27abde948&sdk=joey&display=popup&response_type=token%2Csigned_request&domain=localhost&fbconnect=1&from_login=1&client_id=158742990907100 from frame with URL http://localhost:8080/Befundo/. Domains, protocols and ports must match.
The properties I set for my app is :
I am not sure about APP NAMESPACE,APP DOMAIN,SITE URL
I am getting one more problem, when I click Login button twice it logs this message in the console of Browser::
FB.login() called when user is already connected.
and do nothing.
Please shed some light where I am doing wrong?
Thanks in advance.
Your login button is working as expected, and it's connecting user (which is confirmed by message that came after second click on the login button).
Next message is not an error in your code (it's because of cross-domain policy applied to JS-SDK trying to communicate with Facebook):
Unsafe JavaScript attempt to access frame with URL ... from frame with URL ... Domains, protocols and ports must match.
You can (probably) suppress it by passing self-hosted channelUrl to FB.init. (see FB.init documentation)
You also seems to do nothing after the user is connected. Read documentation for FB.login to figure out what you should do after user is logged in...

Facebook javascript-sdk Permission Dialog Error

Hi, i am puzzled about an Facebook-Error that has been recently popping up in my (newer) applications: The apps are working fine, until i disable sandbox mode and try to test the app as a normal user.
When clicking the login-button as normal user i get:
"An error occured. Please try again later" or sometimes : "API Error Description: An unknown error occurred Error Message: kError 1349045: An invalid Platform session was found.: An invalid Platform session was found."
Sometimes the normal Permission-Dialog shows up, but after asking the extended permissions i also get the error...
Here is my Code:
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXX', // App ID
channelUrl : '//' + window.location.hostname + '/fbchannel.html', // Channel File
status : true, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
$(function(){
$('.login').click(function(e) {
e.preventDefault();
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
$('#output').text('Good to see you, ' + response.name + '.');
});
} else {
$('#output').text('User cancelled login or did not fully authorize.');
}
}, {scope: 'email, user_photos, publish_stream, user_likes'});
// Additional initialization code here
});
});
// Load the SDK 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));
I already tried enabling/disabling the enhanced auth dialog and the domain, facebook-app url and website is correctly set. For an admin of the app everything is working fine...
Does anybody have an idea what i have done wrong or have the same problems?
When you set up a facebook app you set up the urls from which it can be used.
My guess is that you are trying to load this page of yours from a domain different than the one in the facebook app settings.
In the facebook app settings, you should have something set in the Website - Site Url, you then need to load the page with the js sdk from the same domain.
If you want, you can set up other domains in the App Domain in the settings page, but all of the domains there must be derived from your Site URL.
I created a very simple page that only loads the js sdk and then tries to call the FB.login, I then tested it on the same domain as it is set for that app in the settings page, everything worked great.
I then copied that file to my localhost and gave it a try there, and indeed I received the same error you described.