how to login with facebook on iphone/phonegap with the ChildBrowser plugin

1245 views
Skip to first unread message

sserrano

unread,
Oct 4, 2010, 2:55:54 PM10/4/10
to phonegap
Hi
By demand on stackoverflow, I write a blog post about how I
implement the login with facebook in one of my apps using the
ChildBrowser plugin.
The link to the post: http://www.pushittolive.com/post/1239874936/facebook-login-on-iphone-phonegap
I hope is useful for others.

Cheers, Sebastian Serrano

Jesse MacFadyen

unread,
Oct 4, 2010, 3:05:25 PM10/4/10
to sserrano, phonegap
Nice, this is exactly what my hope was when I added the locationChange event.
Super simple, and this same approach can easily be applied to other services, including twitter, ...

Would you consider adding this as a js only plugin in the plugins repo?
- ie. a plugin that is dependent on ChildBrowser, and simply wraps some of the functions.

Cheers, 
  Jesse


--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com



--
--
Jesse MacFadyen
{
  blog:'blogs.nitobi.com/jesse',
  email:'jesse.m...@nitobi.com',
  company:
  {
    name:'Nitobi Software',
    site:'www.nitobi.com',
    phone:
    {
      office:'+1 (604) 685-9287',
      tollFree:'1-866-632-2777'
     }
  }
}

sebastian serrano

unread,
Oct 4, 2010, 3:35:17 PM10/4/10
to Jesse MacFadyen, phonegap
Yes, sure.

Cheers, Sebastian
-

2010/10/4 Jesse MacFadyen <jesse.m...@nitobi.com>

Samuel Michelot

unread,
Oct 4, 2010, 4:15:19 PM10/4/10
to phonegap
This is great! I wanted to do that since a long time !
Thanks a lot Sebastian!

On Oct 4, 9:35 pm, sebastian serrano <sebast...@livemade.com> wrote:
> Yes, sure.
>
> Cheers, Sebastian
> -http://www.sserrano.com
>
> 2010/10/4 Jesse MacFadyen <jesse.macfad...@nitobi.com>
>
>
>
> > Nice, this is exactly what my hope was when I added the locationChange
> > event.
> > Super simple, and this same approach can easily be applied to other
> > services, including twitter, ...
>
> > Would you consider adding this as a js only plugin in the plugins repo?
> > - ie. a plugin that is dependent on ChildBrowser, and simply wraps some of
> > the functions.
>
> > Cheers,
> >   Jesse
>
> > On Mon, Oct 4, 2010 at 11:55 AM, sserrano <sebastian.serr...@gmail.com>wrote:
>
> >> Hi
> >>  By demand on stackoverflow, I write a blog post about how I
> >> implement the login with facebook in one of my apps using the
> >> ChildBrowser plugin.
> >>  The link to the post:
> >>http://www.pushittolive.com/post/1239874936/facebook-login-on-iphone-...
> >>  I hope is useful for others.
>
> >> Cheers, Sebastian Serrano
>
> >> --
> >> You received this message because you are subscribed to the Google
> >> Groups "phonegap" group.
> >> To post to this group, send email to phon...@googlegroups.com
> >> To unsubscribe from this group, send email to
> >> phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c om>
> >> For more options, visit this group at
> >>http://groups.google.com/group/phonegap?hl=en?hl=en
>
> >> For more info on PhoneGap or to download the code go towww.phonegap.com
>
> > --
> > --
> > Jesse MacFadyen
> > {
> >   blog:'blogs.nitobi.com/jesse',
> >   email:'jesse.macfad...@nitobi.com<email%3A%27jesse.macfad...@nitobi.com>

tdawg

unread,
Oct 19, 2010, 1:58:02 PM10/19/10
to phonegap
Any chance on a idiot proof guide?

I got my whole phonegap/jqtouch app built except the iPhone/Twitter
parts.

I tried your code, I didn't quite get how to use the python script.
Then I get it to execure the JS code with a "onClick" event, but,
nothing happens after that.

T-

On Oct 4, 9:55 pm, sserrano <sebastian.serr...@gmail.com> wrote:
> Hi
>   By demand on stackoverflow, I write a blog post about how I
> implement the login withfacebookin one of my apps using the
> ChildBrowser plugin.
>   The link to the post:http://www.pushittolive.com/post/1239874936/facebook-login-on-iphone-...

Jesse MacFadyen

unread,
Oct 19, 2010, 2:32:40 PM10/19/10
to tdawg, phonegap
I have checked in a plugin-extension to use ChildBrowser to connect to FaceBook


Cheers,
  Jesse

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com



--
--
Jesse MacFadyen
{
  blog:'blogs.nitobi.com/jesse',

Jesse MacFadyen

unread,
Oct 19, 2010, 2:54:57 PM10/19/10
to Tim S, phonegap
You need to use ChildBrowser as well, what do you mean 'closes your app' ?
Does it launch something in Mobile Safari? Does it crash? What is displayed in the debugger console?



On Tue, Oct 19, 2010 at 11:51 AM, Tim S <tpha...@gmail.com> wrote:
It seems OK, but, it automatically closes my app

Giacomo Balli

unread,
Oct 19, 2010, 2:58:01 PM10/19/10
to phonegap
pretty sweet Jesse, you're on the ball lately!

On Oct 19, 8:32 pm, Jesse MacFadyen <jesse.macfad...@nitobi.com>
wrote:
> I have checked in a plugin-extension to use ChildBrowser to connect to
> FaceBook
>
> http://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/C...
>
> Cheers,
>   Jesse
>
>
>
>
>
> On Tue, Oct 19, 2010 at 10:58 AM, tdawg <tphar...@gmail.com> wrote:
> > Any chance on a idiot proof guide?
>
> > I got my whole phonegap/jqtouch app built except the iPhone/Twitter
> > parts.
>
> > I tried your code, I didn't quite get how to use the python script.
> > Then I get it to execure the JS code with a "onClick" event, but,
> > nothing happens after that.
>
> > T-
>
> > On Oct 4, 9:55 pm, sserrano <sebastian.serr...@gmail.com> wrote:
> > > Hi
> > >   By demand on stackoverflow, I write a blog post about how I
> > > implement the login withfacebookin one of my apps using the
> > > ChildBrowser plugin.
> > >   The link to the post:
> >http://www.pushittolive.com/post/1239874936/facebook-login-on-iphone-...
> > >   I hope is useful for others.
>
> > > Cheers, Sebastian Serrano
>
> > --
> > You received this message because you are subscribed to the Google
> > Groups "phonegap" group.
> > To post to this group, send email to phon...@googlegroups.com
> > To unsubscribe from this group, send email to
> > phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c om>
> > For more options, visit this group at
> >http://groups.google.com/group/phonegap?hl=en?hl=en
>
> > For more info on PhoneGap or to download the code go towww.phonegap.com
>
> --
> --
> Jesse MacFadyen
> {
>   blog:'blogs.nitobi.com/jesse',
>   email:'jesse.macfad...@nitobi.com <email%3A%27jesse.macfad...@nitobi.com>

Tim S

unread,
Oct 19, 2010, 2:51:16 PM10/19/10
to Jesse MacFadyen, phonegap
It seems OK, but, it automatically closes my app

On Tue, Oct 19, 2010 at 9:32 PM, Jesse MacFadyen <jesse.m...@nitobi.com> wrote:

Tim S

unread,
Oct 19, 2010, 3:02:01 PM10/19/10
to Jesse MacFadyen, phonegap
My bad, it simply needed clean build.

Tim S

unread,
Oct 19, 2010, 5:20:16 PM10/19/10
to Jesse MacFadyen, phonegap
I am not sure if this is useful, but I made additions to your file others might like... I also know there are a ton more coders, who can do this millions of times better, but, I just thought I'd share back:

In the FB Connect, I added this row:

authorize_url += "&scope=offline_access,publish_stream";

In index page added this function:

function onFBPost(FBID){

var req = window.plugins.fbConnect.wallPost(FBID);

}


and in FBConnect.js added the following:

FBConnect.prototype.wallPost = function(FBID)

{

var url = "https://graph.facebook.com/"+FBID+"/feed";

var params = "access_token="+this.accessToken+"&message=my test message";

//alert(url+params);

var req = new XMLHttpRequest();

req.open("POST", url, true);

//Send the proper header information along with the request

req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

req.setRequestHeader("Content-length", params.length);

req.setRequestHeader("Connection", "close");

req.onreadystatechange = function() {//Call a function when the state changes.

if(req.readyState == 4 && req.status == 200) {

//alert(req.responseText);

}

}

req.send(params);


return req;

Jesse MacFadyen

unread,
Oct 19, 2010, 6:57:41 PM10/19/10
to Tim S, phonegap
Cool!
Why don't you fork the repo and check this in?

Tim S

unread,
Oct 20, 2010, 10:21:56 AM10/20/10
to phonegap
Does anyone have an idea how to do a similar thing with twitter?  I'd like to get a list of followers.

tdawg

unread,
Oct 20, 2010, 10:23:19 AM10/20/10
to phonegap
anyone have an idea how to do the same thing for twitter? I'd ike to
grab a list of followers

On Oct 20, 1:57 am, Jesse MacFadyen <jesse.macfad...@nitobi.com>
wrote:
> >>> On Tue, Oct 19, 2010 at 11:51 AM, Tim S <tphar...@gmail.com> wrote:
>
> >>>> It seems OK, but, it automatically closes my app
>
> >>>> On Tue, Oct 19, 2010 at 9:32 PM, Jesse MacFadyen <
> >>>> jesse.macfad...@nitobi.com> wrote:
>
> >>>>> I have checked in a plugin-extension to use ChildBrowser to connect to
> >>>>> FaceBook
>
> >>>>>http://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/C...
>
> >>>>> Cheers,
> >>>>>   Jesse
>
> >>>>> On Tue, Oct 19, 2010 at 10:58 AM, tdawg <tphar...@gmail.com> wrote:
>
> >>>>>> Any chance on a idiot proof guide?
>
> >>>>>> I got my whole phonegap/jqtouch app built except the iPhone/Twitter
> >>>>>> parts.
>
> >>>>>> I tried your code, I didn't quite get how to use the python script.
> >>>>>> Then I get it to execure the JS code with a "onClick" event, but,
> >>>>>> nothing happens after that.
>
> >>>>>> T-
>
> >>>>>> On Oct 4, 9:55 pm, sserrano <sebastian.serr...@gmail.com> wrote:
> >>>>>> > Hi
> >>>>>> >   By demand on stackoverflow, I write a blog post about how I
> >>>>>> > implement the login withfacebookin one of my apps using the
> >>>>>> > ChildBrowser plugin.
> >>>>>> >   The link to the post:
> >>>>>>http://www.pushittolive.com/post/1239874936/facebook-login-on-iphone-.
> >>>>>> ..
> >>>>>> >   I hope is useful for others.
>
> >>>>>> > Cheers, Sebastian Serrano
>
> >>>>>> --
> >>>>>> You received this message because you are subscribed to the Google
> >>>>>> Groups "phonegap" group.
> >>>>>> To post to this group, send email to phon...@googlegroups.com
> >>>>>> To unsubscribe from this group, send email to
> >>>>>> phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c om>
> >>>>>> For more options, visit this group at
> >>>>>>http://groups.google.com/group/phonegap?hl=en?hl=en
>
> >>>>>> For more info on PhoneGap or to download the code go to
> >>>>>>www.phonegap.com
>
> >>>>> --
> >>>>> --
> >>>>> Jesse MacFadyen
> >>>>> {
> >>>>>   blog:'blogs.nitobi.com/jesse',
> >>>>>   email:'jesse.macfad...@nitobi.com<email%3A%27jesse.macfad...@nitobi.com>
> >>>>> ',
> >>>>>   company:
> >>>>>   {
> >>>>>     name:'Nitobi Software',
> >>>>>     site:'www.nitobi.com',
> >>>>>     phone:
> >>>>>     {
> >>>>>       office:'+1 (604) 685-9287',
> >>>>>       tollFree:'1-866-632-2777'
> >>>>>      }
> >>>>>   }
> >>>>> }
>
> >>> --
> >>> --
> >>> Jesse MacFadyen
> >>> {
> >>>   blog:'blogs.nitobi.com/jesse',
> >>>   email:'jesse.macfad...@nitobi.com<email%3A%27jesse.macfad...@nitobi.com>
> >>> ',
> >>>   company:
> >>>   {
> >>>     name:'Nitobi Software',
> >>>     site:'www.nitobi.com',
> >>>     phone:
> >>>     {
> >>>       office:'+1 (604) 685-9287',
> >>>       tollFree:'1-866-632-2777'
> >>>      }
> >>>   }
> >>> }
>
> --
> --
> Jesse MacFadyen
> {
>   blog:'blogs.nitobi.com/jesse',
>   email:'jesse.macfad...@nitobi.com <email%3A%27jesse.macfad...@nitobi.com>

tdawg

unread,
Oct 20, 2010, 6:47:30 PM10/20/10
to phonegap
I found this link:
http://www.moretechtips.net/2009/10/twitter-friends-followers-widget-jquery.html

But I haven't succeeded yet at putting into phonegap, will send back
here when I do.
> > >>>>>> phonegap+u...@googlegroups.com<phonegap%2Bunsubscr...@googlegroups.c om>

Tim S

unread,
Oct 20, 2010, 7:19:22 PM10/20/10
to phonegap
include twitter.js below your jquery include
include the required css in the <head> tag (this is copied from their page)

<style>

/* container */

div.twitter-friends{ }

/*---- Users ----*/

div.tf-users{

/* fixed height so container will not flicker within transitions */

height:48px;

border:silver 1px solid;

overflow:hidden;

background-color:#eaeaea;

}

/* user img link*/

div.tf-users a{

display:block;

float:left;

}

/* user img */

div.tf-users img{ }

/* ---- Info Link ----- */

div.tf-info{

text-align:right;

}

div.tf-info a{

text-decoration:none;

font-size:9px;

font-weight:bolder;

color:gray;

font-family:tahoma;

}

</style>

<!-- end twitter css-->

In the html of your document include:

<ul class=rounded id=twitter-friends options="{

debug:0

,friends:0

,username:'tdawgpharaoh'

}"></ul>

** the original was a div, I changed to UL because I use jqtouch.

Styling changes after that happen in twitter.js

twitter.js
Reply all
Reply to author
Forward
0 new messages