Summary

The Facebook helper is designed to integrate your WebMatrix site with Facebook, making it possible to add the Facebook Social Plugins, such as Like button, Facepile, Comments, Login Button and Like Box, among others, in a few simple steps. It also allows you easily integrate your site with the Facebook login mechanism, so users do not have to create another account just to access your website.
Depending on the social plugin you want to use, the helper requires that you call an initialization method. Check the table below and if the social plugin you want to use does not require initialization see the Getting Started in 60 seconds (without initialization) section, otherwise see the Getting Started in 60 seconds (with initialization) section.
 
Social Plugin Initialization Required
Like Button No
Activity Feed No
Recommendations No
Like Box No
Login Button Yes
Facepile Yes
Comments Yes
Live Stream Yes

Getting started in 60 seconds (without initialization)

These steps will guide you on how to display a Facebook Like button into your Web site:

  1. Add the bolded line from below in the page where you want to show the Like button, in this case for liking the Microsoft Web home page:

    <!DOCTYPE html>
    <html>
    ...
    <body>
    ...
    @Facebook.LikeButton("http://www.microsoft.com/web")
    ...
    </body>
    </html>

Getting started in 60 seconds (with initialization)

These steps will guide you on how to display a Facebook Comments box into your Web site:

  1. Make note of the Site URL where your Microsoft WebMatrix site is running (click the Site workspace | Settings page).
    wm-mysite-settings[6]
  2. Register a new Facebook application and make note of the Application Id and Secret. (Check http://www.facebook.com/developers for instructions on how to create a Facebook application).

    FBCreateApplication[6]

  3. When creating your Facebook application, make sure you set the Site Url to http://localhost:[port], replacing the [port] placeholder with the port where your local WebMatrix site is running.

    FBCoreSettings[6]

  4. Add the following line to the _AppStart.cshtml page of your WebMatrix Site (create this page if it does not exist). Replace the placeholders with your Application Id and Secret.

    @{
    Facebook.Initialize("{your App ID}", "{your App Secret}");
    }

  5. Add the highlighted lines from below in the page where you want to show the Comments box:
    <!DOCTYPE html>
    <html @Facebook.FbmlNamespaces()>
    ...
    <body>
    @Facebook.GetInitializationScripts()
    ...
    @Facebook.Comments()

    ...
    </body>
    </html>

Note: Some of the Facebook Social Plugins require that your site is published into a public address where others can use it; see the helper reference for a complete list. To do this you can try some of the *Free* WebMatrix Hostings providers (also check this tutorial on publishing with WebMatrix).

Running the Facebook Helper Sample

Optionally, you can download a sample WebMatrix web site where you can see the helper in action, and also see how to use the helper to integrate the Facebook login mechanism with the membership model of your web site. To download and run it with Microsoft WebMatrix, follow these steps:

  1. Download the sample site from the Downloads section.
  2. Extract the content of the package, right-click the Facebook.Bakery folder and select 'Open as a Web Site with Microsoft WebMatrix'. This will open the Bakery sample web site with WebMatrix.
  3. Change your WebMatrix site settings to match the Site Url you have configured in your Facebook application settings.

    wm-site-settings

  4. Open the _AppStart.cshtml page, uncomment the following line and replace the placeholders with your Facebook Application Id and Secret.

    @{
    Facebook.Initialize("{your App ID}", "{your App Secret}", "bakery");
    ...
    }

  5. Click on the Run button located in the Home tab.
  6. Play with the sample!

Helper Reference

The helper ships with the following files:

  • The Facebook.cshtml file located into the App_Code folder
  • A Login.cshtml file under the Facebook folder that will handle user login when using his Facebook account.

Helper Properties

Note: Current version does not support the full Facebook API.

static string AppId
  Gets or sets the Facebook application id.
static string AppSecret
  Gets or sets the Facebook application secret.
static string MembershipDBName
  Gets or sets the name of the database used for storing the membership data.
static string Language
  Gets or sets the code of the language used to display the Facebook plugins.

 

Helper Methods

  Method Requires Initialization Requires Publishing
static void Initialize (string appId, string appSecret, [string membershipDBName]) - -
  Initialize the helper with your Facebook application settings.
If the 'membershipDBName' parameter is specified, Facebook membership integration will be enabled, allowing users to register and associate their Facebook user account (identified with the e-mail) with your site membership and the WebSecurity helper. In this case, the helper will initialize the WebSecurity WebMatrix helper automatically (if not done previously) and the store the membership information in the 'membershipDbName' database.
   
@helper GetInitializationScripts() - -
  Initialize the Facebook JavaScript SDK to be able to support the XFBML tags of the social plugins.    
UserProfile GetFacebookUserProfile() Yes (calling GetInitializationScripts() not required)
No
  Retrieves the Facebook profile of current logged in user. See the section at the bottom of the page for details on the information you can access.    
static void AssociateMembershipAccount (string userName) Yes (calling GetInitializationScripts() not required )
No
  Associates the specified user name (e.g. email, depending on your membership model) with the current Facebook User Id from the logged user. See the Facebook.Bakery sample Web site for an example on how to use this method.    
static void MembershipLogin()    
  Creates an authentication cookie with the current Facebook logged User name and returns 'true'. If the membership user name cannot be retrieved returns 'false' This method can be called after postback to customize page redirection. Yes (calling GetInitializationScripts() not required) No
@helper LoginButton (string registerUrl, [string returnUrl], [string callbackUrl] [string buttonText], [bool autoLogoutLink], [string size], [string length], [bool showFaces], [string extendedPermissions]) Yes No
  Shows a Facebok Login Button, with site membership integration, allowing users to login on your site with their Facebook account (e-mail).
To use this method, you need to provide the 'membershipDbName' in the helper's Initialize method.
   
@helper LoginButtonTagOnly ([string buttonText], [bool autoLogoutLink], [string size], [string length], [string onLogin], [bool showFaces], [string extendedPermissions]) No  No
  Shows a Facebook Login Button, without integrating Facebook login with your site membership.    
@helper LikeButton ([string href], [string buttonLayout], [bool showFaces], [int width], [int height], [string action], [string font], [string colorScheme], [string refLabel]) No  No
  Shows a Facebook Like Button. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website.    
@helper Comments ([string xid], [int width], [int numPosts], [bool reverseOrder], [bool removeRoundedBox]) Yes  No
  Shows a Facebook Comments plugin. The Comments Box easily enables your users to comment on your site's content — whether it's for a web page, article, photo, or other piece of content.    
@helper Recommendations ([string site], [int width], [int height], [bool showHeader], [string colorScheme], [string font], [string borderColor], [string filter], [string refLabel]) No  Yes
  Shows a Facebook Recommendations plugin. The Recommendations plugin shows personalized recommendations to your users.    
@helper

LikeBox ([string profileId], [string name], [int width], [int height], [string colorScheme], [int connections], [bool showStream], [bool showHeader])

No  No
  Shows a Facebook Like Box. The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website.    
@helper Facepile ([int maxRows], [int width]) Yes  No
  Shows a Facebook Facepile plugin. The Facepile plugin shows the Facebook profile pictures of the user's friends who have already signed up for your site.    
@helper LiveStream ([int width], [int height], [string xid], [string viaUrl], [bool allwaysPostToFriends]) Yes (calling GetInitializationScripts() not required)   No
  Shows a Facebook Live Stream plugin. The Live Stream plugin lets users visiting your site or application share activity and comments in real time.    
@helper ActivityFeed ([string site], [int width], [int height], [bool showHeader], [string colorScheme], [string font], [string borderColor], [bool showRecommendations]) No  Yes
  Shows a Facebook Activity Feed plugin. The activity feed displays stories both when users like content on your site and when users share content from your site back to Facebook.    
@helper OpenGraphRequiredProperties (string siteName, string title, string type, string url, string imageUrl, [string description]) No  Yes
 

OpenGraph properties allows you to specify structured information about your web pages to show up your pages richly across Facebook and enable Facebook users to establish connections to your pages.
Use this method to show OpenGraph page data, as the page title, URL, and so on.

   
@helper OpenGraphLocationProperties ([string latitude], [string longitude], [string streetAddress], [string locality], [string region], [string postalCode], [string countryName]) No  Yes
  Use this method to show page location data. This is useful if your pages is a business profile or about anything else with a real-world location. You can specify location via latitude and longitude, a full address, or both.    
@helper OpenGraphContactProperties ([string email], [string phoneNumber], [string faxNumber]) No  Yes
  Use this method to show contact information about your page. Consider including contact information if your page is about an entity that can be contacted.    
@helper FbmlNamespaces () No  No
  Use this method inside your opening HTML tag for W3C compatibility.    

User Profile Information

string Id Facebook User Id
string Name Display Name
string First_Name First Name
string Last_Name Last Name
string Link Link to Profile
string Bio Short biography
string Gender Gender
string Email Published e-mail address
string Timezone User timezone
string Locale User regional settings
string Updated_Time Last updated time on Facebook

Last edited Jan 13, 2011 at 7:13 PM by jsenior, version 27

Comments

CasperBraske Mar 27, 2015 at 6:26 AM 
Hey there.
What about a "share" button?

knowledgi Jun 16, 2013 at 6:40 AM 
Nup. Another Helper that doesn't work as specified. Tried the Getting started in 60 seconds (without initialization) for a Facebook Like button. Got an Error Code 100 about show_faces parameters.

dashang Aug 1, 2012 at 5:17 AM 
i am getting error

Line 216: }
Line 217:
Line 218: private static SimpleMembershipProvider GetMembershipProvider() {
Line 219: var provider = Membership.Provider as SimpleMembershipProvider;
Line 220:


---------------------------------------------------------

Compiler Error Message: CS0246: The type or namespace name 'SimpleMembershipProvider' could not be found (are you missing a using directive or an assembly reference?)

victorxx Mar 14, 2012 at 6:59 AM 
Hello!
Are there any update plans to this helper?
Thanks.