Calling Facebook photos using helpers METEOR-JS

Question

I'm trying to call facebook profile photos using the following in Meteor.

Template.foo.helpers({
    avatar: function() {
        if (Meteor.user().services.facebook) {
        return "http://graph.facebook.com/" + Meteor    .user().services.facebook.id + "/picture/?type=large"; 
        }
        else
        {
            return "img/blank_avatar.png"
        }
    }
});

and I'm calling this by

<img src = "{{avatar}}">

In my browser console, I'm getting an error saying

Exception in template helper: avatar

I really don't understand what is the problem...

Answer 1

Lets change that Facebook logic to the server side , on the onCreateUser method.

//server
    Accounts.onCreateUser(function(options, user) {
       if(user.services.facebook) {
          user.profile = options.profile; 
          user.profile.picture = "http://graph.facebook.com/" + user.services.facebook.id + "/picture/?type=large";
       }else if(options.profile){
          user.profile = options.profile;
       }
    return user
});

With that if some user login with Facebook services the profile.picture field will hold for us the url with the Facebook photo.

Now on the Client side

JS

    //client
    Template.foo.helpers({
      showProfile:function(){
        if(Meteor.user().profile){
          return userProfile.picture;
        }else{
         return "img/blank_avatar.png"
        }
      }
    })
}

HTML

    {{#if currentUser}}
        <img src="{{showProfile}}" class='fbPic'>
      {{/if}

CSS

.fbPic {
  border-right: 1.5px solid;
  padding-right: 8px;
  padding-bottom: 4px;
  padding-top: 4px;
}