Hi there,
Yep, I've been M.I.A from some time now, yet again, due to my work and college stuff. So, today, I will be sharing on how can we use the ning.CurrenProfile variable.
The Wonders of User Profile Variable
You can see these variables popping out here and there in scripts made by others. But what exactly are they and how can we utilize it?
They are what we called Javascript associative array which holds information of a user, they store:
Your Ning ID, name, gender, location, country, profile photo, profile url and age.
For example, this is mine:
"CurrentProfile":{"id":"18abpibelhnjw","profileUrl":"http:\/\/creators.ning.com\/profile\/ElsonTan","location":"","age":17,"gender":"m","fullName":"Elson Tan","photoUrl":"http:\/\/storage.ning.com\/topology\/rest\/1.0\/file\/get\/963872840?profile=original%3A1","country":"MY"}
You can see yours by view sourcing any page on Ning network, and search for "CurrentProfile".
How do we use this?
We can access it using javascript for example:
<script>
alert("This is my name! " + ning.CurrentProfile.fullName);
</script>
Here's the list of the variables we can access to:
Full Name : ning.CurrentProfile.fullName
Ning ID : ning.CurrentProfile.id
Profile URL: ning.CurrentProfile.profileUrl
Location(state, if provided): ning.CurrentProfile.location
Country: ning.CurrentProfile.country
Age: ning.CurrentProfile.age
Photo URL: ning.CurrentProfile.photoUrl
Gender: ning.CurrentProfile.gender
Usage
1. Restricting access to certain pages by determining their age group
<script>
if(ning.CurrentProfile.age < 18){
window.location.href = '/'; //redirect to home page
}
</script>
(P/S: Samething with ning.CurrentProfile.gender, just use == 'm' or == 'f'
2. Welcome the user
Place this html inside a textbox on home page:
Welcome, <div class="thisusername"></div>.
And, place this script into your custom code(below):
<script>
x$('.thisusername').html(ning.CurrentProfile.fullName);
</script>
3. The above example shows user's name, but what about their photo too?
Same as above, put this into any place you want their thumbnail to show up, HTML:
<div class="userthumb"></div>
Script:
<script>
var sizeofthumb = 50;
x$('.userthumb').html('<img src="'+ ning.CurrentProfile.photoUrl +'&width='+ sizeofthumb +'">');
</script>
This will produce:
<div class="userthumb"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11390430?profile=original"></div>
Produces a thumbnail with size of 50x50px
4. Determine if current user is a guest/member
<script>
if(ning.CurrentProfile === null){
alert('you are guest');
} else {
alert('you are user');
}
</script>
5. Create user profile link
HTML:
<a href="#" class="userprofilelink">My Profile</a>
Script:
<script>
x$('a.userprofilelink').attr('href', ning.CurrentProfile.profileUrl);
</script>
That's it, there are still more ways to use these guys, its all based on your ideas.
Happy Coding.
Replies
Hey Elson, great to see you! Hope everything's going well with your studies. It's not easy but definitely worth the effort in the long run and we'll say "we knew him when....". LOL So help a non--coder like myself: Where will this data appear? In our Google analytics or in our member data? My caffeine hasn't quite kicked in yet so I'm a little fuzzy.
Hi Kos,
these are all javascript variables, you can access them via javascript code in your custom code area. Just try our the scripts(put them into your custom code[below] box)provided you will understand how it works. ;)
P/S for those which has HTML, just place it in a custom textbox anywhere on your network.
Enjoy.
ok.. here's an idea....just thinkin out loud.. how might I add the users location from profile beside their name on photo uploads?
I was considering injecting something like this through language editor:
<div class="thatuserlocation"></div>
<script>
x$('.thatuserlocation').html(ning.CurrentProfile.location);
</script>
would this work?
i guess not..
oops ok I somehow copied a period . that I didn't need. ok here's how it looks.
You rock Elson. Thanks man. I am still waiting for somebig news from your end. (Erewards for Ning3.0).
this is a wonderful tip Elson! It makes me wonder if something similar might be accomplished with a member map (ie. pulling in profile photo to fusion table).. hmmm
any thoughts?
Hi there!
There are several codes presented in teh tip, which one are you trying to use?
Best wishes,
Ning Team.
Hi there!
There is no such thing as alerts on 3.0. Since you have shared the screenshot from 2.0 such functionality or block could be only created on 3.0. As there are only links presented you can place the HTML block on the page where you wish this block to be shown and make sure that it would be shown to the sign in members only. After just place the links to the friends, inbox, sign out, and the settings, if necessary you can add pictures to each link. The plus of this approach is that you can accomplish everything without coding :-)
Best regards,
Ning Team.
Hi there!
I'm not sure what exactly are you trying to do, where the picture should be added exactly? Should it be the picture of the logged in as a member or it should be the list of pictures of all your members?
Best wishes,
Ning team.