Can someone please provide an up-to-date guide on how to setup a Facebook App linked to a Business Page to allow posting from an external website?
I have created a Website with Facebook Login App and I am using the JavaScript SDK to posting of content from our website to our Business Page.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>My Feed Dialog Page</title>
</head>
<body>
<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p><a onclick='postToFeed(); return false;'>Post to Feed</a></p>
<p id='msg'></p>
<script>
FB.init({appId: "OURAPPID", status: true, cookie: true, frictionlessRequests: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: 'http://www.ourdoamin.com/test.jsp',
picture: 'http://www.ourdoamin.com/image.jpg',
name: 'Test Article',
caption: 'Here We GO',
description: 'This is a test.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
When I click the Post to Feed link, I am presented with a dialogue box, the App is correctly identified in the Via field and if I enter a status and click Share, I receive a Post ID.
However, despite the app being correctly referenced and receiving a Post ID, the post actually appears on the Wall of the users account currently logged in and not the Business page.
I would prefer no login at all, just a straight post using the App to the Business Page and not a users individual account.
Can someone, please tell me where I am going wrong and how to correct this?
You can post directly to a page using the page access_token. In order to do this, you will need the manage_pages permission. Once you ask for the permission, you can get the page access_token by calling /me/accounts and noting the correct token for the page you want to post to.
Use this access_token in your API call to post to the page as an administrator / page.
Related
I am trying to follow the simplest of examples of how to setup up Google's "
One tap sign-up and automatic sign-in" in a web page. Just copy and pasting the code provided by google, I get an exception "No credentials available". Why? How to fix it?
This is my web page content ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script src="https://smartlock.google.com/client"></script>
<script>
console.log( "window.location.origin=" + window.location.origin);
window.onGoogleYoloLoad = (googleyolo) => {
console.log("Google one tap ready");
};
const retrievePromise = googleyolo.retrieve({
supportedAuthMethods: [
"https://accounts.google.com",
"googleyolo://id-and-password"
],
supportedIdTokenProviders: [
{
uri: "https://accounts.google.com",
clientId: "xxxx-86peetl434op89ug41lg1vv8sjspfupp.apps.googleusercontent.com"
}
]
});
</script>
</head>
<body>
Content of the document......
</body>
</html>
The Authorized JavaScript origins has been correctly setup. I am confident of that. The URL for the above content is: https://s3-ap-southeast-2.amazonaws.com/sbd-aws-sdk-delphi-22/index.html
Upon hitting the page (browser=Chrome), the resultant javascript console is ..
window.location.origin=https://s3-ap-southeast-2.amazonaws.com
Google one tap ready
index.html:1 Uncaught (in promise)
a {type: "noCredentialsAvailable", name: "OpenYoloError", message:
"noCredentialsAvailable: No credential is available for the current user."}
message:
"noCredentialsAvailable: No credential is available for the current user."
Context: When I make this web page hit, I am logged into Google.
What am I doing wrong?
The problem is that there is currently no user signed in. The library has very little support for this, as a work around, when no Google Accounts are active and no credentials are available. You can simply show the traditional Google Sign-In button and have the user click to proceed through the flow to activate their Google Account in the browser.
https://developers.google.com/identity/sign-in/web/
I am using Google Auth Login for my application. My SignIn button is on the login page and my logout is a part of my header which is included throughout my application. On clicking on logout button I am not being able to sign the user out of my application
Login.tpl code (Which contains sign in button)
<div align="middle" class="g-signin2" data-onsuccess="onSignIn"></div>
<meta name="google-signin-client_id" content="CLIENT_ID">
I am able to login but not being able to logout.Logout button is a part of the header.tpl which is included in all the files but I am getting the error marked in bold above.
Header.tpl code
<meta name="google-signin-client_id" content="CLIENT_ID">
<i class="fa fa-sign-out pull-right"></i> Log Out
My JS code
$(".logout").click(function(event) {
event.preventDefault();
gapi.load('auth2', function () {
var auth2 = gapi.auth2.init({
client_id: 'CLIENT_ID',
cookiepolicy: 'single_host_origin'
});
auth2.then(function(){
// this get called right after token manager is started
auth2.signOut();
console.log('User signed out.');
});
});
window.location = $(this).attr('href');
});
The code is never entering the block in which signout is defined and hence I am not getting anything in the console as well.
However if I run this code in console, the user gets logged out successfully but this isn't working on the application when I am running it on localhost
Any leads would be highly appreciated.
I found the solution, it seems that you can only call signOut method after the signinCallback has fired. So far as I can tell, the only way to fire the signinCallback is to put a sign-in button on the page.
Keeping a hidden sign-in button where my logout button is written did the trick for me.
Included this in header.tpl where my logout button is written
<div style = "display:none" align="middle" class="g-signin2" data-cookiepolicy='single_host_origin' data-onsuccess="onSignIn"></div>
I was able to get it to work on localhost with the following code:
auth2.signOut().then(function () {
auth2.disconnect();
gapi.auth2.getAuthInstance().currentUser.get().reloadAuthResponse();
});
Check out the discussion on this github page
I am trying to visit a website and log in automatically.
After this, I want to return whether or not this was a success or failure, but I can't get it to work. The page loads blank and nothing happens.
Note: I have deliberately greyed out the URL.
Below is my attempt,
<HTML>
<HEAD>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
<TITLE>Login</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<script type="text/javascript">
$(document).ready(function () {
runLogin();
});
function runLogin(){
alert("start");
if (window.location.indexOf("url") > -1) {
jQuery("#j_username").val("username");
jQuery("#j_password").val("password");
jQuery("#loginForm").submit();
}
}
</script>
If you want to test your login form, use Protractor or other e2e test framework, but this way does not seem very safe.
http://angular.github.io/protractor/
It's loading a blank page because your back-end script isn't redirecting back to the page you started on. One option is to send the current webpage URL as an extra field to the login form so that it can redirect back after it has logged in. This will require you to refactor your back-end code so that it can handle this extra information (not really possible if you're using j_security_check). Another option is to make an AJAX request to your login page so that it doesn't actually redirect the page, it just submits the form quietly and then JS handles the response.
If you want to add the URL of the current page to the login request, do this:
function runLogin() {
if (window.location.indexOf("url") > -1) {
jQuery("#j_username").val("username");
jQuery("#j_password").val("password");
jQuery("#loginForm").append(
'<input type="hidden" name="url" value="'+window.location.href+'"/>'
);
jQuery("#loginForm").submit();
}
}
If you want to use AJAX to send a login request:
function runLogin() {
var $form = $("#loginForm");
$.post($form.attr("action"), $form.serialize(), function(data) {
// login successful/unsuccessful message displays
// depending on what "data" contains
});
}
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'OUR_APP_ID', cookie:true,
status:true, xfbml:true
});
</script>
<script>
FB.Event.subscribe('auth.login', function(response) {
alert("Logged in.. Redirecting you now...");
window.location = 'http://localhost:7001/Facebook/success.jsp';
});
</script>
<fb:login-button perms="email,publish_stream,about_me" onlogin="window.location='http://localhost:7001/Facebook/success.jsp'"></fb:login-button>
</body>
I am able to login to Facebook using the tag. But, after that, I need to redirect the user to another page where I can display his/her data like Name, email, gender, etc. The window.location for redirection isn't working. This problem is not only for localhost. The problem persists even if I put google in place of the localhost URL. Does facebook not allow javascript redirection anymore or has facebook decided to stop supporting onlogin which is not a DOM event on its own but a specific from Facebook? Please help me. Thanks in advance!
Your problem `http://localhost:7001/Facebook/success.jsp'">
you are currently using absolute URL type while you should use relative type of URL like:
<fb:login-button perms="email,publish_stream,about_me" onlogin="window.location='/Facebook/success.jsp'"></fb:login-button>
Here is my scenario. When a user opens a browser and goes to facebook.com to sign himself in, I want to be able to detect that and init my Facebook application sign-in process.
Is that possible? I'm asking because I noticed that signing into Facebook itself doesn't get my app signed in automatically, which is not good.
I'd prefer JavaScript client code.
UPDATE: Here you have a FULLY WORKING example. The only thing you will need to do is to replace the APP_ID for whatever ID you get when sign your app at: http://www.facebook.com/developers/ and the port you may use for the localhost test. This detects when the user logs in even in another browser window. It is obviously extremely basic but proves the point that is feasible with the tools from the graph API.
You can add this code to detect when the user logs in. It is the same oauth log in whether the user clicks on a <fb:login-button> or logs directly onto facebook.com:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hello App Engine</title>
<SCRIPT type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></SCRIPT>
</head>
<body>
<h1>Hello!</h1>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : APP_ID,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
/*
* Authentication functions
*/
FB.Event.subscribe('auth.login', function (response) {
welcomeMsg(response);
});
FB.Event.subscribe('auth.logout', function (response) {
alert ("Good bye!");
});
if (FB.getSession() != null) {
FB.api('/me', function(response){
console.log(response.name);
welcomeMsg(response);
})
} else {
window.setTimeout(function(){window.location.href="http://localhost:8888"},5000);
}
function welcomeMsg(userData) {
console.log ("Welcome " + userData.name);
}
</script>
</body>
</html>
You can subscribe to the auth.login event.
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
There are many Facebook images that you can see only if you're logged into Facebook. You can make the user attempt to load one of these images, and then detect if it loaded or not. It's a total trick.