I'm trying to integrate with PayPal and can't get the sdk/js to load.
I literally pared this back to their example code, and it still gives an HTTP error 400 loading the SDK js.
Following steps as given here...
https://developer.paypal.com/docs/subscriptions/integrate/#4-create-a-subscription
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<script
src="https://www.paypal.com/sdk/js?client-id=AeRCvNJjX_wuV8I8KnIxllYZhizA7I3JZBzQJk4O2q8DoC1ORE9GZM1S1wJd2ch7XZWfsG3GHAYIUWhc&vault=true">
</script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createSubscription: function(data, actions) {
return actions.subscription.create({
'plan_id': 'P-3S4679857D7841235LUOV5VY'
});
},
onApprove: function(data, actions) {
alert('You have successfully created subscription ' + data.subscriptionID);
}
}).render('#paypal-button-container');
</script>
</body>
</html>
The SDK js doesn't load. Looking at the response I can see an HTTP error 400 on the sdk/js request, and a paypal-debug-id value.
I've checked and rechecked that I'm passing the correct client-id.
FWIW: I noticed that in some of their other button examples you can use "sb" in place of your client id. If I use just client-id=sb, it shows a payment button, but if I include "&value=true" or use my actual client-id it goes back to error 404.
After beating my head against the wall on this for hours, I finally stumbled across the answer in the PayPal forums. Turns out to be some sort of issue with cookies. Clearing all the cookies related to PayPal seems to have fixed the problem.
Leaving this question here in case it helps someone else avoid the headaches it gave me!
Related
I have this TWDC(tableau web data connector) app hosted on our company's private cloud.
Every app that are deployed there are accessed after the user logs in via a Single Sign On login page, then redirected to the app.
When I try to use my web data connector on my Tableau Desktop it gets stuck on an infinite loop, after i push the button which does tableau.submit().
I've set the debugger and found out, that when I push the button, the page that is loaded is not the index.html of my WDC but the redirect page from the SSO login.
I have no idea why is this happening, doesn't make much sense, because it loaded the index.html in the first place, but after i push this button it gets back to somewhere in the middle of SSO login and redirect page.
Just a note: It works fine on the simulator.
Any thougths on this?
Here's my code:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TableauAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/tableauwdc-2.3.latest.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<button id="submitButton">Send</button>
<br />
<br />
<textarea id="log" style="border: 1px solid #000; width: 100%; height: 700px;"></textarea>
<br />
<div id="placeholder"></div>
</body>
</html>
JavaScript
$(document).ready(function() {
try {
$("#submitButton").click(function() { tableau.submit() });
var myConnector = tableau.makeConnector();
// these are function which are not important for this question;
myConnector.getSchema = fnGetSchema;
myConnector.getData = fnGetData;
tableau.registerConnector(myConnector);
} catch (e) {
logger("ERROR: " + JSON.stringify(e));
}
});
This isn't a problem with your code. With the WDC there is an interactive phase where the user is shown a screen and can interact (this is your first SSO sign-in) but then there is a non-interactive (Get Data) phase where Tableau will try to retrieve the data and never shows the SSO login to the user. See docs. Given this page is loaded without user interaction it can't/shouldn't have SSO security on it.
I am getting this error in Safari and other browsers:
The "fb-root" div has not been created, auto-creating
all.js:52
FB.getLoginStatus() called before calling FB.init().
all.js:52
In my header I have this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml"
xml:lang="en" lang="en">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<meta property=""fb:admins"" content=""508331528"" />
<meta property=""fb:page_id"" content=""118806721611355"" />
<meta property=""fb:app_id"" content=""426360900751901"" />
(I realize I should not have all three property tags, but I have tried various scenarios)
In the body of the page I have these two simple facebook tags:
<fb:like data-href="http://www.PrintMyWatercolor.com" layout="button_count" style="width: 90px;" data-show-faces="true" data-send="true" action="recommend"></fb:like>
<fb:comments href="http://www.PrintMyWatercolor.com" numposts="25" width="590"></fb:comments>
As far as I understand, this should be ok. I don't have any explicit javascript code for facebook on the page. How can I resolve this error?
Thanks,
Kyle
You don't appear (from that sample ) to have the <div id="fb-root"></div> which the Javascript SDK attaches itself to
Your method of loading the Javascript SDK isn't asynchronous so the SDK may be loading before the page has finished, use the method from the documentation instead, which works by attaching the SDK once the rest of the document has loaded
I'm trying to create a Washington Post-esque social reader for my self-hosted Wordpress site, so when someone reads a post of mine it's published on their Facebook newsfeed.
I've followed the Facebook Open Graph tutorial, but I continue to face a pop-up box saying "Error Occured" when I click "Read" on a post. I have used the debug tool and it reported that everything is okay.
Are there additional steps required to make an Open Graph app work on a self-hosted Wordpress site?
Below is the code I've used so far. I've replaced the actual Image URLs with defaults as I can't post images on Stack Overflow yet.
In the Meta Tag area I typed the following:
<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#
zeitlife: http://ogp.me/ns/fb/zeitlife#
<meta property="fb:app_id" content="308222752522151" />
<meta property="og:type" content="zeitlife:article" />
<meta property="og:url" content="http://www.zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould/>
<meta property="og:title" content="Cabana: Brazilian that Breaks the Mould"/>
<meta property="og:description" content="Restaurant Review" />
<meta property="og:image" content="[image URL]" /></a>[/caption]" />
</head>
</html>
And in the body of the post I typed the following:
<script type="text/javascript">
function postRead()
{
FB.api('/me/zeitlife:Read' +
'?article=http://zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould','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 src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'308222752522151', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="18" face="verdana" color="blue">
Cabana
</font>
</h3>
<p>
<img title="Cabana"
src="Image url here" </p>
<form> <input type="button" value="Read" onclick="postRead()" />
</form>
</html>
I would be eternally grateful if someone could help me out!
I look forward to your response.
Kind Regards,
You're making things a fair amount more difficult for yourself by creating a custom read action.
Facebook offers three built-in action types: reads, listens, and watches. (See https://developers.facebook.com/docs/opengraph/actions/builtin/)
If you use the built-in system:
It's much easier to avoid errors
Your articles appear in the "Trending articles" section of people's news feeds
Facebook does most of the work setting up actions for you
It's because you have a space in:
http://www.zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould /
It needs to be:
http://www.zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould/
I tried using this at:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.zeitlife.co.uk%2Fcabana-brazilian-food-that-breaks-the-mould%2F
And it worked.
I'm attempting to create a Facebook Open Graph App similar to the Washington Post Social Reader, which will announce in a person's news feed when they read an article on my website, www.zeitlife.co.uk.
I have followed the Open Graph tutorial closely, identifying an action and an object, and creating several sample ones to test aggregation. I've created a button saying "Add to Timeline" , but I've been unable to publish an action (in this case "read") and receive an ID for the action.
One issue I encountered was the debugger tool telling me my Open Graph meta tags lay outside my tags, which aren't visible in a self-hosted wordpress site. However, I installed Meta SEO Pack plugin which allowed me to place the Open Graph meta tags in a post's meta description, and the debugger tool accepted this.
This raised the complication of which part of the full Open Graph code (action and object) to put in the meta description; I've tried placing the "head" part in the Meta description and the "body part in the main post body, which resulted in a non-functional button.
Perhaps you could take a look at the code I've used and see if there are any problems?
Code in Meta Description:
<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# zeitlife: http://ogp.me/ns/fb/zeitlife#">
<meta property="fb:app_id" content="308222752522151" />
<meta property="og:type" content="zeitlife:article" />
<meta property="og:url" content="http://www.zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould" />
<meta property="og:title" content="Cabana: Brazilian that Breaks the Mould" />
<meta property="og:description" content="Restaurant Review" />
<meta property="og:image" content="http://www.zeitlife.co.uk/wp-content/uploads/2011/12/IMG_2435.jpg" />
</head>
</html>
Code in main body of post:
<html>
<script type="text/javascript"> function read()
{FB.api('/me/zeitlife:article' + '?article=zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould &access_token=AAAEYU7OsZC6cBAG0oRKggspR5xjr17Nlpntj2ylxOuN6o3Tztry2EKPWq3JO97yG9De1tlN1SEpqKarovmZAlNKLsEM3BdR4AZAIV6ARDEkQsVSMK3C','post',
function(response) {
var msg = 'Error occured';
if (!response || response.error) {
if (response.error) {
msg += "\n\nType: "+response.error.type+"\n\nMessage: "+response.error.message;
}
alert(msg);
}
else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'308222752522151', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<form>
<input type="button" value="Post To Your Timeline " onclick="read()" />
</form>
</body>
</html>
Thank you very much for you help in advance, it's very much appreciated!
First off, you could have created a WordPress plugin to modify the head HTML code, e.g. hook into the wp_head function using hooks.
Secondly, it looks like you have a created a custom read action. Facebook will reject this when you try to get it approved. You should use the built in read action to make the approval process easier.
Finally, the JS function to make the read call is incorrect. The code is ok, but the data you pass into the call is wrong. You don't need to use the access token in the function and you must use the full URL to the article (i.e. include http(s)).
Change your code to something like this:
setTimeout( function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// publish action to facebook
FB.api( '/me/zeitlife:read', 'post', { article : 'http://zeitlife.co.uk/cabana-brazilian-food-that-breaks-the-mould/' } );
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
}, 2000 );
Notice that the action is 'zeitlife:read' and not 'zeitlife:article' as your done in your code. Article is a parameter in the call. You should test your API calls using the API Explorer tool: https://developers.facebook.com/tools/explorer/
I'm trying to get the registration flow for Facebook login working. Here's a bare-bones example:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId:'xxxxxxxxxxx',
cookie:true,
status:true,
xfbml:true,
channelUrl : 'http://<myWebSite>/channel.html',
oauth:true
});
</script>
<fb:login-button registration-url="http://<myWebSite>/register"/>
</body>
</html>
(The only things I've replaced above are the website and the appID)
If I try it like this, the login button shows up, but clicking it causes FireBug to report 'Unknown status: undefined' in the browser log. If I remove the 'oauth=true' line though, it works. I'm trying to adhere to the new oauth 2.0 standard, so I'd like to leave it in. Has anyone else run into this? Seems like if this was a bug, it would have been caught pretty early on.
the 'registration-url' parameter is no longer supported by , take a look in the documentation of it. http://developers.facebook.com/docs/reference/plugins/login/
Just check if the user is logged in via the JS-SDK