Using Facebook and Twitter Helpers in WebMatrix


With the growing popularity of social networking websites such as Facebook and Twitter, more and more websites are integrating them in their pages. Facebook and Twitter Helpers for WebMatrix allow you to easily integrate the respective applications into ASP.NET MVC Razor based websites. Helpers are basically ready pieces of code that allow you to reuse the code in your pages with only a few lines of code from your side. These easy to use helpers make it possible for developers to achieve Facebook and Twitter integration without the need to know the background technical details. This article is intended to give you an overview of Facebook and Twitter Helpers for WebMatrix and how to install and use them in ASP.NET MVC 3 websites.

Overview of Facebook and Twitter Helpers

Facebook Helper for WebMatrix allows you to integrate Facebook Social Plugins into your website. The Facebook Social Plugins include the Like button, Comments, Activity feed and more. Depending on the social plugins you wish to use, you may need to call initialization code before using that plugin. Of course, not all social plugins require initialization. In the examples discussed later in this article you will use both types of the plugins.

Twitter Helper for WebMatrix is similar to the Facebook helper discussed above in that it allows you to integrate social plugins of the target site (Twitter in this case) into your Razor based websites. Using the Twitter Helper, you can quickly integrate features such as Tweet button, Twitter profile and Follow Me button. Just like the Facebook Helper, you may need to call initialization code before using some of the features of Twitter Helper.

Installing Facebook and Twitter Helpers in a WebMatrix Site

In order to use the Facebook and Twitter Helpers for WebMatrix, you need to install them in a WebMatrix website. Let's see how to install them by creating a new website in WebMatrix. Open WebMatrix and select New Site > Site from Template. Then create a website named SocialPluginsDemo based on Starter Site template.

Open WebMatrix and select New Site > Site from Template
Figure 1: Open WebMatrix and select New Site > Site from Template

Once the website is created click on the Files option and you should see a list of files as shown below:

A list of file options
Figure 2: A list of file options

Now click on the Site option and locate the "ASP.NET Web Pages Administration" option. Create a password as suggested by the on-screen prompt and log into the administration area. Search for Facebook and Twitter keywords and you should see Facebook and Twitter Helpers listed as shown below:

ASP.NET Web Pages Administration
Figure 3: ASP.NET Web Pages Administration

Facebook and Twitter Helpers
Figure 4: Facebook and Twitter Helpers

There are three separate helpers - Facebook Helper, Twitter Helper and ASP.NET Web Helpers Library - in the list. The ASP.NET Web Helpers Library also includes many additional helpers. For the sake of this article you will use Facebook Helper and Twitter Helper.

Click on the Install button to install both of the helpers to your website. Installing both of the helpers will add certain files to your website.

Installing both of the helpers will add certain files to your website
Figure 5: Installing both of the helpers will add certain files to your website

Notice the NuGet packages added to the website and also the additional folders (such as Facebook). Now you are ready to use Facebook and Twitter Helpers in your website.

Using the Features of Facebook Helper

Now that you have successfully installed Facebook and Twitter Helpers, let's use Facebook Helper to render a Like button, display activity feed and to display a Comments box. The first two features don't need any kind of initialization whereas displaying Comments box requires initialization.

Open Default.cshtml file and add the following code to it:

<h2>Like this page? Click on the Like button below...</h2>@Facebook.LikeButton() <h2>Activity feed</h2>

The above code makes use of two social plugins of Facebook Helper - the Like button and Activity feed. The Like button social plugin renders a Like button in your web page whereas the Activity Feed plugin displays stories when users like content on your site and when users share content from your site to Facebook. Change the URL of the website to suit your setup and run the web page. If everything goes fine your page should resemble the following figure:

The Facebook Like button and Activty feed
Figure 6: The Facebook Like button and Activty feed

Notice how the Like button and Activity Feed box are rendered in the web page.

Next, let's add a Comments box to the same web page. Displaying a Comments box requires initialization and requires a few extra steps from your side. Firstly, visit Facebook Developer's web page and create a new Facebook application. We won't discuss the process of creating a new Facebook application here. All you need to work further with this example is your Facebook application's ID (App Id) and Secret (App Secret). Once you have those details, add the following lines of code to Default.cshtml file:

@{Facebook.Initialize("your_app_id_here", "your_app_secret_here");}

The Initialize() method initializes the Facebook helper with your application settings. Make sure to replace your Facebook application's ID and application's secret key. The GetInitializationScripts() method initializes the Facebook JavaScript SDK to be able to support the XFBML tags of the social plugins. Finally, the Comments() method renders the comments box in your web page. There is one more thing you need to do before running the web page. Open the layout file of the web site and modify the <HTML> tag as shown below:

<html lang="en" @Facebook.FbmlNamespaces()>

The FbmlNamespaces() method emits certain FBML related namespaces. That's it! Run the web page again and you should see Comments box like this:

Facebook Comments box
Figure 7: Facebook Comments box

Using the Features of Twitter Helper

Now let's put Twitter Helper to use and render some Twitter specific features. We will render the following features of Twitter on the page.

  • Display profile box for a Twitter user
  • Search tweets and display the search results in a box
  • Display a Follow button
  • Display a Tweet button

Add another ASP.NET web page (.cshtml) to the website and key in the following code:

<h2>My Twitter Profile</h2>
<h2>Search results for #aspnet</h2>
<h2>Follow Me</h2>
<h2>Tweet Something</h2>
"Social Networking WebMatrix Tips",

The above code makes use of Twitter helper. The usage of various helper methods is straight forward and self-explanatory. For example, Profile() method displays a profile box for a specified Twitter user as shown below:

Twitter Profile Box
Figure 8: Twitter Profile Box

Similarly, TweetButton() method that accepts tweet text, URL, language and user displays a Tweet button. Clicking on the Tweet button opens a dialog for entering the tweet.

Tweet Dialog Box
Figure 9: Tweet Dialog Box


Facebook and Twitter helpers for WebMatrix allow you to integrate social plugins and features of the respective sites into your own website. The Like button, Comments box, Twitter profile, Tweet button and more can be added to your web page with just a few lines (often single!) of code. In order to use these helpers you need to install them to your WebMatrix website and then consume the respective helper methods.

This article was originally published on October 10th, 2011

About the Author

Bipin Joshi

Bipin Joshi is a blogger and writes about apparently unrelated topics - Yoga & technology! A former Software Consultant by profession, Bipin has been programming since 1995 and has been working with the .NET framework ever since its inception. He has authored or co-authored half a dozen books and numerous articles on .NET technologies. He has also penned a few books on Yoga. He was a well known technology author, trainer and an active member of Microsoft developer community before he decided to take a backseat from the mainstream IT circle and dedicate himself completely to spiritual path. Having embraced Yoga way of life he now codes for fun and writes on his blogs. He can also be reached there.

Related Articles


Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date