Introducing the Followers module - Part 1

Friday, November 28th, 2008

The Followers module allows you to create relationships between members within ExpressionEngine. In social networking websites this is typically known a having Friends, Followers or Connections.

An example of its usage might be the easiest way to see its capabilities.

The basics

To get a quick overview of the module, we’ll create a list of all registered members and provide a facility to follow or stop following them. Start by creating a new Template Group called followers, and add this to the index template:

{exp:ajw_followers:display show="all" orderby="screen_name" sort="asc" group_id="5"}
	<ul class="follow">
			{screen_name} {simple_follow}

<p>This will display a list of all users. If the person viewing the page is logged in, the <code>{simple_follow}</code> variable will be replaced by a button allowing the current user to add or remove the person to their list of friends.</p>

<p><img src="/images/uploads/followers_index.png" /></p>

<p>The button will display follow or remove as appropriate for the member. These labels can be changed.</p>

<p>The list can be sorted in different ways (eg, <code>orderby=“join_date”</code>) and the list of members can be limited to specific member groups (you probably don’t want your Super Admin account showing).</p>

<p>As well as making the standard member variables available (eg, screen_name, username, email) you can also access any custom member variables that you have set up.</p>

<h3>Adding a profile page</h3>

<p>You’ll probably want to create a more friendly way to view member’s profiles, so create a <code>profile</code> template in the <code>followers</code> template group.</p>

<p>We can display some standard member data first, using the built-in <a href="">exp:member:custom_profile_data tag</a>:</p>

<pre><code>{exp:member:custom_profile_data member_id="{segment_3}"}


<p>{if avatar}</p><p><img class="border" src="{avatar_url}" width="{avatar_width}" height="{avatar_height}" alt="{screen_name}'s avatar" /></p><p>{/if}<br /></p><p><strong>Email:</strong> {email}</p>
<p><strong>Location:</strong> {location}</p>

<p>{information} {!-- custom member variable --}</p>


<p>and then we can add some details about the member’s friendships:</p>

<p>	<strong>Following:</strong>
	{exp:ajw_followers:display show="following" member_id="{segment_3}" orderby="screen_name" sort="asc"}
	{if no_members}No one{/if}
	{members backspace="3"}
	<a href="{path=followers/profile}{member_id}">{screen_name}</a>, 

	{exp:ajw_followers:display show="followers" member_id="{segment_3}" orderby="screen_name" sort="asc"}
	{if no_members}No one{/if}
	{members backspace="3"}
	<a href="{path=followers/profile}{member_id}">{screen_name}</a>, 

The first block displays the people that the member is following, the second block shows the people following this member.

Note, the use of the {segment_3} variable. When a template is called its URL segments are converted into variables (see URL Segment Variables for more details).

If this template called in the form:[id of a member]

then the {segment_3} variable will be converted into a member’s id value which can be used in the template’s tags.

Modify the original index template to make the members’ name link to their profile:

<a href="{path='followers/profile'}{member_id}">{screen_name}</a> {simple_follow}

Which gives us a very basic follower/friendship system within ExpressionEngine.

In future parts of this introduction we’ll show some of the more advanced features of the module, such as as follow/unfollow confirmation page, email notifications and the ability to ‘block’ followers.

Part 2 is available here.