PDA

View Full Version : Post to Facebook wall from Sencha Touch App?



bendixso
26 Apr 2011, 6:45 AM
I've been trying to get this to work for a few weeks now, and I'm totally stuck. I've got a Sencha Touch app for snowboarders that generates a random line of tricks to try on some jumps. I want to have a button they can press to publish the tricks they just landed on their Facebook wall.

Here's a screenshot from the app:
http://snowdiceapp.com/blog/wp-content/uploads/2011/04/beefcurtains.png

The Facebook sharing button will go at the bottom, and that's where I'm having my problems. I'm using the FB.Connect.streamPublish() function, but it isn't prompting the user with anything.

Some code for that:

var fbShare = function(){

var message = '... just stomped ' + trickArray[1].trickString + 'to ' + trickArray[2].trickString + 'to ' + trickArray[3].trickString + 'with Snow Dice: Snowboarding';

var attachment = {
'name' : 'Snow Dice: Snowboarding',
'href' : 'http://www.snowdiceapp.com/blog',
'description' : 'stomping new lines with Snow Dice App',
"media" : [{"type":"image","src":"http://www.snowdiceapp.com/blog"}]
}

FB.Connect.streamPublish(message,attachment);

};

Does anyone know:
1.) Where I should call FB.Connect.streamPublish() ?
2.) Do I need to put all of this into some other panel for it to work?
3.) If I need to put this into some other panel, how might I do that?

Does anyone have:
1.) A working Sencha Touch example where you post someone's Facebook wall?

If so, that would be amazing. I really have no idea where to go from here.

Thanks everyone,
-Ted Bendixson

bendixso
5 May 2011, 7:24 AM
Really? Nobody has tried to do this before?

m_sassa
9 May 2011, 1:00 PM
any news about this? i have the same problem ...

rashers
26 Aug 2011, 1:01 AM
Someone has to have tried to do FB integration through Sencha Touch before?

keshav.jha@hemantech.com
9 Sep 2011, 12:31 AM
any news. I have the same problem

lylepratt
9 Sep 2011, 6:13 AM
You'll probably have to write a server side proxy to handle Facebook interaction.

SimonFlack
9 Sep 2011, 1:56 PM
You can post on a wall using facebooks api

https://developers.facebook.com/docs/reference/javascript/

You can redirect to Facebooks login like this.

<html>
<head>
<title>Need4Deals</title>
<script>
window.location = 'http://www.facebook.com/dialog/oauth?client_id=145849512154270&redirect_uri=http://www.whitefox.no/projects/m.need4deals.com/&display=touch&scope=publish_stream';
</script>
</head>
<body>
</body>
</html>

You have to add this to your app body

<body>
<div id="fb-root"></div>
</body>

Add Facebook api to app.

if(!need4deals.script2){
window.fbAsyncInit = function() {
FB.init({appId: '145849512154270', status: true, cookie: true, xfbml: true});
need4deals.facebook.setFBUser();
};
(function() {

need4deals.script2 = document.createElement('script');
need4deals.script2.async = true;
need4deals.script2.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.body.appendChild(need4deals.script2);

}());
}

And then post to wall like this.

need4deals.facebook.wallPost = function(body){
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}

keshav.jha@hemantech.com
13 Sep 2011, 1:30 AM
Are you sure if this would work for "Sencha Touch" applications for which this forum is originally posted

SimonFlack
13 Sep 2011, 1:34 AM
Yeah... We used it in an app.

roje
16 Feb 2012, 7:30 AM
I used your trick and it works great.

But my problem is that when I use the sdk tools to build a custom js file, when accessing to the app I've got an error that says FB is not defined...

Do you use the sdk tools to minify your app too ?

Thanks.

chanchu
10 Apr 2012, 8:32 PM
hi,

can u please give some sample code for facebook wall posting through sencha touch 2.

muvatech
29 Sep 2012, 7:15 AM
I tried implementing that and i get an error on my console:
"Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App&#039;s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App&#039;s domains"

I am running my app from localhost. I have defined my app domain on facebook with another domai other than localhost since facebook app configuration does not accept localhost as a domain. i have tried uploading the app to the actual domain other than localhost and don't get any error but the page still does not show.
Please help.

muvatech
1 Oct 2012, 9:11 AM
Hey, @tuansim79. Got something new?

sendy
11 Mar 2013, 3:33 AM
Thanks SimonFlack
I am using your code it works fine for me .but there a bug that I didn't solved it.
this is a screenshots of what I got.
Please can you tell me what I must put here : window.location = 'http://www.facebook.com/dialog/oauth?client_id=145849512154270&redirect_uri=http://www.whitefox.no/projects/m.UnivMobile.com/&display=touch&scope=publish_stream';
and

window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '136041603241236', // App ID from the App Dashboard
What should I put here ?????? channelUrl : 'http://www.facebook.com/dialog/oauth? client_id=145849512154270&redirect_uri=http://www.whitefox.no/projects/m.UnivMobile.com/&display=touch&scope=publish_stream', // Channel File for x-domain communication
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


};

sendy
11 Mar 2013, 4:15 AM
Thank you for this solution.I tested it it works fine for me.
But I have got an error.This is a screen shots:
When I click on 'OK' button in the top, its fine,but I want to solve this problem.
This my view :
Ext.define("UnivMobile.view.Facebook", {
extend: 'Ext.Panel',
config: {
title: "LikeUs",
layout: 'fit',
listeners: {
show: function() {
What should I change here??//window.location = 'http://www.facebook.com/dialog/oauth?client_id=145849512154270&redirect_uri=http://www.whitefox.no/projects/m.UnivMobile.com/&display=touch&scope=publish_stream';

window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '136041603241236', // App ID from the App Dashboard
What should I put here?? //channelUrl : 'http://www.facebook.com/dialog/oauth?client_id=145849512154270&redirect_uri=http://www.whitefox.no/projects/m.UnivMobile.com/&display=touch&scope=publish_stream', // Channel File for x-domain communication
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


};
(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));


UnivMobile.facebook.wallPost = function(body){
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}


}
}
});
This is what I got:
42294