I have used the following code for open the Facebook Pay Dialog box for My application app on Facebook but getting error :
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<p> <a onclick="placeOrder(); return false;">Buy</a></p>
<script>
FB.init({appId: 367311903326028, status: true, cookie: true});
function placeOrder() {
// If using mobile, this is where you place the
// iOS native app check for credits (see below)
// Assign an internal ID that points to a database record
var order_info = 'abc123';
// calling the API ...
var obj = {
method: 'pay',
order_info: order_info,
action: 'buy_item',
dev_purchase_params: {'oscif': true}
};
FB.ui(obj, callback);
}
var callback = function(data) {
if (data['order_id']) {
return true;
} else {
//handle errors here
return false;
}
};
function writeback(str) {
document.getElementById('output').innerHTML=str;
}
</script>
<br>
Error :
There Was a Problem Processing Your Payment
Sorry, but we're having trouble processing your payment.
You have not been charged for this transaction. Please try again.
Please can anyone suggest me what going wrong here.
Thanks
Without more information it's really hard to know what the issue is here. Specifically, what response are you supplying to the payments_status_update request? Can you show us the code that handles those requests, or an example of your response?
I've personally seen that error message in cases where our callback was responding incorrectly to the payments_status_update request, but it could be something else.
Seems to me that you are using the old currency payments, which is a bad idea as they are going to be deprecated in two months.
Check that in your FB App settings you are NOT using the new Local currency payments, as if you have it enabled (which is the default setting now), then the only way that you can make a purchase is with the new way. Using the old way will fail.
Deactivating the new payment method will allow you to use BOTH the new and the old method.
Related
This question already has an answer here:
Facebook ignoring OG image on first share
(1 answer)
Closed 6 years ago.
First of all hi and thanks in advance to anyone who can help with this because I've been going crazy over this for weeks now.
So I've got a website which lists gif taken from my mobile application (which are then stored on AWS and my visitors ( I haven't found a use for me to have users) can share these gifs on facebook using the facebook sdk.
The problem appears when I try sharing an image for the first time
This is what the share dialog shows the first time I click on my sharing button:
http://i.stack.imgur.com/lNVNF.png
and then I close and reclick the same button and now it works:
http://i.stack.imgur.com/YsDUm.png
Now I've been trying to find a way to make this work on the first sharing attempt but to no avail.
I am using meteor in combination with biasport:facebook-sdk and Amazon S3 for the hosting of my files.
Edit here is the code used:
FRONT SIDE
HTML
<div class="facebook share">
<img src="/gallery/fb.png">
</div>
Javascript
Template.*templateName*.events({
'click .facebook': function(e){
e.preventDefault();
e.stopPropagation();
// this is in a modal so I store the data I need
// (events have photos which in turn contain a url to the gif
var url = Session.get('event').photos[Session.get("id")].url;
FB.ui({
method: 'share',
href: url
});
}
SERVER SIDE
JAVASCRIPT
if(Meteor.isClient) {
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
xfbml : true,
version : 'v2.5'
});
};
}
Edit: I found a manual solution using exec future and curl
so first I added a call to a meteor method on the share that updates the facebook crawler
JAVASCRIPT
Template.*templateName*.events({
'click .facebook': function(e){
e.preventDefault();
e.stopPropagation();
// this is in a modal so I store the data I need
// (events have photos which in turn contain a url to the gif
var url = Session.get('event').photos[Session.get("id")].url;
Meteor.call('updateCrawler', url, function(){
FB.ui({
method: 'share',
href: url
});
});
}
Then I defined my meteor method as such
JAVASCRIPT
Meteor.methods({
updateCrawler: function(url){
var future = new Future();
cmd = 'curl -X POST -F "id=' + url + '" -F "scrape=true" -F "access_token={my_access_token}" "https://graph.facebook.com"';
exec(cmd, function(error){
if (error){
console.log(error);
}
future.return();
});
future.wait();
}
});
it's ugly but since I'd have to wait for the crawler to update and it works I'll leave this here for future use for someone maybe
Edit2:
I did not use og tags at all since I was simply sharing a url to aws directly and not a url to my website
I worked around this problem by calling the Facebook API direct from the server to make it scrape the og data by requesting info on the page. First time round it doesn't have the image cached but second time it does so this workaround does the initial call before sharing.
Use an access token for your facebook app and call the below in an ajax call and await the response before opening share dialog. Replace Google address with your own uri encoded address https://graph.facebook.com/v2.5/?id=http%3A%2F%2Fwww.google.co.uk&access_token=xxxxx
EDIT:
As per comments, here is my server side method for calling this which I use when posts etc are inserted to make the initial call and prompt a scrape from fb:
var getTheOGInfo = function (link)
{
if (!link || link.slice(0, 4).toLowerCase() != "http"){
throw new Meteor.Error("og-info-bad-url", "Function requires an unencoded fully qualified url");
return false;
}
var url = "https://graph.facebook.com/v2.5/{{{{id}}}}?access_token={{{{token}}}}&fields=og_object{id,description,title,type,updated_time,url,image},id,share";
var token = Meteor.settings.private.fb.token;
if (!token){
throw new Meteor.Error("og-info-no-token", "Function requires a facebook token in Meteor.settings.private.fb.token");
return false;
}
var link_id = encodeURIComponent(link);
url = url.replace('{{{{token}}}}', token).replace('{{{{id}}}}', link_id);
var result = HTTP.get(url, {timeout:1000});
return result;
}
Or for your purposes you may not want anything that might be blocking so you could change the last two lines to be aynchronous:
var result = HTTP.get(url, {timeout:1000});
return result;
//Replace with non blocking
HTTP.get(url, {timeout:1000}, function(err, result){console.log('something asynchronous', err, result);});
return true;
Documentation for Parse.FacebookUtils.init() states:
The status flag will be coerced to 'false' because it interferes with Parse Facebook integration. Call FB.getLoginStatus() explicitly if this behavior is required by your application.
Unfortunately, when I try to call FB.getLoginStatus(), I get TypeError: Cannot read property 'getLoginStatus' of undefined. Is there either a callback that I can use to know when FB is loaded, or some other way to check the login status of a user on page load?
It would help to see some code, it sounds like the SDK hasn't loaded when you call getLoginStatus().
Anyway this may help, I took Facebook's basic Login flow and added Parse around it. It checks when the DOM is loaded so you could use some of this logic also.
Simple Facebook Login test with Parse - view source
Hope this helps.
I ended up using promises to resolve FB after it's loaded.
var fbDeferred = $q.defer();
$window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'xxxxxx',
xfbml : true,
version : 'v2.2'
});
fbDeferred.resolve(FB);
};
var getFB = function(){
return fbDeferred.promise;
}
var getFBLoginStatus = function(){
return getFB().then(function(FB){
//**FB is now available**
FB.getLoginStatus(function(response) {
if (response.status !== 'connected'){
...
}else{
...
}
});
});
});
Facebook's Javascript SDK has a method called getLoginStatus that stalls (and never fires the callback passed into it) while an image request on the page also stalls (i.e. the browser doesn't receive a 200 or 404 for a very long time.)
If you wait an extremely long time and the browser (?) finally closes out the attempt to fetch the image, the SDK continues on its merry way.
What might be going on, and is there a way to prevent it? It's awfully inconvenient when a user can't sign in or sign up just because of an image request.
Blocking (HTML):
<img src="..." />
Non-Blocking (with CSS):
#someDiv {
background-image: url(...) no-repeat;
width: xxx;
height: xxx;
}
Non-Blocking (with JS):
var img = new Image();
img.onload = function () {
document.getElementById('someDiv').appendChild(img);
};
img.src = "...";
Try with solution number 2 or 3 - there are also many preloader plugins for JavaScripts making it easier for you to load a lot of images asynchronously, for example: http://thinkpixellab.com/pxloader/
Another solution would be to load smaller images first and load the hires ones asynchronously.
When you use the initialization code from the Facebook SDK website, by default it wants to wait for the page to be fully loaded be for running certain events, like the fbAsyncInit function.
I'm not sure of an "officially supported" way to bypass this, but you could load the Javascript source yourself and call the routines outright (i.e. not in the async wrapper).
This is a barebones example that stalled like you mentioned using the Facebook SDK initialization procedure but works fine with this workaround.
<html>
<head>
<title>This is a test</title>
<script src="http://connect.facebook.net/fr_FR/sdk.js"></script>
<script language="javascript">
<!--
var loggedIn = false;
var authenticated = false;
FB.init({
appId : '{your app ID here}',
xfbml : true,
version : 'v2.0'
});
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;
loggedIn = true;
authenticated = true;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
loggedIn = true;
} else {
// the user isn't logged in to Facebook.
}
});
function testLogin()
{
alert("Logged in: " + loggedIn + "\nAuthenticated: " + authenticated);
}
// -->
</script>
</head>
<body>
Testing!
<button onclick="testLogin()">Test login?</button>
<img src="http://deelay.me/5000/ http://example.com/image.gif">
</body>
</html>
I'm not sure how this will affect integration with your site, but I can't imagine it would be a problem. If anything I suppose it's worth a shot!
Do you have any adblockers setup? I had a similar problem with a different API and Adblock Pro was causing some issues.
I'm totally confused about Facebook's dialog feed, sharer and like buttons (I'm a noob to Facebook and its jargon)
On my website, I would like the following
to have a button at the top of the page where people can share my site to their wall
to have a button on the the page where users can share their main homepage on my site to their wall
to have a button where users can share individual items of theirs (events) to their wall
I've read the sharer button is being phased out in preference to the Like button but I see a problem with the Like button. I think something can only be liked once. A user's event might want to be shared several times (to remind their Fb users of the event)
I've seen the BBC use the dialog feed button to post items to a wall and that looks okay but I couldn't get the popup to work.
my requirements are to have different links for each of the three scenarios I've mentioned, with a different description for each scenario but sharing my site's logo.
I've read so much that I'm now totally confused plus all the APIs that Fb has. It's just crazy (or that's how it seems to me)
If someone could help clear the fog with sound recommendations and some sample code for each button, I would be very grateful.
Thank you.
.
For what your talking about you would want to use the feed dialog. It's flexible enough that you just need to setup your links and pass in some variables. I don't see the feed dialog being phased out as you mentioned they serve different purposes. I think they push the like as it's easier to use and not as likely to be abused.
You'll need to register an application and make sure to initialize the Facebook javascript SDK before you call the below function. If you're having issues with your popup it's probably due to the fact your FB init process is having issues. I've added a second function I use to init Facebook. Both functions use jQuery so you might have to modify if you don't use it.
You can create a pretty generic function like this:
$.shareMe = function(myName, myLink, myPicture, myCaption ) {
FB.ui(
{
method: 'feed',
name: myName,
link: myLink,
picture: myPicture,
caption: myCaption
},
function(response) {
if (response && response.post_id) {
alert('Thanks for Sharing.');
} else {
alert('Post was not published.');
}
}
);
}
and for Facebook initialization:
$.initFacebook = function(options){
$('#fb-root').remove();
$('body').append('<div id="fb-root"></div>');
var settings = {
'appId' : null,
'callback' : null,
'channelUrl' : null,
'status' : true,
'cookie' : true,
'xfbml' : true
};
if ( options ) {
$.extend( settings, options );
}
if( typeof( xc_app_id ) == 'undefined' ) { window.xc_app_id = settings.appId; }
window.fbAsyncInit = function() {
if(settings.channelUrl==null) {
FB.init({appId: settings.appId, status: settings.status, cookie: settings.cookie, xfbml: settings.xfbml, oauth: true, authResponse: true });
} else {
settings.channelUrl=location.protocol+'//'+settings.channelUrl;
FB.init({appId: settings.appId, status: settings.status, cookie: settings.cookie, xfbml: settings.xfbml, oauth: true, authResponse: true, channelUrl: settings.channelUrl });
}
if(typeof settings.callback == 'function'){ settings.callback.call(this); }
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
}
and to call it you just use $.initFacebook({appId,'yourAppId'}); There are other options there you can lookup in the docs if you need them.
I have the script below. I am trying to POST the data and insert it into a database, the jQuery executes just fine, but does not post anything, the action is working properly because when i post the data without the script, the data posts fine and is inserted into the database fine without any errors, so it seems as if the jquery function is posting nothing. can someone please help?
$('#form').live('submit',function(){
$('#form').fadeOut('slow');
$('#div').append("<h2>submittes</h2>");
return false;
});
<form id="form" method="post" action="execute.php" name="form">
<textarea id="text" name="update"></textarea>
<br>
<input type="submit" value="update" id="update-submit">
</form>
EDIT:
$('#form').live('submit',function(){
var updateTextArea = $('#textarea').val();
$.ajax({
type: "POST",
url: "execute.php",
data: updateTextArea,
success: function() {
$('#form').fadeOut('slow');
$('#div').append("<h2>updated</h2>");
}
});
return false;
});
this is what i have for the ajax, but i am still not having any success.
You don't have any AJAX calls in your javascript. You're just fading out the form, appending an h2, and preventing the default action from occurring (which would be to submit the form normally).
Here's a basic example of how to create a POST ajax request:
$('#form').submit(function(){
$.post($(this).attr('action'), { update: $(this).find('#text).val() }, function(){
// success
});
});
Checkout the jQuery API/Docs for more info on this. There are also dozens of tutorials lurking around the net on how to do this.
Well, by returning false from the event handler function, you trigger two things:
prevent the default action (.preventDefault())
stop the event propagation (.stopPropagation())
This prevents that the submit ever happens.
You need to transfer the data on your own within the submit event handler. For instance, create an ajax request which serializes the form data and sends it to your server.
Could look like:
$('#form').live('submit',function(){
$('#form').fadeOut('slow');
$('#div').append("<h2>submittes</h2>");
$.post('execute.php', $(this).serialize(), function(data) {
// do something after success
});
return false;
});