Introducing the Followers module - Part 2

Saturday, November 29th, 2008

Part 1 of this short series created a basic friend facility. This part will build on the basics, adding some of the functions popular in such a social networking site.

Confirmation Pages

While the ability to quickly follow or unfollow a member might be desirable, it is more common to get users to confirm their actions.

For our example, we’ll use the profile page for the confirmation step.

First, we’ll remove the quick follow button from the index and use a conditional to display either a follow or remove link:

...
<a href="{path='followers/profile'}{member_id}">{screen_name}</a> 
{if logged_in}
-
{if following}
<a href="{path='followers/profile'}{member_id}">Remove</a> 
{if:else}
<a href="{path='followers/profile'}{member_id}">Follow</a> 
{/if}
{/if}
...

If the user is already following the member, a Remove link is displayed, otherwise a Follow link is shown. Note, the {if logged_in}{/if} is used to hide both links if noone is currently logged in.

In the profile template, we can add a block at the end to add or remove the member to the user’s friends list.

...
{exp:ajw_followers:display show="member" member_id="{segment_3}"}
	{members}
		{follow_form}
		<h4>Confirm</h4>
<p>		{if following}<br /></p><p>You are following this member. Do you want to stop following?</p>
<p>		{if:else}<br /></p><p>Do you want to follow this member?</p>
<p>		{/if}<br />
		{follow_button}<br />
		{/follow_form}<br />
	{/members}<br />
{/exp:ajw_followers:display}</code></p>
</pre>

<p>This again uses the <code>{if following}{/if}</code> conditional, and introduces the <code>{follow_form}{follow_button}{/follow_form}</code>. This can be used to replace the {simple_follow} variable when you require a little more control of how the follow form is generated (the <code>{follow_form}</code> and <code>{/follow_form}</code> variable pair marks the start and end of the form, and the <code>{follow_button}</code> variable outputs the form’s button).</p>

<h3>Thank you page</h3>

<p>By default, when following or unfollowing a member, the user will get a standard ExpressionEngine notification</p>

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

<p>You can redirect the user to a different “thank you” page by adding a <code>return</code> parameter:</p>

<pre><code>{exp:ajw_followers:display show="member" member_id="{segment_3}" return="{path=followers/thanks}{segment_3}"}
...

Email notifications

You can also send email notifications to members when they get added as a friend.

These email notifications are generated from a standard ExpressionEngine template.

As an example, create a new template called email_confirmation:

Subject: {screen_name} is now following you…
{exp:ajw_followers:display show="member" member_id="{follow_id}"}{members}Hi, {screen_name}.{/members}{/exp:ajw_followers:display}

{exp:member:custom_profile_data member_id="{segment_3}"}
{screen_name} is now following you.

Check out {screen_name}'s profile here:

  http://url.com/{member_id}

A custom field goes here… {random_info}

Thanks.
{/exp:member:custom_profile_data}

This template will be covnverted into the email message, and the first line (if preceded with Subject: ) will be used as the email’s Subject line.

Using a template like this allows total flexibility for the contents of the confirmation email.

To tell the follow form to use this template, add the template parameter:

... template="followers/email_confirmation" ...

Summary

So now we have a follow/unfollow confirmation page, with an email confirmation sent to members when they are added as a friend, and a thank you page.

Part 3 explains how to display a list of friends’ entries