Get Updates in your Feed ReaderCase Study: Social Networking with ExpressionEngine, Part 2
November 21, 2008
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.
I saw this posted to twitter today, it looks very interesting. We wanted to do something similar with EE a while ago and looked into the buddy list. In the end we ended up building a CI app to fill our needs. I’m going to keep an eye on this and see where it goes.
This is fantastic stuff - great work. Still hoping it will be made available for purchase ;)
Great Article, I’ve noticed the buddy list built into EE before, but I’ve never done anything with it. It seems like one of those items EE may have planned to develop further, but then lost track of.
Anyway, very interesting write up, nice work.
Question: Why did you chose EE over systems with social networking already built in (such as ning, PeopleAggregator etc)? Was this a choice you made, or something the client requested?
Philip, the majority of the site was content-based (postings by users, etc) and for that EE is a great fit.
I did explore plugging in or attaching existing tools (like Ning) but the user experience just wasn’t up to snuff. We needed one unified experience and the best way was to just create the modules right in EE. This way we only had one login per user, one database and we could much more finely control the user experience.
Thanks for sharing your insight regarding expressengine
nice post. thanks for sharing, looking forward to try it soon
Great info, thanks
I’m looking to try and add an “add / remove buddy” block and a listing of the currently viewed users’ buddies on a page. I’m working on user_profile.tpl.php and have brought in a bunch of views to do this already. I can’t seem to bring in the buddies. Can anyone direct me to some tutorials on this or offer some assistance? Cheers, Adam
Thanks for sharing your insight regarding expressengine.
Hi, nice study! Will you release these modules in the future or was it only a case study?
My current semesterproject is something like your study, so i’m very interested on it…