iFinity Blogs 

Turn your DotNetNuke site into a Social Network in 10 minutes

by Bruce Chapman on Tuesday, July 31, 2012 9:55 PM

Hopefully by now, lots of people have downloaded and looked at DotNetNuke 6.2, which allows you to build a Social Network out of the box. 

One thing, however, that is missing from the DNN 6.2 upgrade experience is the conversion of an existing DNN site into having any of the Social features.  I decided to run the upgrade on this site, and to reconfigure the entire membership area so that it matched roughly the same configuration as an out-of-the-box DNN 6.2 install.

So get your site all upgraded to 6.2, allocate 10 minutes of time*, and socialise your site.

*estimate time.  Your mileage may vary !

Step 1 : Delete all your existing User Profile page modules.

I’ve found it’s easier to just wipe the slate clean of existing modules and start again.  Pre DNN 6.2 user profiles were more about having a private page where you could set your details, check messages and other functions.  I just delete these old modules and start again.  You don’t lose any data, because the modules access system tables where the data is stored.

Step 2 : Add the User Profile modules:

This step creates the basic structure of the user profile modules on the user profile page.

  1. Add a ‘View Profile’ module to a side pane
  2. Add a ‘View Profile’ module to a center pane
  3. Add a ‘Journal’ module to a center pane
  4. Add a ‘Console’ module to a side pane
  5. Add a ‘Member Directory’ module to a side pane

Here’s what you should end up with:


Note : the Member Directory module hides itself for the current user.  You may have to view the profile of another user to see the module.

Step 3 : Add the extra pages that make up a full user profile:

In this step, you create the structure for the various pages that host the profile-related modules that create the full User Profile.

  1. Add a page called ‘My Profile’ as a child of your User Profile page, and set permissions to ‘All Users’
  2. Add a page called ‘Friends’ as a child of your User Profile page, and set permissions to ‘All Users’
  3. Add a page called ‘Messages’ as a child of your User Profile page, and set permissions to ‘All Users’


Step 4 : Configure the User Profile modules

In this step, you’re going to configure the display of the profile information for public viewing, and configure the ‘Console’ module to provide a menu to navigate between the profile pages.

  1. Go to the module settings for the ‘ViewProfile’ module on the center pane of the User Profile page.   This will become the place where the Display Name of the member will be shown.
  2. On the ‘Page Settings’ tab,  choose a Module Container that doesn’t have a title. (if you have one)
  3. Change the module Title to ‘Display Name’
  4. On the ‘View Profile Settings’ tab, add this template code:

    <div id="UserDisplayNameHeader">
  5. Click Update to save and close the module settings.
  6. Go to the module settings for the 'ViewProfile' module on the side pane of the User Profile page.  This will become the place where the user profile photo is shown.
  7. On the ‘PageSettings’ tab, choose a module container that doesn’t include the title (if you have one).
  8. Change the Module Title to ‘Profile Photo’
  9. On the ‘View Profile Settings’ tab, add this template code:

    <div id="UserProfileImg">
    <span><img alt="Profile Avatar" class="ProfilePhoto" width="120" height="120" src="[PROFILE:PHOTO]" /></span>
    <div class="UserProfileControls">

  10. Click update to save and close the module settings
  11. Go to the module settings for the ‘Console’ module on the User Profile page.   This will become the in-page menu for the User Profile pages.
  12. Change the module Title to ‘Menu’
  13. In the ‘Console Settings’ tab, set these value:
    • Mode : Profile
    • My Profile : ‘All Users’
    • Friends : ‘Friends’
    • Messages : ‘User’
    • Default Icon Size : ‘No Icons’
    • Allow Icon Resize : unchecked
    • Default View : ‘Simple View’
    • Allow View Change : unchecked
    • Show Tooltip : unchecked
    • Width : empty
  14. Click update to save and close the module settings.
  15. Go to the module settings for the ‘Member Directory’ module.
  16. Change the module Title to ‘Actions’
  17. Choose a skin container for the module that contains no title
  18. On the ‘Member Directory Settings’ tab, choose these options:
    • Item Template : Leave default
    • Alternate Item Template : Leave default
    • Enable Popup : unchecked
    • Popup Template : leave default
    • Filter by:  User
    • Sort Field : Display Name
    • Sort Order : Ascending
    • Display Search : unchecked
    • Search Fields : leave default
    • Disable Paging : checked
  19. Click update to save and close the module settings.

