Custom chatter Follow component

ChatterFollow-component.component

<apex:component>
    
    <apex:attribute name="entityId" type="string" description="This would be Id of User/Record which need to be followed" required="true"/>
    <apex:attribute name="networkId" type="string" description="This would be the Id of the network in which the container page would be running" required="true"/>
    <apex:attribute name="activityType" type="string" description="To render the right block on load based on entity is already followed or not" required="true"/>
    
    <div class="zen">
    <!-- Two important params here which would be dynamic based on context and usage 
        
        1. data-sfdc-entity-id: This need to be set as User/Record Id which need to be follow/un-follow
        2. data-sfdc-network-id: This should be set to Network id in which the page would be running. For internal Salesforce it would be 000000000000000 and for community this should be set to Network Id of it. 
    -->
    <div data-chatter-widget="subscribeBtn" data-sfdc-entity-id="{!entityId}" data-sfdc-network-id="{!networkId}" onclick="SfdcApp.Chatter.SubscribeButton.onClick(event);">
        <!-- Follow block -->
        <span class="zen-media zen-mediaExt" data-chatter-subscribe="1" style="display:{!IF(activityType='follow', 'block', 'none')};">
            <a href="javascript:void(0);" class="zen-img zen-mrs">
                <img src="/s.gif" alt="Follow this user to receive updates in your feed." width="12" height="1" class="chatter-followIcon chatter-icon" style="margin-right: 0.25em;" title="Follow this user to receive updates in your feed." />
            </a>
            <span class="zen-mediaBody">
                <a href="javascript:void(0);" title="Follow this user to receive updates in your feed.">Follow</a>
            </span>
        </span>
        <!-- End: Follow block-->
        
        <!-- unfollow block --> 
        <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)" style="display:{!IF(activityType='unfollow', 'block', 'none')};">
            <img src="/s.gif" alt="Stop following this user to stop receiving updates in your feed." width="12" height="1" class="zen-mrs zen-img chatter-checkedIcon chatter-icon" style="margin-right: 0.25em;" title="Stop following this user to stop receiving updates in your feed." />
            <span class="zen-mediaBody">
                Following<a href="javascript:void(0);" class="zen-imgExt zen-mls" data-chatter-subscribe="0" title="Stop following this user to stop receiving updates in your feed.">
                <img src="/s.gif" alt="Stop following this user 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 user to stop receiving updates in your feed." /></a>
            </span>
        </span>
        <!--  unfollow block end -->
    </div>
</div>
    
</apex:component>