How to: Follow documents and sites by using the .NET JavaScript object model in SharePoint 2013

Scenario is here we will create one sample user control, which will have simple one star which we can place on our page to follow the site/documents using JavaScript object model.

1. Visual Studio 2012, SharePoint project.
2. Add new item, web user control and give a name : favoriteControl.ascx
3.

 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FavoriteControl.ascx.cs" Inherits="test.FavoriteControl" %>  
 <div class="favIcon" runat="server" id="favoriteLink"><a href="#" runat="server" id="favorite" onclick="javascript:Follow();"></a></div>  

4. Add Script file to project, named favoritehelper.js and paste the following code:

 $(document).ready(function () {  
   // Ensure that the SP.UserProfiles.js file is loaded before the custom code runs.  
   //SP.SOD.executeOrDelayUntilScriptLoaded(loadUserData, 'sp.userprofiles.js');  
   SP.SOD.executeOrDelayUntilScriptLoaded(function () {  
     SP.SOD.executeOrDelayUntilScriptLoaded(function () {  
       SP.SOD.executeOrDelayUntilScriptLoaded(isAlreadyFollowed, 'SP.UserProfiles.js');  
     }, 'SP.js');  
   }, 'SP.runtime.js');  
 });  
 var clientContext;  
 var socialActor;  
 function isAlreadyFollowed() {  
   clientContext = SP.ClientContext.get_current();  
   socialManager = new SP.Social.SocialFollowingManager(clientContext);  
   socialActor = new SP.Social.SocialActorInfo();  
   var siteContentUrl = window.location;  
   socialActor.set_contentUri(siteContentUrl);  
   var result = socialManager.isFollowed(socialActor);  
   if (result = true) {  
     document.getElementById('ctl00_PlaceHolderMain_favoriteControl1_favoriteLink').className = 'favIconSelected';  
     //alert('Alreadyfollowed');  
   }  
   else {  
     document.getElementById('ctl00_PlaceHolderMain_favoriteControl1_favoriteLink').className = 'favIcon';  
     // alert('alreadynotfollowed');  
   }  
 }  
 function Follow() {  
   if (!isAlreadyFollowed()) {  
     clientContext = SP.ClientContext.get_current();  
     socialManager = new SP.Social.SocialFollowingManager(clientContext);  
     var siteContentUrl = window.location;  
     var siteActorInfo = new SP.Social.SocialActorInfo();  
     siteActorInfo.set_contentUri(siteContentUrl);  
     //4 type is for set of site  
     siteActorInfo.set_actorType(4);  
     socialManager.follow(siteActorInfo);  
     document.getElementById('ctl00_PlaceHolderMain_favoriteControl1_favoriteLink').className = 'favIconSelected';  
     alert('Added into your follow list');  
   }  
 }  
 function StopFollowing() {  
   clientContext = SP.ClientContext.get_current();  
   socialManager = new SP.Social.SocialFollowingManager(clientContext);  
   var siteContentUrl = window.location;  
   var siteActorInfo = new SP.Social.SocialActorInfo();  
   siteActorInfo.set_contentUri(siteContentUrl);  
   siteActorInfo.set_actorType(4);  
   socialManager.stopFollowing(siteActorInfo);  
 }  
 function GetFollowers() {  
   clientContext = SP.ClientContext.get_current();  
   socialManager = new SP.Social.SocialFollowingManager(clientContext);  
   var followersArray = socialManager.getFollowers();  
   return followersArray;  
 }  
 function GetFollowed() {  
   clientContext = SP.ClientContext.get_current();  
   socialManager = new SP.Social.SocialFollowingManager(clientContext);  
   var followedArray = socialManager.GetFollowed(4);  
   return followedArray;  
 }  
 function GetFollowedCount() {  
   clientContext = SP.ClientContext.get_current();  
   socialManager = new SP.Social.SocialFollowingManager(clientContext);  
   var count = socialManager.getFollowedCount(types)  
 }  

5. Add New web form and  register the control and the necessary script references.

follow the code:

 <%@ Register Src="~/Widgets/FavoriteControl.ascx" TagName="FavoriteControl" TagPrefix="gims" %>  
 <asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">  
 <script src="/_layouts/15/sp.runtime.js" ></script>  
     <script src="/_layouts/15/sp.js" ></script>  
     <script src="/_layouts/15/sp.UserProfiles.js" ></script>  
    <script src="/Scripts/jquery-ui.js"></script>  
   <script src="/Scripts/jquery.min.js"></script>  
 <script src="/Scripts/FavoriteHelper.js" ></script>  
 </asp:Content>  

and in your content area add the control

 <div>  
    <gims:FavoriteControl  ID="favoriteControl1" runat="server" />  
 </div>  

That's it! we are good to go, on page will get star, if it is already followed will be get selected by default, if not than on click of star it will get followed.

Reference link:

http://msdn.microsoft.com/en-us/library/jj667824.aspx