brandnewbox.co.uk

Home of Andrew Weaver, a uk-based web developer specialised in building high-quality websites

Introducing the Followers module - Part 1

Thursday, November 27th, 2008

Andrew Weaver

Category: , ,

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>
{/exp:ajw_followers:display}

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

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

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

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.

Adding a profile page

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

We can display some standard member data first, using the built-in exp:member:custom_profile_data tag:

{exp:member:custom_profile_data member_id="{segment_3}"}

<h3>{screen_name}</h3>

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

{information} {!-- custom member variable --}

{
/exp:member:custom_profile_data}

and then we can add some details about the member’s friendships:

<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.

Comments

There are no comments yet.

Add a comment

 
Remember my personal information
 
Notify me of follow-up comments?
 

© brandnewbox.co.uk 2004-2008