I've got a problem with creating an App that could be then added to facebook pages as a tab. The problem is probably because I'm new to this facebook stuff and I'm doing something wrong here.
Currently I'm trying to use both URL and JS api call (as I'm using language other than english - the errors I put below could differ a bit from what they are in english). Of course APP_ID below is replaced with the proper app id.
URL:
https://www.facebook.com/dialog/pagetab?app_id=APP_ID&redirect_uri=facebook.com
which results in 'There was an error. Try again later.'
JS:
FB.ui({
method: 'pagetab',
app_id: APP_ID
}, function(response){});
which results in: 'This application could not be activated on your profile.'
The profile i"m trying to add this of course has some facebook Pages on it. The app I'm trying to add was created accordingly to https://developers.facebook.com/docs/appsonfacebook/pagetabs/ . I've created a simple Page Tab app, entered a test name and URL, and that's it. When I;m in the fb dev dashboard there's a green icon next to the app that says 'live and available to all users'.
Does anyone have idea what could be wrong here, and why can't I add this app to my FB page?
There cause of the error is likely to be two reasons:
The redirect_uri is incorrect. It must be part of your app domain (as setup in the App Settings). If you app is hosted at http://myapp.com, then the redirect_url needs to be on the same domain, e.g. http:/myapp.com/installed.php.
You have not setup the Application correctly on the App Settings page. Have you added the correct "Page Tab" settings? At the minimum, the Page Tab Name, Page Tab URL and Secure Page Tab URL are required.
Related
I am implementing deep linking to my android app and it works only when clicking on a link with the desired url such as https://mydomain.co.il only outside browsers like in whatsapp etc.
I know that for making app links work from browser, the website needs to have assetlinks.json file located at https://mydomain.co.il/.well-known/assetlinks.json in order to verify that I am the owner of both the domain and the app.
So I do have the assetlinks.json file ready but does anyone know how can I put the file in that specific location (https://mydomain.co.il/.well-known/assetlinks.json) on my website when using Wix as the platform ?
Thanks in advance
I struggled to find a straightforward way to host the Android Digital Asset Links file on Wix. Found bits and pieces of help on the net. Tested my code and it seems to work.
Here it goes:
Android needs a Digital Asset Links file hosted on the website of an app to verify ownership. The link required is: https://www.yoursite.com/.well-known/assetlinks.json
Since hosting this file at that location was not a plausible solution on Wix (at least to me at the time of this post), we'll need to add a JS file which can spit out the same JSON data and then redirect the URL Google expects to our new link.
Go to Dev Mode -> Enable Developer Mode and switch on the developer mode
In the new left pane, go to {} (Public & Backend)
Next to Backend, click on +, and create a new Javascript file with the name http-functions.js
Add this code:
// Import the Wix http functions API
import {ok, notFound, serverError} from 'wix-http-functions';
// Set the assetlinks variable (between the single backticks) with the content of your assetlinks.json file
let assetlinks = `[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target" : { "namespace": "android_app", "package_name": "<Your app package>",
"sha256_cert_fingerprints": ["<Your app's SHA256>"] }
}]`
// Define http get function for your trust.txt file
export function get_assetlinks(request) {
let options = {
"headers": {
"Content-Type": "text/plain"
},
"body": assetlinks
};
return ok(options);
}
Publish your site
Test if the JSON is displayed by calling: www.yoursite.com/_functions/assetlinks
Hoping that things are great so far, we'll proceed to the last and final step - URL redirection
Go to site Settings > Marketing & SEO > SEO Tools > URL Redirect Manager
Click on New Redirect and enter for:
Old URL: /.well-known/assetlinks.json
New URL: /_functions/assetlinks
Test out the link www.yoursite.com/.well-known/assetlinks.json
Hope this helps someone! Better late than never.
I am trying to implement bigcommerce embedded checkout into my rails application.
I followed this url to integrate embedded checkout into my local rails application.
https://developer.bigcommerce.com/api-docs/storefronts/embedded-checkout/embedded-checkout-tutorial
But I have error message of "NotEmbeddableError: Unable to embed the iframe because the content could not be loaded."
These are the steps I did.
I am using rails application locally.
it is running as https://127.0.0.1:3000 (I've tried with localhost, but I can't create site using localhost: it says site name should not contain localhost string)
I created local ssl key and certification and runs the application by
rails s -b 'ssl://127.0.0.1:3000?key=127.0.0.1.key&cert=127.0.0.1.crt'
And I can access the local site by https://127.0.0.1:3000/ although it says 'Not Secure'
I followed the embedded checkout url APIs and able to produce the redirect_urls
for example:
{
"data": {
"cart_url": "https://pbgtest.mybigcommerce.com/cart.php?action=load&id=30df8201-90c9-4950-b784-0d35f16d2b63&token=10b5a5e6853217d23efdaf0b790b707dfd98fabde5495a5f2aaf7238fabbc5a4",
"checkout_url": "https://pbgtest.mybigcommerce.com/cart.php?action=loadInCheckout&id=30df8201-90c9-4950-b784-0d35f16d2b63&token=10b5a5e6853217d23efdaf0b790b707dfd98fabde5495a5f2aaf7238fabbc5a4",
"embedded_checkout_url": "https://pbgtest.mybigcommerce.com/cart.php?embedded=1&action=loadInCheckout&id=30df8201-90c9-4950-b784-0d35f16d2b63&token=10b5a5e6853217d23efdaf0b790b707dfd98fabde5495a5f2aaf7238fabbc5a4"
},
"meta": {}
}
whenever I copy checkout_url or embedded_checkout_url and paste it directly in addressbar it works fine.
I also found that these urls should be at once not twice, so whenever I try a test I regenerate the url
In rails application, I added this code in one of page
<script src="https://checkout-sdk.bigcommerce.com/v1/loader.js"></script>
<script>
$(document).ready(function() {
// const module = await checkoutKitLoader.load('embedded-checkout');
async function show() {
const module = await checkoutKitLoader.load('embedded-checkout');
const service = module.embedCheckout({
url: 'https://pbgtest.mybigcommerce.com/cart.php?embedded=1&action=loadInCheckout&id=30df8201-90c9-4950-b784-0d35f16d2b63&token=10b5a5e6853217d23efdaf0b790b707dfd98fabde5495a5f2aaf7238fabbc5a4',
containerId: 'embedded-checkout-section' #This is div id
});
service
.then(value => {
console.log(value);
})
.catch(err => {
console.log(err);
});
}
show();
}
But I get "NotEmbeddableError: Unable to embed the iframe because the content could not be loaded."
I can't get the proper info like why it failed loading.
I also tested after disable the Anti Virus software but still same error.
Anybody can help?
It is expected behavior that the link is only live for one visit, so you are correct to regenerate these for testing these urls. Is your BigCommerce store published/live? This needs to be true in order for it to be pulled into your embedded checkout experience.
Also, I would recommend using the embedded_checkout url directly.
Got it successful after following steps
Make sure cart channel id matches with one that points to your https localhost
Add route in channel where the embedded checkout needs to be loaded.
In security and privacy settings, check x-frame-options to allow from your https localhost
I have used this in my html page...
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'xxxxxxxxxxxxxx', // App ID from the App Dashboard
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
};
// 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));
function shareOnFb(action, msg){
FB.ui({
method: action,
message: msg
});
}
</script>
when every I try to call any FB method it says this in my console
Given URL is not permitted by the application configuration.: One or
more of the given URLs is not allowed by the App's settings. It must
match the Website URL or Canvas URL, or the domain must be a subdomain
of one of the Apps domains.
this is my fb app setting.. do i need to change something here, m running my website locally for time being, so i tried adding
localhost/OfferDrive/ to app domain on this page but it says error that it is not a valid domain
You need to fill the value for Website with Facebook Login with the value http://localhost/OfferDrive/ to allow Facebook to authenticate that the requests from JavaScript SDK are coming from right place
Update to Anvesh Saxena's answer(correct but outdated as FB App interface has changed):
In your FB App configuration you need to add a Website platform with your website's URL set. Then you can add App Domains which I set to our website's base domain (e.g. for a URL like http://www.mycoolwebsite.com, just use mycoolwebsite.com).
IMPORTANT: In order for this to work you'll need to be using a subdomain of your app's URL for your local development. You can do this easily by modifying your hosts file on your development computer to use a non-existent subdomain of your website such as local.mycoolwebsite.com. Just google 'edit hosts file' for your platform (e.g. mac / windows) if you're not familiar with how to do this.
Settings -> Advanced, add url to "Valid OAuth redirect URIs". This works for me.
Go to Facebook for developers dashboard
Click My Apps and select your App from the dropdown. (If you haven't already created any app select "Add a New App" to create a new app).
Go to App Setting > Basic Tab and then click "Add Platform" at bottom section.
Select "Website" and the add the website to log in as the Site URL(e.g. mywebsite.com)
If you are testing in local, you can even just give the localhost URL of your app.
eg. http://localhost:8080/myfbsampleapp
Save changes and you can now access Facebook information from http://localhost:8080/myfbsampleapp
An update to munsellj's update..
I got this working in development just by adding localhost:3000 to the 'Website URL' option and leaving the App Domains box blank.
As munsellj mentioned, make sure you've added a website platform.
From the menu item of your app name which is located on the top left corner, create a test app.
In the settings section of the new test app: add 'http://localhost:3000' to the Website url and add 'localhost' to App domains.
Update your app with the new Facebook APP Id
Use Facebook sdk v2.2 or whatever the latest in your app.
Note, the localhost is a special string that FB allows here. If you didn't configure your debugging environment under localhost, you'll have to push it underneath that name as far as I can tell.
Sometimes this error occurs for old javascript sdk. If you save locally javascript file. Update it. I prefer to load it form the facebook server all the time.
Missing from the other answers is how to allow localhost(or 0.0.0.0 or whatever) as an oauth callback url. Here is the explanation. How can I add localhost:3000 to Facebook App for development
Another reason this can happen is if you send the wrong appId. This can happen in early development if you have a development app and a production app. If you hard-code the appId for dev and push to prod, this will show up.
I'm using Soundclouds JS sample code for client side JS apps to connect with the Soundcloud API, as a start. The only difference between their code and mine is I've put in my own client_id and redirect_uri. (I also copied their callback.html, put it on my server, put its address in the soundcloud page for my app).
After ok-ing with my popup blocker, the auth popup comes up and asks permission to access my account, I give it permission, then the popup clears all previous content and simply informs: 'This popup should automatically close in a few seconds' - but it doesn't, and the rest of the code that shows its past authorization never displays.
Here is Soundclouds sample that I'm using. I've tried it while using a server on localhost and also deploying it and changing redirect_uri appropriately with the exact same results.
SC.initialize({
client_id: 'YOUR_CLIENT_ID', // changed it to mine
redirect_uri: 'http://example.com/callback'
});
SC.connect().then(function() {
return SC.get('/me');
}).then(function(me) {
alert('Hello, ' + me.username);
});
Looking in the dev console on both Chrome and Firefox, I dont see any errors. I've also made sure the protocol for my redirect_uri file matches between my account settings and the code.
Does the 'Website of your app' field on the Soundcloud page for my app make a difference? I tried setting it, it didnt fix it. What does client secret do?
The closest to an answer I've found so far is from this SO page where it seems he found out that you can't use an url that doesn't start with 'www.' ??? Its hard for me to believe that this is the problem and unfortunately for me neither localhost or my domain start with www.
Thanks in advance for any help.
In your callback.html, change the line:
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
to:
<body onload="window.setTimeout(window.opener.SC.connectCallback, 1)">
In your application setup page at soundcloud.com, ensure your website setting and callback uri are on the same domain (whether that is localhost or the production domain) and all should work.
Note: for debugging, comment out this line to leave the popup there deliberately, then console can be used to interrogate other code in the callback.html page.
So, I'm using the Facebook JS SDK, and I keep getting 191:
Now, I have checked my settings, and everything seems to be in order. App Domain is set to my base domain (alehunt.com), and "Website with Facebook Login" => "Site URL:" is set to "http://www.alehunt.com". I'm not doing any canvas-related stuff.
When looking at the URL for the login dialog window produced by FB.login I'm quite surprised to see that redirect_uri does not point directly to my app, but instead goes via http://static.ak.fbcdn.net/connect/xd_proxy.php. I'm wondering if this is the reason for the 191 error.
Now, if I change that part of the redirect_uri to be my own everything seems to work just fine. The dialog is presented as it should.
The complete URL is https://www.facebook.com/dialog/oauth?api_key=MYAPPID&app_id=MYAPPID&client_id=MYAPPID&display=popup&domain=www.alehunt.com&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2f3026b8%26origin%3Dhttp%253A%252F%252Fwww.alehunt.com%252Ff298bcee3c%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df3d63e980c&response_type=token%2Csigned_request&scope=email&sdk=joey
Can anyone shed some light on this? Why is the JS SDK insisting on setting all this in the redirect URI?
The error I'm seeing is:
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: Invalid redirect_uri: Given URL is not allowed by the Application configuration.
I'm testing in Chrome 21
Turns out this was due to using a Facebook JS client which had been modified by Cordova (PhoneGap). Still not sure exactly what the issue was, but everything worked just fine when I moved over to loading the JS directly from Facebook.