Step 5 : Configure the My Profile Modules

This step entails adding more modules, and copying over some of the existing modules on the ‘My Profile’ page, to give the illusion of only some of the panes on the page changing (by leaving the display name and profile picture in the same place)

  1. Navigate to the ‘My Profile’ page by clicking on it in the ‘Menu’ module you have configured.
  2. Using the ‘Add Existing Module’ function of the DNN control panel, select the existing page as ‘User Profile’, and the existing module as ‘Display Name’.  Choose the Center Pane as before, and add the module.
  3. Again, using the ‘Add Existing Module’ function, copy the ‘Profile Photo’ module to the Side Pane.
  4. Repeat the ‘Add Existing Module’ action,  for the ‘Actions’ module to the Side Pane
  5. Finally, repeat the ‘Add Existing Module' action, this time copying the ‘Menu’ module to the Side Pane.
  6. You should now have a layout that mimics the ‘User Profile’ page.  However, you may need to go into the module settings of the Profile Modules and re-copy the settings for container, module title and the templates as shown in Step 4 above.
  7. Using the ‘Add New Module’ function, add another ‘View Profile’ module to the center pane. 
  8. Go to the Module Settings for the newly added module, and set the module title to ‘About Me’.
  9. Choose a container for the ‘About Me’ module to use one with a module title (if you have one)
  10. In the ‘View Profile Settings’ tab, add this template code:

    <div class="pBio">
            <h3 data-bind="text: AboutMeText"></h3>
            <p data-bind="html: Biography"></p>
            <div class="pAddress">
            <h3 data-bind="text: LocationText"></h3>
            <p><span data-bind="text: Street()"></span><span data-bind="visible: Street().length > 0"><br/></span>
            <span data-bind="text: Location()"></span><span data-bind="visible: Location().length > 0"><br/></span>
            <span data-bind="text: Country()"></span><span data-bind="visible: Country().length > 0"><br/></span>
            <span data-bind="text: PostalCode()"></span>
            <div class="pContact">
            <h3 data-bind="text: GetInTouchText"></h3>
            <li data-bind="visible: Telephone().length > 0"><strong><span data-bind="text: TelephoneText">:</strong> <span data-bind="text: Telephone()"></li>
            <li data-bind="visible: Email().length > 0"><strong><span data-bind="text: EmailText">:</strong> <span data-bind="text: Email()"></li>
            <li data-bind="visible: Website().length > 0"><strong><span data-bind="text: WebsiteText">:</strong> <span data-bind="text: Website()"></li>
            <li data-bind="visible: IM().length > 0"><strong><span data-bind="text: IMText">:</strong> <span data-bind="text: IM()"></li>
            <div class="dnnClear"></div>  

  11. Uncheck the ‘Include Edit Button’ for this module.
  12. Click update to save and close the module settings

Step 6 : Configure the ‘Friends’ page. 

If you can’t see it in the ‘Console’ Menu, then that’s because you’re not looking at the user profile page with the context of a user (ie, yourself).  That’s OK, go to the Admin->Pages page, and navigate directly from there.

  1. Repeat items 1-6 from Step 5 above.  This will recreate the profile photo/display name/ console menu layout of the base User Profile page on the Friends page
  2. Add a new ‘Member Directory’ module to the ‘Friends’ page using the ‘Add New Module’ function.  Add this to the Center Pane of your skin.
  3. Go to the Module Settings for the Member Directory module, and change the title to ‘Friends’.
  4. Go to the ‘Member Directory Settings’ for the Member Directory module, and copy these settings:
    • Item Template : leave as default
    • Alternate Item Template : leave as default
    • Enable Popup : checked
    • Popup Template : leave as default
    • Filter By : ‘Relationship’  -> ‘Friends’ in the drop-down
    • Sort Field : Display Name
    • Sort Order : Ascending
    • Display Search : unchecked
    • Search Fields 1-4 : leave as default
    • Disable Paging : unchecked
    • Page Size : 20
  5. Click update to save and close the module settings.

Step 7 : Configure the ‘Messages’ page

The messages page contains all the intra-site messages for the member to read and respond to.   Again, this might not be visible if you’re not viewing the Messages page in the context of a current user (even though you are an Admin, you haven’t provided a /userId/xx to the page, to know which User to load.

  1. Should be familiar by now : repeat items 1-6 from Step 5 above.  This recreates the photo/display name/ console menu items on the Messages page.
  2. Add a new ‘Message Center’ module to the Messages page, and put it in the center pane
  3. Go to the Module Settings for the new Message Centre module
  4. In the ‘Permissions’ tab of the Module Settings, uncheck ‘Inherit View Permissions from Page’
  5. Check ‘Registered Users’ and ‘Unverified Users’ as having ‘View Module’ access
  6. Click Update to save and close the module settings


At this point, you should have a functioning User Profile page setup, with Journal posts, Messaging Center and the basic User Profile features like Display Name and User Profile Photo.  The best way to access this is to click on your Display Name which shows the currently logged-in user. 

If the display is not showing up as it should, you might have a problem with your User Profile page.  There is a bug (as noted here) whereby any carriage returns in the User Profile (particularly the ‘biography’) will break the Knockout.js code that loads the profile details.  If you’re affected by this, just edit your profile and remove any page-breaks or carriage returns.

The next problem you might encounter is that Profile information in your site is replaced with ********.  The worst case with this is where the User Profile photo is replaced with a Url of ******** – which obviously isn’t valid and returns a 400 invalid Url, which leaves a ‘broken image’ picture. 

To fix this, you need to synchronise the permissions between your User Profile fields and your User Profile display.

In the templated Html we loaded above (see Step 4, item 4 and 9, and Step 5, item 9) the various template items are loading data from the individual Profiles of users.  Depending on your site-specific user profile fields, some of this information may not be visible to unauthenticated users.   However, by putting it on the profile pages, you’ve exposed the information to either anyone, or at least members of the site.

When this occurs, DNN replaces the details with ***** – which is the correct response.  However, it might not be what you’re expecting.  So, to counter this, you need to line everything up.

To get the User Profile Pages to match the existing User Profile field settings : change the permissions on the ‘ViewProfile’ modules to match by changing the Module Permissions, or, go into the Html template for the ViewProfile module, and remove the particular piece of Html that exposes a User Profile field that is restricted.

To get the User Profile settings to match the User Profile pages, go into the Admin->Site Setting page, and click on the ‘User Account Settings’ tab.  Scroll down to find the ‘Profile Settings’ section, and peruse the list of User Profile fields.  The setting that matters is the ‘Default Visibility’ column.  This can be either ‘AdminOnly’, ‘AllUsers’ or ‘Members’. 

If you want your profile settings to be visible to anyone, change the value to ‘AllUsers’.  If you want it to be visible just to members of the site, choose ‘Members’.  If you want to keep it hidden, leave it at ‘AdminOnly’.

If you’re still having trouble, I recommend gradually removing parts of the Html templates until things start working OK, then adding bits back.  The most likely scenario is that your User Profiles, created in version of DNN when core-integrated Social Networking was a distant pipedream, have some incompatible data or settings.   The best way to handle this is to gradually wind back what is being displayed until it works, which should identify the problem area(s).

Customising your new Social Network

The steps above will give you basic Social Networking functionality.  This allows members to view the profiles of other members, add them as friends, post on their walls, and similar activities.

How you do the rest is really up to you, bearing your site audience in mind.  You can further expand your site by adding Social Groups, Group pages, and more.   You don’t have to stick with the default profile pages as I’ve laid out here – the exercise is really to break down how the social pages appear in a standard DNN 6.2 install, hopefully to remove the mystery on how the pages are put together, and how to replicate that setup.

Don’t forget, if you have Url Master installed on your site, you can enable Vanity User Profile urls, as shown in my recent blog post Vanity Urls for Members in DotNetNuke.

And, if you’re a member on this site, check out my user profile : http://www.ifinity.com.au/Bruce_Chapman – and ‘friend’ me!

Blogs Parent Separator Crafty Code
Bruce Chapman

The craft of writing code. The outcomes from being crafty with code. Crafty Code is tales from the coding bench.

11 comment(s) so far...

Anonymous 8/10/2012

Great walk thru! Just used it to update one of our clients' sites that had been upgraded to 6.2.2 but was missing the social pages/features!<br /><br />This should be added to the DotNetNuke Wiki! Thank you so much!<br /><br />One question about the Div CSS classes, where can we find the CSS styling code for these? Are they in the new DarkKnight Skin?

Bruce Chapman 8/10/2012

@brett - it would depend on the css class you need. If you have a test install with the DarkKnight skin, you could trace the class by using IE Dev Tools, Firebug or Chrome Developer tools. All these will identify where a specific css class originates from.<br /><br />In terms of my example, it includes 'pBio' and 'pAddress' - but I actually can't find any reference to these two classes within any dnn css file or skin. I just copied them from a standard install, so I guess they don't actually do anything.

bizcomit 8/22/2012

Very usefull post, thanks Bruce!<br /><br />Is the Journal Module capable to filter the content based on current page/module-content (like a "comment" module) ?

Bruce Chapman 8/23/2012

@bizcomit : the Journal has the capability to be filtered down to showing specific journal types - this is in the module settings. However, restricting comments to a particular page/module will require posting under a specific journal type - which will require integration with that module. This is what the DNN Blog module has done for 5.0 - which now uses the journal module to display blog comments. I did briefly install that for this blog, but it removes the ability for anonymous posting, which I don't particularly like. Hopefully this is something that is worked around.<br /><br />see here for more details : <a href="http://www.dotnetnuke.com/Resources/Blogs/EntryId/3302/The-DotNetNuke-Journal.aspx" rel="nofollow">www.dotnetnuke.com/Resources/Blogs/EntryId/3302/The-DotNetNuke-Journal.aspx</a><br /><br />

Anonymous 9/18/2012

THANK YOU ! THANK YOU !<br /><br />For your detailed guide. I was trying to do that for a while and failed.<br /><br />One thing: revealing the email of users to registered users via the profile is not such a good idea. <br /><br />Costas

Anonymous 9/21/2012

Just wanted to second this should be on the Dotnetnuke Wiki, most useful :)<br /><br />Craig

Anonymous 11/2/2012

I've been pointed to this article from Chris Paterra's answer to my post on the DNN Q&A. What a great article. Thank you. It's the best documentation I've found in a couple weeks of working on the configuration - on a conversion from an very customized AS set of modules.<br />See:<br /><a href="http://www.dotnetnuke.com/Community/Community-Exchange/Question/2529/social-modules-setup-guide.aspx" rel="nofollow">www.dotnetnuke.com/Community/Community-Exchange/Question/2529/social-modules-setup-guide.aspx</a>

Scott Nash 6/20/2013

Really great post Bruce - super helpful. One thing I noticed it that when I post something in the Journal module, it doesn't show my DNN photo, even though it shows correctly in the Profile Photo / ViewProfile area. Not sure why, it keeps trying to find the image at http://thecreativecosmos.com/profilepic.ashx?userId=1&h=32&w=32 instead of pulling in the DNN Photo link I have. Thanks!

Bruce Chapman 6/21/2013

@scott : the profilepic handler resizes the photo for you (that's what the h=32&w=32) is for. That's why it pulls from that link. If it's not working, I would look into what is wrong with the profilepic handler - you can just request the Url in a browser to see what it comes up with. It may just be a permissions thing- you may not have granted permissions for anonymous views of your profile picture.

Mike Durthaler 7/19/2013

Bruce, I've checked my setup several times but step 13 the Menu module is not displaying the child pages: In the ‘Console Settings’ tab, set these value. I've looked all over, can't find the issue. We're on DNN 7. All else is configuring well. Mode : Profile My Profile : ‘All Users’ <-- not in the menu Friends : ‘Friends’ <-- not in the menu Messages : ‘User’ <-- not in the menu Default Icon Size : ‘No Icons’ Allow Icon Resize : unchecked Default View : ‘Simple View’ Allow View Change : unchecked Show Tooltip : unchecked Width : empty

Bruce Chapman 7/20/2013

@mike : I'm not sure what that could be. I would raise it on the dnn forums at http://www.dnnsoftware.com/forums or on the DNN Q&A. It could be a permissions issue or something similar.

Bruce Chapman
Hi, I'm Bruce Chapman, and this is my blog. You'll find lots of information here - my thoughts about business and the internet, technical information, things I'm working on and the odd strange post or two.
Connect with Bruce Chapman on Google+

Share this page
Get more!
Subscribe to the Mailing List
Email Address:
First Name:
Last Name:
You will be sent a confirmation upon subscription

Follow me on Twitter
Stack Exchange
profile for Bruce Chapman at Stack Overflow, Q&A for professional and enthusiast programmers
Klout Profile