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, ApplicationSecret = "<secretFromFacebook>", ApplicationId="<appKeyFromFacebook>")]
public ActionResult Index()
{
var facebookCore = new FacebookCore();
var signedRequest = facebookCore.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 facebookCore = new FacebookCore();
var signedRequest = facebookCore.SignedRequest;
if (signedRequest != null && signedRequest.Page != null && signedRequest.Page.Liked)
{
return View("IndexLiked");
}
return View();
}
WebForms Approach
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If Not Page.IsPostBack Then
Dim myFacebookCore = New FacebookCore()
Dim fbApiFilter = new FacebookGraphApiFilter();
Dim mySignedRequest As SignedRequest = fbApiFilter.GetSignedRequest(Request.Form["signed_request"],facebookCore.ApplicationSecret)
If mySignedRequest IsNot Nothing AndAlso mySignedRequest.Page IsNot Nothing AndAlso mySignedRequest.Page.Liked = True Then
Server.Transfer("~/facebook/myTab/fanOnlyContent.html")
Else
Server.Transfer("~/facebook/myTab/publicContent.html")
End If
End If
End Sub
Tips
- Be sure to set the following styles on the body element: