Chatter:follow, its limitation and Hacky solution:

Building an Intranet application in Salesforce is one of my favourite areas and so far I have worked on more than 4 projects where we built a nice looking responsive Intranet application. Few clients decided to go fully custom and few decided to have the native look & feel with minimal code. For any Intranet, collaboration is the key and Salesforce gives us Chatter for it. Chatter is Facebook for Salesforce users and in last few years it got enhanced with addition of many new features.

To get in touch and stay connected in Intranet, we need to follow people or record so we know what's happening with them. Salesforce gives us standard VF component {{chatter:follow}} for it. The issue with this component is, we can't use it more than once on a page for same entity and that's the rude one when you build an Intranet page which had many components and contents are dynamically driven.

E.g In a page we have two widgets which shows, Upcoming Birthdays and Recent Recruits list. Now both the widgets could display same user and if standard {chatter:follow} component is being used, it will throw an error as:

Error: Multiple chatter:follow components are referring the same entity. 

To overcome this issue, one approach is to go fully custom and build own chatter follow component using custom styles(image/icons) and Apex handler method to create/delete EntitySubscription record. However, this would allow us to use it more than once on a page for same entity but create another issue of syncing. If you used this twice or more on same page, all references of same entity need to be in sync. For any entity, there would be two state Follow and Unfollow. If user presses a Follow button on one place then all references on the same page should get turned into Unfollow now. There is a way to do this by creating a JavaScript event broadcast & listener but that's too costly solution for it. To solve the core issue and avoid costly solutions, I created a custom component using Salesforce standard methods and elements what they use themselves. However, it’s a hack and could be broken, possibly, when Salesforce decides to change its own implementation but as of now this had been used in many projects and still working. Below is the code:

Above component will work even with standardStylesheets="false",showHeader="false" and this could be used multiple times without any issue of syncing as Salesforce handles that syncing part. These are three attributes of this component which need to be set while using it:

• entityId = This would be Id of User/Record which need to be followed. E.g 00590000004OupA
• networkId = This would be the Id of the network in which the container page would be running. For internal Salesforce it should be set as 000000000000000 and for community their Network Id should be passed.  
• activityType = This need to be set on load and then rest would be taken care by component. Possible value is follow or unfollow. This could be decided by querying the EntitySubscription object for the entity in context. 

Here is the code example of using it.

Now the one important part is, to make this hack work we should have any one of the standard chatter component present on the page. This requires to instantiate {{SfdcApp.Chatter}} class so {{SfdcApp.Chatter.SubscribeButton}} method will work. We can simply add one place holder (any chatter standard component) with some realistic entityId and make that block display none. P.S. All Ids are of my Dev org Ids, you need to replace them with actual while using it. This hack might not work in Lightning experience as it has not been tested there. Other hacks: - Similarly custom screen could be built for for Join/leave the chatter group with hacks using SfdcApp.ChatterGroupMembership.join() and SfdcApp.ChatterGroupMembership.leave(). - Similar way, we have a method for like/unlike Feed post or Feed comment as well. Try to see them using inspect element :)