Like Gate
Like gates can be added to Facebook tabs allowing two different views to be displayed. One view for Facebook visitors who are not yet fans of the fan page, and another to be displayed after the visitor likes the page.
MVC Approach
To implement a like gate on a MVC based page, the following will guide you on the implementation:
- Add a new Controller for your Facebook Tab, note each tab on your Facebook Fan Page requires its own Facebook Application to be associated with it.
- Add two views, one view that should be displayed to visitors to your Page Tab Applicaiton who have not liked the fan page, and another to visitors who have liked your fan page
- In the example below view shown users who have liked the fan page is named IndexLiked while the non liked version is named Index
- Add the FacebookGraphApiFilter attribute to the controller method and set ForceLogin = false
- Retrieve the SignedRequest object out of the HttpContext Current collection, and confirm that the user has liked the page by checking it's attributes (use the code below for an example)
Express Setup
Note if only use of the Facebook Application you created is to display a tab, you can add all the application settings on the attribute as well:
[FacebookGraphApiFilter(ForceLogin = false,ApiKey ="<keyFromFacebook>", ApplicationSecret = "<secretFromFacebook>", ApplicationId="<appKeyFromFacebook>")]
public ActionResult Index()
{
var signedRequest = (SignedRequest)System.Web.HttpContext.Current.Items["SignedRequest"];
if (signedRequest != null && signedRequest.Page != null && signedRequest.Page.Liked)
{
return View("IndexLiked");
}
return View();
}
Advanced Setup
If this tab is going to use more advanced features from the Facebook Graph API etc and also work as a full application, it is recommened that you set the application settings set through IFacebookCore implementation:
[FacebookGraphApiFilter(ForceLogin = false)]
public ActionResult Index()
{
var signedRequest = (SignedRequest)System.Web.HttpContext.Current.Items["SignedRequest"];
if (signedRequest != null && signedRequest.Page != null && signedRequest.Page.Liked)
{
return View("IndexLiked");
}
return View();
}
Tips
- Be sure to set the following styles on the body element: