Sunday 27 March 2011

Using Facebook Helpers on your Website

Adding social media to websites is very popular these days. Businesses use it to increase their presence on the web while individuals use it to keep people up to date. Whatever your reasons, this tutorial will show you how to seamlessly integrate several of the Facebook Social Plugins into your website, quickly and easily. In this tutorial we will be using a free tool from Microsoft called WebMatrix. WebMatrix allows you to create, customize and publish websites. It’s amazingly easy to use, and can be downloaded from www.microsoft.com/web/webmatrix.

In this tutorial, we will be looking at 2 different ways to add facebook plugins to a website, using the facebook developer’s plugin and using the WebMatrix Facebook helper. One feature that WebMatrix offers is Helpers. Helpers are previously written code that allows us to integrate the code into our webpage with few lines of code. Helpers are nice because they are a timesaver, can be easily added, and allow you to reuse code over and over.

Create a Website with WebMatrix

WebMatrix gives you a number of different ways that you can create a new web site. You can use an existing open source application such as WordPress, Joomla, DotNetNuke or Umbraco, or you can create a site yourself by either coding everything or by using a small, simple template. For this tutorial, we will be using a simple site template.
Open WebMatrix. Select ‘Site from Template’ on the WebMatrix welcome screen.

Select “Starter Site”, give the site a name, and hit “OK.”

Open your files workspace by clicking on “Files” on the lower left hand of your screen.

You now have a basic starter site with two pages, default and about. Select the “Default.cshtml” file on the left and run it.

The beauty of WebMatrix’s templates is the ease of which they can be customized. For this tutorial, we will not be customizing our site but merely adding the Facebook plugin to our site.

Getting our Facebook Plugin code

One of the ways to add Facebook plugins to our site is by using the Facebook plugins available from the Facebook website. These plugins can be found at developers.facebook.com/plugins.
There are numerous options of plugins that are available to add to our website. Some common plugins include activity feeds, comments, and like buttons.
The nice thing about the plugins from Facebook is the fact that the code is generated for you. All you have to do is copy and paste it into your website.
Visit the Facebook plugin site at developers.facebook.com/plugins.

For this example we will use the “Like button.” Click on the “Like Button” link.

This page gives background on the like button, instructions on how to implement it in your page and the configurator that supplies your code.
In the configurator, add the URL of your website and change the style features to match your preference. The current look of our like button can be seen on the right.

Once done configuring the like button code, get the “Get Code” button. This will cause a pop up box to appear with the code you must copy and paste into your website.

Here you have two options of code: iframe or XFBML (which uses JavaScript). We will be using the iframe code. Copy the code before you click “Okay” and close the pop up box.

Adding our Like Button code to our webpage.

Now, let’s get back to our webpage in WebMatrix.
Open your Default.cshtml file. You may notice that our page only contains a little bit of Razor code and an html <p> tag. Because our Starter Site uses a site layout page, we only need to add the code that can be seen in the body of the page.
Add the code you copied from Facebook, either before or after the <p> tag.
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.asp.net&amp;layout=box_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>
Run your Default file. Our like button is now visible on our page.

Adding a like button was pretty simple but it required us to go to the Facebook developer page and get our code. Using the WebMatrix Facebook Helper, we can simply add our Like button with one line of code. Let’s do that now.

Installing the Facebook Helper

Although Facebook book provides documentation, including the possible attributes that you can specify, using a WebMatrix Facebook helper has some advantages. For example, what if you wanted to include the “Like button” to all of your webpages on your website? This would require you to go through each page, copying and pasting the Like button code we got from the Facebook Developers website. This is redundant and also allows room for error. Also, if you wanted to change part of the code already on your site, you would have to go through the code and change it in each place where it appears.
WebMatrix offers a Facebook helper that you can easily install and use on your site. With this helper, we can easily add the Facebook Like button to all of our webpages on our site. But before we can use our Helper, we must install it.
In WebMatrix, run your Default.cshtml file.
Replace the Default.cshtml in your URL with _Admin
Change: http://localhost:15400/Default.cshtml
To: http://localhost:15400/_Admin
Note: your localhost will be different than this.
You will be prompted to create a password.
Once you create a password you will be prompted to log in.

