How to use Facebook Login in a Meteor App -

i'm trying create custom login using facebook , looking 2 endpoints: "name" , "avatar".

for starters don't know if "avatar" real endpoint name that's i'm trying access.

i have created test app on fb, have installed of meteor packages need groundwork done.

i've create following template: <template name="login">     <h2>login</h2>     {{#if currentuser}}         {{currentuser.services.facebook.name}}         {{currentuser.services.facebook.avatar}}         <button id="logout">logout</button>     {{else}}         <button id="facebook-login" class="btn btn-default">login facebook</button>     {{/if}} </template> 

and in servers directory have create .js file store api keys.

my questions:

my first question find names of these endpoints i've been going entire documentation on fb , nothing references "name" or "avatar" first thing need understand find these endpoints haven't been able locate "name".

second question api shows json objects , that's how hookup endpoints in meteor since of abstracted it's unclear "facebook" object exists study more in depth nested properties "name" , "avatar" (which again i'm uncertain if correct name property). i'm assuming because i'm using meteor calling endpoint {{currentuser.services.facebook.name}} enough, thinking correctly?

final question if have call these endpoints inside of template:

{{#if currentuser}}         {{currentuser.services.facebook.name}}         {{currentuser.services.facebook.gender}}         <button id="logout">logout</button>     {{else}}         <button id="facebook-login" class="btn btn-default">login facebook</button>     {{/if}} 

then if wrap facebook name , gender in own divs this:

{{#if currentuser}}         <div class="name">             {{currentuser.services.facebook.name}}         </div>         <div class="avatar">             {{currentuser.services.facebook.avatar}}         </div>         <button id="logout">logout</button>     {{else}}         <button id="facebook-login" class="btn btn-default">login facebook</button>     {{/if}} 

this still doesn't make obvious me how move header?

so in other words how have user login main body of page, yet after login have username , avatar in header?

there no obvious way me this.

what missing? how dom shuffle move .name , .avatar divs header when logged user in via body of page?

does make sense?

my hunch have create template within header calls these values?

anyone play around offer insight?

thank you.

the first part of question answered here:

https://stackoverflow.com/a/15019052/1327678

the answer second part of question in docs. make template helper check this:

template.header.helpers({     currentuser: function(){         if(meteor.user()){             return true;         }         else{             return false;         }     } }); 

and in template write:

{{#if currentuser}}     {{!-- facebook code here --}} {{/if}}