Facebook Helper

Source code checked in, #16392

Project Collection Service Accounts — Mon, 01 Oct 2012 20:28:03 GMT

Upgrade: New Version of LabDefaultTemplate.xaml. To upgrade your build definitions, please visit the following link: http://go.microsoft.com/fwlink/?LinkId=254563

Source code checked in, #16391

Project Collection Service Accounts — Mon, 01 Oct 2012 20:26:15 GMT

Checked in by server upgrade

New Comment on "Documentation"

dashang — Wed, 01 Aug 2012 05:17:56 GMT

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?)

New Post: Avaiable on non ASP.net server

Hitmanpt — Thu, 19 Jul 2012 22:27:27 GMT

Will ever this heper and/or other helpers avaiable for server without ASP.net Support?

I mean PHP/HTML support

New Comment on "Documentation"

victorxx — Wed, 14 Mar 2012 06:59:39 GMT

Hello! Are there any update plans to this helper? Thanks.

New Post: Send Button

rodrigooliveira — Fri, 05 Aug 2011 22:36:24 GMT

There is already some implementation for that this helper?

New Post: Login Button Not Working

dremation — Fri, 18 Mar 2011 13:48:06 GMT

http://makemoneyfromyourfacebook.com/

I can login, but nobody else can. I'm using a default example project that I found online. The login window just disappears after you hit Login and accept the app.

Any idea why?

New Post: ASP MVC 3 Version?

ZeroDotNet — Wed, 02 Mar 2011 08:15:30 GMT

I want to know if you plan to release a version to be used in MVC 3 (or MVC 2) projects.

The current version only works with WebMatrix.

Exists any limitation?

Thank you guys, keep doing this excellent work.

Updated Wiki: Documentation

jsenior — Thu, 13 Jan 2011 20:13:54 GMT

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:

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:

Make note of the Site URL where your Microsoft WebMatrix site is running (click the Site workspace | Settings page).
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).
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.
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}");
}

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:

Download the sample site from the Downloads section.
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.
Change your WebMatrix site settings to match the Site Url you have configured in your Facebook application settings.
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");
...
}
Click on the Run button located in the Home tab.
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

Updated Wiki: Documentation

jsenior — Thu, 13 Jan 2011 19:59:14 GMT

Summary

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:

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:

Make note of the Site URL where your Microsoft WebMatrix site is running (click the Site workspace | Settings page).
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).
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.
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}");
}

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, like Cytanium (also check this tutorial on publishing with WebMatrix).

Running the Facebook Helper Sample

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.
Change your WebMatrix site settings to match the Site Url you have configured in your Facebook application settings.
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");
...
}
Click on the Run button located in the Home tab.
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

Updated Wiki: Documentation

jsenior — Thu, 13 Jan 2011 19:55:52 GMT

Summary

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:

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:

Make note of the Site URL where your Microsoft WebMatrix site is running (click the Site workspace | Settings page).
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).
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.
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}");
}

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, like Cytanium (also check this tutorial on publishing with WebMatrix).

Running the Facebook Helper Sample

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.
Change your WebMatrix site settings to match the Site Url you have configured in your Facebook application settings.
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");
...
}
Click on the Run button located in the Home tab.
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

Updated Wiki: Documentation

jsenior — Thu, 13 Jan 2011 19:46:12 GMT

Summary

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:

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:

Make note of the Site URL where your Microsoft WebMatrix site is running (click the Site workspace | Settings page).
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).
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.
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}");
}

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, like Cytanium (also check this tutorial on publishing with WebMatrix).

Running the Facebook Helper Sample

Browse to the Facebook Helper CodePlex site and download the Facebook Helper Sample
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.
Change your WebMatrix site settings to match the Site Url you have configured in your Facebook application settings.
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");
...
}
Click on the Run button located in the Home tab.
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

Updated Wiki: Documentation

jsenior — Thu, 13 Jan 2011 19:19:31 GMT

Summary

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:

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:

Make note of the Site URL where your Microsoft WebMatrix site is running (click the Site workspace | Settings page).
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).
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.
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}");
}
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, like Cytanium (also check this tutorial on publishing with WebMatrix).

Running the Facebook Helper Sample

Browse to the Facebook Helper CodePlex site and download the Facebook Helper Sample
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.
Change your WebMatrix site settings to match the Site Url you have configured in your Facebook application settings.
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");
...
}
Click on the Run button located in the Home tab.
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()
	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.	Yes (calling GetInitializationScripts() not required)	No
static void	AssociateMembershipAccount (string userName)
	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.	Yes (calling GetInitializationScripts() not required)	No
static bool	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])
	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.	Yes	No
@helper	LoginButtonTagOnly ([string buttonText], [bool autoLogoutLink], [string size], [string length], [string onLogin], [bool showFaces], [string extendedPermissions])
	Shows a Facebook Login Button, without integrating Facebook login with your site membership.	No	No
@helper	LikeButton ([string href], [string buttonLayout], [bool showFaces], [int width], [int height], [string action], [string font], [string colorScheme], [string refLabel])
	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.	No	No
@helper	Comments ([string xid], [int width], [int numPosts], [bool reverseOrder], [bool removeRoundedBox])
	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.	Yes	No
@helper	Recommendations ([string site], [int width], [int height], [bool showHeader], [string colorScheme], [string font], [string borderColor], [string filter], [string refLabel])
	Shows a Facebook Recommendations plugin. The Recommendations plugin shows personalized recommendations to your users.	No	Yes
@helper	LikeBox ([string profileId], [string name], [int width], [int height], [string colorScheme], [int connections], [bool showStream], [bool showHeader])
	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.	No	No
@helper	Facepile ([int maxRows], [int width])
	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.	Yes	No
@helper	LiveStream ([int width], [int height], [string xid], [string viaUrl], [bool allwaysPostToFriends])
	Shows a Facebook Live Stream plugin. The Live Stream plugin lets users visiting your site or application share activity and comments in real time.	Yes (calling GetInitializationScripts() not required)	No
@helper	ActivityFeed ([string site], [int width], [int height], [bool showHeader], [string colorScheme], [string font], [string borderColor], [bool showRecommendations])
	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.	No	Yes
@helper	OpenGraphRequiredProperties (string siteName, string title, string type, string url, string imageUrl, [string description])
	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.	No	Yes
@helper	OpenGraphLocationProperties ([string latitude], [string longitude], [string streetAddress], [string locality], [string region], [string postalCode], [string countryName])
	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.	No	Yes
@helper	OpenGraphContactProperties ([string email], [string phoneNumber], [string faxNumber])
	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.	No	Yes
@helper	FbmlNamespaces ()
	Use this method inside your opening HTML tag for W3C compatibility.	No	No

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

Updated Release: Facebook Helper v1.0 (Nov 08, 2010)

jsenior — Thu, 13 Jan 2011 18:44:45 GMT

This version works with WebMatrix RTM.

Download the Facebook Social Plugins Helper package and extract its content in the root folder of your WebMatrix site.

To learn how to use the helper, download the Facebook Social Plugins Helper Sample and run it with WebMatrix or check out the documentation for this project in Codeplex.

In the sample you can also see how to use the helper to integrate the Facebook login mechanism with the membership model of your web site.

Released: Facebook Helper v1.0 (Nov 08, 2010)

Thu, 13 Jan 2011 18:44:45 GMT

Source code checked in, #5822

jsenior — Thu, 13 Jan 2011 18:43:53 GMT

Updated to WebMatrix RTM

Updated Release: Facebook Helper v1.0 (Nov 08, 2010)

jsenior — Thu, 13 Jan 2011 18:26:37 GMT

Updated Release: Facebook Helper v1.0 (Nov 08, 2010)

jsenior — Thu, 13 Jan 2011 17:31:07 GMT

This version works with WebMatrix Beta3.

Download the Facebook Social Plugins Helper package and extract its content in the root folder of your WebMatrix site.

To learn how to use the helper, download the Facebook Social Plugins Helper Sample and run it with WebMatrix or check out the documentation for this project in Codeplex.

In the sample you can also see how to use the helper to integrate the Facebook login mechanism with the membership model of your web site.

Updated Release: Facebook Helper v1.0 (Nov 08, 2010)

jsenior — Thu, 13 Jan 2011 17:30:11 GMT

New Post: Like button "page could not be reached" error

Tyraslin — Mon, 10 Jan 2011 16:44:57 GMT

Hello,

i'm playing a bit with this helper and MVC3 RC2.

I can use comment and some other features. But the button like send me an error "page could not be reached".

Any idea ?

Thanks.