Once you are logged in, you will see all the packages available for you to install. We need to install the Facebook.Helper 1.0 package.

Click Install. Once the Facebook Helper is installed, the button will now say “Uninstall.”

Using the Facebook Helper

Some of the Facebook Plugins require an initialization while others do not. Initialization is not difficult but does require use to add a few extra steps when using our Facebook Helper.
Plugins that do not require Initialization:
  • Like Button
  • Activity Feed
  • Recommendations
  • Like Box
Plugins that require Initialization
  • Login button
  • Face Pile
  • Comments
  • Live Stream
First, we will add a plugin that does not require initialization and then we will add a plugin that does require initialization.
Open your Default.cshtml file. Replace your previous Facebook like button code:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.microsoft.com&amp;layout=box_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>
With:
@Facebook.LikeButton();
Run your file. Notice, your facebook like button is still on your page. Note: if may look different because the Facebook Helper used the default Like button style.

Now, if we wanted our like button to appear on every page we can easily make this happen. Open your _SiteLayout.cshtml file. This file defines the layout of our website. Adding our helper on this page will make it appear on every page.
Locate:
<div id="content"> 
Somewhere before the closing <div> add our helper:
@Facebook.LikeButton();
Run your Default.cshtml file. Notice, your page looks the same as before.

We can also define parameters to change the style of our Like Button. There are numerous parameters we could define (these can be found in our Facebook.cshtml file in our App_Code folder).
string href = "",
string buttonLayout = "standard",
bool showFaces = true,
int width = 450,
int height = 80,
string action = "like",
string font = "",
string colorScheme = "light",
string refLabel = ""
In our _SiteLayout.cshtml, find our @Facebook.LikeButton(); Change your code to the following:
@Facebook.LikeButton(
     href: "http://www.microsoft.com",
     buttonLayout: "button_count",
     font: "Verdana",
     colorScheme: "dark"
)
Now we have defined what URL people can like by clicking the button (this is usually the URL of our site), the button layout, the font and the color scheme. You may notice these parameters are the same as what we could configure on the Facebook site.
Run our Default.cshtml file. Notice our button looks a little different now that we’ve configured our button.

With the WebMatrix Facebook Helper, you can easily add any of the Facebook Social Plugins with a few lines of code.

Adding a Plugin that Requires Initialization

Using plugins that require initialization requires us to do a couple more steps than before. A great guide on getting started with the Facebook helper comes with the package in the starthere.htm file. It can be found under the Facebook folder.

Before we can add our helper we must first register our application with Facebook, retrieve our App Id and App Secret, and then initialize this in our website.

Getting our Application ID and Application Secret from Facebook

Go to www.facebook.com/developers/createapp.php to create our App ID and App Secret.
Name your application, agree to the Facebook terms and click the “Create Application” button

You will now need to add your site URL and domain name. Supplying our localhost for the Site URL is perfectly okay. This URL can be found in the browser when you run your file or under your Site Workspace.

Keep track of your Application ID and Application Secret that is on this page. You will need these later when we initialize our helper.

Initializing our Helper

Go back to our WebMatrix page. Open _AppStart.cshtml (or create a file with this name if you do not have one already). We need to add our initialization with our Application ID and Application Secret. In _AppStart.cshtml, add:
@{
     Facebook.Initialize("<your App ID>", "<your App Secret>");
}
Make sure you replace the parameters with your App ID and App Secret we previously got from Facebook.
We now need to get our Initialization scripts. We can do this on our _SiteLayout page so our whole site is initialized. Open your _SiteLayout.cshtml.
Locate your <html> tag and add
@Facebook.FbmlNamespaces()
Before the closing >, like so:
<html lang="en" @Facebook.FbmlNamespaces() >
We will now add our Facebook plugin. For this example, we will use the Comments plugin. In our _SiteLayout.cshtml file,
Locate:
@RenderBody()
Directly after, add:
@Facebook.GetInitializationScripts()                
@Facebook.Comments()
Run your file.

Note: Since we added our comments to our _SiteLayout.cshtml file, our comment box will appear on all webpages on our site. If you want the comments to only appear on one page, you simply have to move our @Facebook.Comments() helper to the page where you wish it to be.

No comments:

Post a Comment