Add Facebook to your MVC 3 site with Razor @helpers and the Facebook.Helper library package.

by rcats on December 19, 2010

I’ve been experimenting with some of the CTP’s and beta products Microsoft has been releasing over the past couple of months. There’s some really good stuff available to us today, like MVC3, Razor, CodeFirst Entity framework, @helper libraries, NuGet and Visual Studio Extensions that you can use to quickly build nice websites. Also, I’ve come to love Ninject and introduce the library to you if you aren’t familiar with it yet. IOC is something you should know. I’ll be doing some video blogs and tutorials here.

First up is the Facebook helper library that’s being released. You can use the facebook helper classes to easily add a ‘like’ button or comment box to your webpage, and enable users to post this comment to their wall.

First step is installing the helper package using Visual Studio library package manager (references > right click > add package library reference).

image

This adds a folder facebook to your project, some helper files (read this for more options and functionality!) and a facebook.cshtml file in your app code folder. In this file you will find the available helper functions which are documented well. Now it’s very easy to use these methods. To add a like button for instance, just add this line to your view:

@Facebook.LikeButton()
@RenderBody()

image

Or add the comment box.

@Facebook.GetInitializationScripts()
@Facebook.Comments()
@RenderBody()

image

Out of the box, there’s a problem because the facebook helper class uses classes in the WebMatrix namespace. You have to include WebMatrix.Data and WebMatrix.WebData as references in your project. Also, make your you copy them locally using the reference property dialog or just manually add them to the bin folder, otherwise the facebook.cshtml file will generate a compile error when running the site (this is not caught design time).

Just a quick post to start off with, more to come!

ps: it’s also worth having a look at the microsoft.web.helpers package and namespace. Here’s what you get out of the box

image

Tell Everyone:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Reddit

7 comments

Hello,
Thank you for your article. It’s very useful for me. However, i have a little question: how do you initialize facebook helper with the appId and the secretKey ?
I have try to put something like this :
@Facebook.Initialize (“appid”,”mysecret”) (where of course i have changed appid and mysecret by thoses assiociated to my web site) but it’s doen’t works. I have an error compilation wich told me that this function have some invalid arguments.
I have tried to put this line in my layout and in my view where i need to initialize.
Any idea ?
By advance, thanks.
(PS: soory for my poor english, that’s not my langgae 😉 )

by Yannick on January 9, 2011 at 11:33. Reply #

Hi, srry for the late reply, I was out of town for a couple of days.

Looks like you are doing it right. I use
@{
Facebook.Initialize(“appId”, “AppSecret”);
}

in my _AppStart.cshtml file and this worked fine for me

by rcats on January 18, 2011 at 12:01. Reply #

That’s work fine, thanks a lot !

by Yannick on January 27, 2011 at 17:51. Reply #

asp mvc3 there or not my _AppStart.cshtml must put your
@ {
Facebook.Initialize (“appId”, “AppSecret”);
}
and they are the values ​​taken by appId and AppSecret

by desire on May 22, 2012 at 17:39. Reply #

asp mvc3 there or not my _AppStart.cshtml must put your
@ {
Facebook.Initialize (“appId”, “AppSecret”);
}
and they are the values ​​taken by appId and AppSecret

the execution was the message that appears is:
“The comments plugin Requires an href paramete”

by desire on May 22, 2012 at 17:43. Reply #

I’m truly enjoying the design and layout of your blog. It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a developer to create your theme? Outstanding work! aeedkefeddag

by Johnd619 on May 23, 2014 at 14:23. Reply #

Hi John, thanks for the compliment, I guess we have the same taste 🙂 All praise goes to the template designer, I just used one of the themes that were available online.

It’s called “Modernist” and was designed by Rodrigo Galindez

Cheers,
rinze

by rcats on May 27, 2014 at 14:14. Reply #

Leave your comment

Not published.

If you have one.