Quantcast
Channel: facesharp Wiki Rss Feed
Viewing all articles
Browse latest Browse all 44

Updated Wiki: Facebook Design Patterns

0
0

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:
  1. 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.
  2. 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
    1. In the example below view shown users who have liked the fan page is named IndexLiked while the non liked version is named Index
  3. Add the FacebookGraphApiFilter attribute to the controller method and set ForceLogin = false
  4. 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:
    • margin:0
    • overflow:hidden

Fan Page Tab App Admin Page


    [FacebookGraphApiFilter(CanvasRedirect = true, ForceLogin = true, ResponseType = "code token")]
    public class AdminController : BaseController
    {

        // Check to see if user is admin of page and the app is on the page you expect.
        private bool IsPageAdmin()
        {
            var fbCore = new FacebookCore();
            return fbCore.SignedRequest != null
                   && fbCore.SignedRequest.Page != null
                   && fbCore.SignedRequest.Page.Admin != false
                   && fbCore.SignedRequest.Page.Id == long.Parse(ConfigurationManager.AppSettings["FacebookFanPageId"]);
        }

        public ActionResult Index()
        {
            if (IsPageAdmin())
            {
             ....


Viewing all articles
Browse latest Browse all 44

Latest Images

Trending Articles





Latest Images