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">
	{members}
		<li>
			{screen_name} {simple_follow}
		</li>
	{/members}
	</ul>
<p>{/exp:ajw_followers:display}</code></p>
</pre>

<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="http://www.expressionengine.com/index.php?affiliate=brandnewbox&page=/docs/modules/member/custom_profile_data.html">exp:member:custom_profile_data tag</a>:</p>

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

<h3>{screen_name}</h3>

<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>{/exp:member:custom_profile_data}</code></p>
</pre>

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

<pre><code>
<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>, 
	{/members}
	{/exp:ajw_followers:display}
</p>

<p>
	<strong>Followers:</strong>
	{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>, 
	{/members}
	{/exp:ajw_followers:display}
</p>

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:

  http://www.example.com/index.php/followers/profile/[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.