How to re-use the chatter follow link

Question

GENERAL IDEA

I'm trying to search for a way on how to reuse the follow link (please see image below):

Brief description of planned usage:

• The follow link is the first field in a table
• If the follow button is clicked, that record will be followed by the currently logged in user

So far, I was able to make it work by using this:

<div class="zen">
    <div class="zen-pts" data-chatter-widget="subscribeBtn" data-sfdc-entity-id="{!task.projectTask.Id}" data-sfdc-network-id="000000000000000" onclick="SfdcApp.Chatter.SubscribeButton.onClick(event);" data-uidsfdc="340">
        <span class="zen-media zen-mediaExt" data-chatter-subscribe="1" style="display: {!IF(task.isFollowed, 'none', 'inline')};">
            <a href="javascript:void(0);" class="zen-mrs zen-img">
                <img src="/s.gif" alt="Follow this task to receive updates in your feed." width="12" height="1" class="chatter-icon chatter-followIcon" style="margin-right: 0.25em;" title="Follow this task to receive updates in your feed." />
            </a>
            <span class="zen-mediaBody">
                <a href="javascript:void(0);" title="Follow this task to receive updates in your feed.">
                    Follow
                </a>
            </span>
        </span>
        <span class="zen-media zen-mediaExt" 
              onblur="SfdcApp.Chatter.SubscribeButton.onHover(event, false)" 
              onfocus="SfdcApp.Chatter.SubscribeButton.onHover(event, true)" 
              onmouseout="SfdcApp.Chatter.SubscribeButton.onHover(event, false)" 
              onmouseover="SfdcApp.Chatter.SubscribeButton.onHover(event, true)" 
              data-uidsfdc="341" 
              style="display: {!IF(task.isFollowed, 'inline', 'none')};">

            <img src="/s.gif" 
                 alt="Stop following this task to stop receiving updates in your feed." 
                 width="12" 
                 height="1" 
                 class="chatter-icon zen-mrs chatter-checkedIcon zen-img" 
                 style="margin-right: 0.25em;" 
                 title="Stop following this task to stop receiving updates in your feed." />

            <span class="zen-mediaBody">
                Following
                <a href="javascript:void(0);" class="zen-mls zen-imgExt" data-chatter-subscribe="0" title="Stop following this task to stop receiving updates in your feed.">
                    <img src="/s.gif" 
                         alt="Stop following this task to stop receiving updates in your feed." 
                         width="12" 
                         height="1" 
                         class="chatter-icon chatter-unfollowIcon" 
                         style="margin-right: 0.25em;" 
                         title="Stop following this task to stop receiving updates in your feed." />
                </a>
            </span>
        </span>
    </div>
</div>

But there is a catch. It only works when the enhancedlist tag is added in the same page as well.

My understanding is, the enhancedlist component contains scripts that makes the follow link work.

Now, the QUESTION:

1. How will I make the follow link work without the enhancedlist component?
2. Can anyone point to me where to find the scripts that would make the follow link work with or without the enhancedlist component added on the same page?
3. If possible, I am willing to crack open the enhancedlist component and study how it works under the hood, my problem is, I have no idea where to start.

What I've Done So Far

• I sifted through the stylesheets and scripts in the page where the follow link is working. Then on a new clean page, I copy-pasted all of the scripts and styles to see which of those will make the follow link work, but to no avail.
• Since it's ambitious to use the whole "zen" div tag, I opted to use the stripped down version where only the "check" and the "plus" icons are visible, and only an anchor tag is involved, but again, to no avail.

Answer 1

This isn't exactly an answer to your question; it's more of an alternative...

In a VF page I have 2 Remoting calls:-

function unfollowHandler(item){
  Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.ctrlMetro.unFollowItem}', item.id, userId, unfollowReturnHandler);
return false;
}

function followHandler(item){
    Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.ctrlMetro.followItem}', item.id, userId, followReturnHandler);
    return false;
}

Which are used by 2 icons on a page (toggled based on current follow status)

<img id='imgFollow' onClick="followHandler(this); return false;"  title="click to follow" style="height:16px; width:16px; display:none;" src="{!URLFOR($Resource.StatusIcons,'error_icon.png')}"/>
<img id='imgUnfollow' onClick="unfollowHandler(this); return false;"  title="Following: click to unfollow" style="height:16px; width:16px; display:none;" src="{!URLFOR($Resource.StatusIcons,'check_icon.png')}"/>

In my controller I have 2 simple methods to update the EntitySubscription records which hold the follow status

@RemoteAction
    global static string unFollowItem(string itemId, string userId){
        try{

        EntitySubscription es = [select id from EntitySubscription where parentId=:itemId and subscriberId=:userId limit 1000];
        delete es;
        return itemId;
        }catch(System.Exception ex){
            system.debug(ex);
            return 'error';
        }

        return 'error';
    } 

    @RemoteAction
    global static string followItem(string itemId, string userId){
        try{
        EntitySubscription es = new EntitySubscription(parentId=itemId, SubscriberId=userId);
        insert es;
        return itemId;
        }catch(System.Exception ex){
            system.debug(ex);
            return 'error';
        }

        return 'error';
    }  

When the (un)followReturnHandler is fired from the return of the remoting call I update the visibility of the icon I render, in your case the X and {tick} icons.

With a little tweaking this should give you a solution. FYI- I have this built into an appexchange product called Metro.