Case Study: Social Networking with ExpressionEngine, Part 2

by Ryan Irelan

In this part of the short series of articles on my experience building social networking tools for ExpressionEngine, I will be focusing on the “Friending” functionality built for the Clinician1 website (see previous article on the Networks module for more information).

Along with the ability for users to join networks, the client also required that users are able to connect individually as “colleagues.” This is, as you probably know, basic functionality for any social networking website. We’re not breaking new ground here…except that this type of functionality isn’t built-in to ExpressionEngine.

Well, that isn’t entirely true. There is something in ExpressionEngine called Buddy List (it is mentioned once in the documentation) and is available to users on the default EE My Account template. It’s located under Private Messages and allows you to add other members to a Buddy List.

I could have re-used some of that functionality, but, honestly, it was a lot easier to just build the module from scratch. If I used the Buddy List, I still needed to abstract that out to the front-end templates and add some necessary features (every friend request requires approval, as one example). So, my decision was to not use the Buddy List feature and instead create the Friends module.

The Friends module has one database table, exp_friends, which stores all of the relationships and a status for each relationship (If a user “friends” someone, that relationship isn’t automatically reciprocated. The receiving user has to approve that person as a friend for it be added) and a timestamp should we ever need it in the future.

The EE code for the module is very similar to that of the Network module. To show a list of the currently logged-in user’s friends, their avatars and a button to remove them as friends :

{exp:friends:show}
 {avatar_image}
 {name}
 {remove}
{/exp:friends:show}

This code produces something like this on the Clinician1 website (screenshot from static templates, so as to not reveal actual user information):

A nice overview of the user’s friends with name and avatar and an action button in case you’d like to drop them.

All Clinician1 members can access the profiles of other members and from there add them as friends. For this I created a simple profile tag that outputs a button to add the friend. The code looks like this:

{exp:friends:profile}
 {add_friend}
{/exp:friends:profile}

In a member profile this code produces the “Add as Colleague” button in the screenshot below. I also used it in member search results, so users could easily add a friend right from the search results.

Earlier I mentioned that every time someone adds a friend it generates a friend request that sends an email to the person being “friended.” All users have the ability to approve friend requests and we do that using the following code:

{exp:friends:requests}
 {name}
 {avatar_image}
 {approve}
{/exp:friends:requests}

The display is very similar the screenshot of the friend listing but instead of an “Remove” button there is an “Approve” button.

For the Friends module I didn’t build a control panel interface to manage relationships because it was something that was needed for this project and I’m not sure the practicality of managing those types of relationships from an administrative perspective.

Combined with the Network module I wrote about in Part 1, Clinician1 has a nice set of simple social networking tools that allow members to connect and find others with similar interests.