Hello Facebook Masters,
I am using Facebook Open Graph application for my magento site.
For this we need to create one application in facebook and we need to
add buttons like, want, wish etc. Thats all fine I have created the
buttons as well. But we have to approve that button from facebook. we
need to post the product url for making approval submition for the
want button
i am not able to post the product url. Please help me..
Here is my code used for posting the url :
http://ogp.me/ns#
zoomin-magento:http://ogp.me/ns/apps/zoomin-magento#"> OG
Tutorial App
function postCook() {
FB.api(
'/me/zoomin-magento:want',
'post',
{ product: 'http://camera.zoomin.com/camera-phones-1/sony-ericsson-xperia-ray-st18i.html'
},
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
}); }
window.fbAsyncInit = function() {
FB.init({
appId : '368510486563356', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the 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>
Stuffed Cookies
You have not explained why you cannot share the URL. Nevertheless, for circumstances where the approval team cannot see the app, you can make a video of the app in actions, demonstrating the action being taken, and submit that.
Also check the doc # https://developers.facebook.com/docs/opengraph/opengraph-approval/
Related
I followed the instructions given by Sriram Ranganathan in this thread How to integrate Facebook PHP SDK with Laravel 5.4? .
this is the code of my login page:
<fb:login-button id="btn-login" class="btn w-md btn-bordered btn-primary
waves-effect waves-light" type="button">Via <i class="fa fa-facebook-
official"></i>
</fb:login-button>
<script>
$(document).ready(function()
{
$.ajaxSetup({ cache: true }); // since I am using jquery as well in my app
$.getScript('//connect.facebook.net/en_US/sdk.js', function () {
// initialize facebook sdk
FB.init({
appId: '866665793537033', // replace this with your id
status: true,
cookie: true,
version: 'v2.8'
});
// attach login click event handler
$("#btn-login").click(function(){
FB.login(processLoginClick, {scope:'public_profile,email,user_friends,manage_pages', return_scopes: true});
});
});
});
// function to send uid and access_token back to server
// actual permissions granted by user are also included just as an addition
function processLoginClick (response)
{
var uid = response.authResponse.userID;
var access_token = response.authResponse.accessToken;
var permissions = response.authResponse.grantedScopes;
var data = { uid:uid,
access_token:access_token,
_token:'{{ csrf_token() }}', // this is important for Laravel to receive the data
permissions:permissions
};
postData("{{ url('/login') }}", data, "post");
}
// function to post any data to server
function postData(url, data, method)
{
method = method || "post";
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", url);
for(var key in data) {
if(data.hasOwnProperty(key))
{
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", data[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
</script>
these are the settings of my app on facebook
When i try to connect i get this error :
Unable to load this URL: The domain of this URL is not registered in those of the application. To import this URL, add all the domains and subdomains of your application to the Domains field of the application settings.
I managed to connect fb and gmail auth in my Laravel app.
The problem was when I write 127.0.0.1:8000/login/facebook not works, but with localhost:8000/login/facebook works.
And in developers fb page there is website url input box under settings basic tab write there http://localhost:8000/
Maybe its not possible to connect with localhost?
U could try doing it on a host.
I am using Parse.com and trying to implement their Facebook login functionality. I have the following code, and when I load the page a Facebook dialog pops up and immediately closes. No success or error message is given.
<body>
<div id="fb-root"></div>
<script type="text/javascript">
//Initialize Parse SDK
Parse.initialize('xxx',
'xxx');
window.fbAsyncInit = function() {
//Initialize Facebook SDK via Parse
Parse.FacebookUtils.init({
appId : 'xxx',
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?
});
// use Parse SDK to show Facebook login box on page load
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
};
// Load the SDK's source 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>
You aren't waiting for Parse.FacebookUtils.init() to finish before calling logIn
I'm writing a page that uses OAuth 2.0 via gapi.auth.authorize to authenticate a Google+ user and gapi.client.request to run Google Fusion Tables sqlGet queries. I find that my queries run fine before authentication, but then fail with a 403 "Insufficient Permission" error when run more than 30 seconds
after authentication.
The problem is demonstrated with this page:
https://googledrive.com/host/0B5Urq1jZb1MYSWloU3NTY2M4Qnc/test3b.htm
Please follow these steps:
Click "Query" to run a gapi.client.request Google Fusion Table SQL-get query returning a count of rows. This will run successfully until OAuth is used in steps 2 and 3.
Click "Start OAuth" to run an immediate:true authorization against Google+. If you are currently signed into Google+, your user name and ID will be displayed in the third button.
If your Google+ user name is not displayed in the third button, click the button ("Authorize") and sign into Google+.
Click the "Query" button again. The query will run without error when pressed within about 30 seconds of OAuth authorization. After that, the query fails with a 403 error. WHY?
Here is the source for the demo page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Test3b</title>
<style type="text/css">
</style>
<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var g_domIsReady = false;
var g_gapiIsReady = false;
$(function () {
log("#$(function())");
g_domIsReady = true;
start();
});
function gapiIsReady() {
log("#gapiIsReady");
g_gapiIsReady = true;
start();
}
function start() {
// Make sure both the gapi.client and the DOM (per jquery) are ready.
if (!(g_gapiIsReady && g_domIsReady)) return;
// Define members.
log("#start - gapi and DOM are ready");
var m_apiKey = "AIzaSyAvb0NHQMwyPbMJRtz2zRL4wTiVjZDiois"; // Points to Google account (including Google Drive) at paloalto#geodesy.net.
var m_clientId = "868768273487-q295tdfr54uvo98v74891qakcr9ci0pf.apps.googleusercontent.com";
var m_scopes = "https://www.googleapis.com/auth/plus.me";
// Wire buttons.
var queryButton = document.getElementById('query-button');
queryButton.onclick = function () { runGetRequest(); return false; };
var startOAuthButton = document.getElementById('startOAuth-button');
startOAuthButton.onclick = function () { startOAuth(); return false; };
// Set-up the gapi.
gapi.client.setApiKey(m_apiKey);
//----------------------------------------------------------------------------
// gapi.client.request query functions.
//----------------------------------------------------------------------------
function runGetRequest() {
log("#runGetRequest");
var tableId = "1VZgvKyuh9uHXkQawpxg1MU8AlO8Mngl-sx7SP74"; // TR_TREE_E
var sql = "select count(GID) from " + tableId + " where GID > 50000";
var path = "/fusiontables/v1/query";
var restRequest = gapi.client.request({
path: path,
params: { 'sql': sql }
});
restRequest.execute(jsonCallback);
}
function jsonCallback(json) {
log("#jsonCallback");
var output = JSON.stringify(json);
log(output);
alert(output);
}
//----------------------------------------------------------------------------
// OAuth functions.
//----------------------------------------------------------------------------
function startOAuth() {
log("#startOAuth");
var authorizeButton = document.getElementById('authorize-button');
window.setTimeout(checkAuth, 1); // check auth in 1 ms
function checkAuth() {
log("#checkAuth");
gapi.auth.authorize({
client_id: m_clientId,
scope: m_scopes,
immediate: true
}, handleAuthResult);
}
function handleAuthResult(authResult) {
log("#handleAuthResult");
if (authResult && !authResult.error) {
log("#handleAuthResult - authResult=true");
log(authResult); // authResult is a token (with 3600 second expiration).
authorizeButton.disabled = true;
useAuthResults();
} else {
log("#handleAuthResult - authResult=false");
authorizeButton.disabled = false;
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick() {
log("#handleAuthClick");
gapi.auth.authorize({
client_id: m_clientId,
scope: m_scopes,
immediate: false
}, handleAuthResult);
return false;
}
function useAuthResults() {
log("#useAuthResults");
// Get the Google+ user's ID and name (member info).
gapi.client.load('plus', 'v1', function () {
log("#gapi.client.load callback");
var request = gapi.client.plus.people.get({ 'userId': 'me' });
request.execute(function (aInfo) {
log("#request.execute callback");
if (aInfo.code !== undefined) {
alert('Google+ API returned ' + aInfo.code + ': ' + aInfo.message);
} else {
// Here with successful sign-in. Display the user name.
log('Google+ user id, name: ' + aInfo.id + ', ' + aInfo.displayName);
authorizeButton.value = aInfo.displayName + " +" + aInfo.id;
}
});
});
}
}
}
function log(msg) {
if (console) console.log(msg);
}
</script>
<script src="https://apis.google.com/js/client.js?onload=gapiIsReady" type="text/javascript"></script>
</head>
<body>
<h1>Test3a</h1>
<p>This pages demonstrates a problem I am having using gapi.client.request with gapi.auth.</p>
<input type="button" id="query-button" value="Query"><br>
<input type="button" id="startOAuth-button" value="Start OAuth"><br>
<input type="button" id="authorize-button" value="Authorize"><br>
<p>Steps...</p>
<p>1. Click "Query" to run a gapi.client.request Google Fusion Table SQL-get query returning
a count of rows. This will run successfully until OAuth is used in steps 2 and 3.</p>
<p>2. Click "Start OAuth" to run an immediate:true authorization against Google+. If you
are currently signed into Google+, your user name will be displayed in the third button.</p>
<p>3. If your Google+ user name is not displayed in the third button, press it ("Authorize")
and sign into Google+.</p>
<p>4. Click the "Query" button again.
The query will run without error when pressed within about 30 seconds of OAuth authorization.
After that, the query fails with a 403 error. WHY?</p>
</body>
</html>
Please note that I intend to use the Google+ sign-in to track page usage specifics by user, not to enable the Fusion Tables queries.
I'm new to OAuth and gapi.client.request so this may be a simple misunderstanding on my part.
Thanks for any insights.
I don't have all the answers for you, but here I think are some that may help:
Before you have the user sign-in with G+, the gapi.client.request object is adding a "key=yourAPIKey" parameter to each request.
After you have the user sign-in with G+, the gapi.client.request object is adding a "key=yourAPIKey" parameter to each request and is sending an "Authorization: Bearer ya.xxxxxx" header with each request, representing an access token for the user that is logged in.
I think the reason you're seeing a 403 is because the access token is being sent to the server, but the token does not include a scope authorizating access to FusionTables data. When no access token is sent - this validation is not performed.
If you actually wanted to access data that the user owned, then you need to have the user consent to give your application access to their data by including an appropriate scope in your gapi.auth.authorize call (e.g. "https://www.googleapis.com/auth/fusiontables").
However since I don't think you are trying to access data on behalf of a specific user, what I think you really want to do is prevent the "Authorization" header being sent at all during your call to Fusion Table API.
I can't see an easy way to prevent the gapi.client.request library from sending that header when the user is logged in, so an alternate solution might be to instead create an HTTP object not using the gapi.client.request library (e.g. use XMLHttpRequest directly) - and manually include the "key=yourAPIKey" in each request.
(What I can't explain is why you're seeing 30 seconds of differing behavior...)
I'm using a Backbone Router with Backbone.history.start({pushState: true, root: "/"}); and I'm loading sections of pages through AJAX and use Backbone.history.navigate(url, true); to make sure the url shown by the browser points to the corresponding section.
For instance, I load a page with the relative url "/username/profile", then load a section on that page ('Favorite Books') by clicking on a tab and triggering an AJAX request, and then change the url to "/username/favorite_book".
The problem is that if I go back (with the Back button) to a previous section from the one loaded through ajax, the page content does not change even though the url changes.
I have seen previous posts talking about Ajax Browser History, but I would like to know what should I do in the context of Backbone? I could not find a clear explanation of the issue and how to solve it.
To be precise, what should I add to the function I trigger when clicking on the tab of a section to be loaded with ajax? My aim is to change the URL and the page (go back to state before AJAX request) when using the Back button. I'm currently doing as follows:
RenderSection: function(event) {
var data = '';
var url = $(event.currentTarget).attr("href");
$.post(url, data, function(data){
$(".ajax_section").html(data);
var protocol = this.protocol + '//';
// Ensure the protocol is not part of URL, meaning its relative.
if (url && url.slice(protocol.length) !== protocol) {
Backbone.history.navigate(url, true);
}
});
return false;
},
Turns out I was not using Backbone correctly. Here is what I ended up using and it works great!
In my Backbone View, I created 2 methods: the first is triggered when a link (an anchor) with class="ajax_enabled" is clicked, while the second is triggered by a Backbone Events trigger included in the Router's action. The Backbone View methods look as follows:
events: {
'click a.ajax_enabled': 'NavigateToUrl'
}
initialize: function() {
EventAggregator.on("render:route", this.RenderAjax, this);
},
NavigateToUrl: function(event) {
var url = $(event.currentTarget).attr("href");
var protocol = this.protocol + '//';
// Ensure the protocol is not part of URL, meaning its relative.
if (url && url.slice(protocol.length) !== protocol) {
Backbone.history.navigate(url, true);
}
return false;
},
RenderAjax: function(route) {
var data = '';
var url = window.location.pathname + window.location.search;
$.post(url, data, function(data){
$(".ajax_section").html(data);
});
}
My Backbone Router handles the call from Backbone.history.navigate(url, true); and triggers the event to update the view through the default action, as follows:
window.EventAggregator = _.extend({}, Backbone.Events);
var Router = Backbone.Router.extend({
initialize: function(options) {
var router = this;
Backbone.history.start({pushState: true, root: "/", silent: true});
},
routes: {
'' : 'defaultAction',
'*route': 'defaultAction'
},
defaultAction: function(route) {
if(typeof(route)==='undefined') {
route = '';
}
EventAggregator.trigger("render:route", route);
}
});
return Router;
For reference, I found this other answer helpful, about using events to trigger methods in the View from the Router.
I send you this message because I've a little problem with the subscribe's edge.remove function in my contest application.
In my application, i would like to listen the like and dislike on the button for save it in the database to etablish the contest ranking. But i've a problem with the dislike function and it's distord my ranking.When i like the image, it's work, but when i dislike the previous like button, it's return a link who is called "error" (in red) witch linked to the following error :
"There was an error liking the page. If you are the page owner, please try running your page through the linter on the Facebook devsite (https://developers.facebook.com/tools/lint/) and fixing any errors.".
In firebug, Facebook return the following code by the url POST http://www.facebook.com/ajax/connect/external_node_connect.php?__a=1 call :
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected" :false,"is_admin":false,"show_error":true,"error_info": {"brief":"An error occurred.","full":"There was an error liking the page. If you are the page owner, please try running your page through the linter on the Facebook devsite (https://developers.facebook.com/tools/lint/) and fixing any errors.", "errorUri":"/connect/connect_to_node_error.php?title=An+error+occurred.&body=There+was+an+error+liking+the+page.+If+you+are+the+page+owner\u00252C+please+try+running+your+page+through+the+linter+on+the+Facebook+devsite+\u002528https\u00253A\u00252F\u00252Fdevelopers.facebook.com\u00252Ftools\u00252Flint\u00252F\u002529+and+fixing+any+errors.&hash=AQBOwKwXHdofUaSJ"}}}
My code is :
window.fbAsyncInit = function() {
FB.init({
appId : '<?= APP_ID; ?>',
status : true,
cookie : true,
xfbml : true
});
FB.Canvas.setAutoResize();
FB.Event.subscribe('edge.create',
function(href, widget) {
alert(href);
//$('a').bind('click',false);
//liketoggle(href);
}
);
FB.Event.subscribe('edge.remove',
function(href, widget) {
alert('href');
//$('a').bind('click',false);
//liketoggle(href);
}
);
};
(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/fr_FR/all.js#xfbml=1&appId=<?= APP_ID; ?>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Aren't you passing too many parameters to that function? There should be only one.
Below one works for me:
FB.Event.subscribe('edge.remove',
function(response) {
alert('You unliked the URL: ' + response);
}
);
And here is the documentation:
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe