Member Profile Page
From KickApps API Reference
Create Member Profile themes
Member Profile themes are like skins that your members can apply to their profile pages. Follow these steps to create a custom theme for your members.
- Log into the Affiliate Center.
- Browse to Configure > Pages >Member Profile Theme Builder.
- Click Create new Profile page at the top of the page.
- Type a name for your theme in the "Page name" field at the top of the page.
- Modify the style settings throughout the rest of this page (hint: click the link at the top of the page for a diagram that shows which parts of the profile page correspond to the various style settings).
- Click Save.
- To preview your theme, click the "preview" link next to your theme name when the page refreshes. Note: if you're using a Site Styler theme, you must first click the "make default" link next to your theme name before clicking the "preview" link.
- Click "edit" next to your theme name to make any changes, and repeat steps 5-7 until you're finished customizing your theme.
- (Optional) If you'd like all new members to start out with the theme that you've made, click the "make default" link next to it.
Create Member Profile questions
When your members begin customizing their profile pages, one of the first things that they'll see are Member Profile questions. These questions prompt members to share information about themselves and their interests. Choosing and creating relevant questions is a powerful way to set the tone and shape the content of your community. Follow these steps to add Member Profile questions to your community.
- Log into the Affiliate Center.
- Browse to Configure > Pages >Member Profile Questions.
- Enter custom questions in the text fields next to Questions 1-10.
- Select the checkboxes next to any of the pre-defined questions that you'd like to add to your members' profile pages.
- Click Save.
- Your members can now answer these questions by browsing to "my home" > edit my profile. The answers that they enter on this page will be displayed on their (public-facing) Member Profile pages.
Personalized Profile Photos with ImageChef
Member photos ("avatars," in web-speak) breathe life into your site and transform simple profiles into colorful representations of the people who make up your community. We're working with ImageChef to access their great tools for creating custom, personalized images and merge them into your KickApps-powered community.
With this tutorial, we're going to place an ImageChef hyperlink on your member registration page so a new user can open a new window, create a custom ImageChef image, and then upload the image as their profile photo within your community.
To integrate the link into your site, simply:
- Log in to the Affiliate Center.
- Browse to edit your custom header and footer.
- Paste this JavaScript code into the <head></head> section of your Global Page Template (under Configure > Pages). We've commented the code so you can hack on it if you're feeling confident:
<script language="javascript">
function addImageChef(){
// This is your link text
var icMessage = '<br/> Need a photo? ';
icMessage += '<a href="http://www.imagechef.com/ic/product.jsp?pid=kickapps&callbackUrl=';
icMessage += self.location.href;
icMessage += '&siteName=';
// On the next line, replace KickApps with your community name
icMessage += 'KickApps';
icMessage += '" target="_blank">Browse and customize images with your name ';
icMessage += 'at ImageChef</a>. Once you\'ve created your image, return ';
icMessage += 'here to upload it.';
// This is an array of pages that are affected
var icPageIds =
[['login/registerUser.jsp','ka_contentContainer'],['pages/newPhotoUpload.jsp','ka_fieldPhotoUpReq']];
// First, see if this page is one of the affected pages
for (var i=0; i<icPageIds.length; i++){
if (Ka.Info.PAGE == icPageIds[i][0]){
// If it is, let's find the first .ka_Help div, which will hold the link text
var nodes = $(icPageIds[i][1]).getElementsByTagName('div');
for (var i = 0;i < nodes.length;i++){
if (nodes[i].className=='ka_Help'){
nodes[i].innerHTML += icMessage;
break;
}
}
}
}
}
//queue up the function to be ran when the DOM is ready
Ka.addDOMLoadEvent(addImageChef);
</script>
*Note that we're using $ here as a shortcut to document.getElementById
Once the code is in place, a handy link will appear on your member registration and personal profile upload forms, opening a new window with a bunch of ImageChef images to browse and customize. When your members have created and downloaded their image, they simply return to your community and upload it.
You should see more members showing up in your community with creative profile images, more conversations, and a friendlier atmosphere. Speaking of which, if you have a KickApps community and haven't uploaded your own profile photo, stop right now and upload one!
We're continuing to work with ImageChef to streamline this process and add links back to your site from theirs, so the whole experience is even more seamless for your users. Right now we don't support animated profile images, so your members will have to choose "static" images for their profiles. Keep an eye on KickDeveloper for any updates we release to this functionality.
Should we integrate ImageChef more deeply into the KickApps experience? Let us know on the KickDeveloper message boards, we're listening!