Using Facebook and Twitter Helpers in WebMatrix

Introduction

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

NOTE:
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>
@Facebook.ActivityFeed("some_website_url_here")

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:

<h2>Comments</h2>
@{Facebook.Initialize("your_app_id_here", "your_app_secret_here");}
@Facebook.GetInitializationScripts()
@Facebook.Comments()

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>
@Twitter.Profile("twitter_username_here")
 
<h2>Search results for #aspnet</h2>
@Twitter.Search("aspnet")
 
<h2>Follow Me</h2>
@TwitterGoodies.FollowButton("twitter_username_here")
 
<h2>Tweet Something</h2>
@TwitterGoodies.TweetButton(TwitterGoodies.DataCount.Horizontal, 
"Social Networking WebMatrix Tips",
"http://www.codeguru.com", 
TwitterGoodies.Languages.English,
"twitter_username_here")

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

Summary

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.



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

Downloads

Comments

  • Fake Oakley Twenty no tax worldwide

    Posted by ztsgdauuc on 07/04/2013 02:18am

    Oakley Clearance ,Oakley glasses all the U.S. domestic production, assembly, quality inspection and packaging in order that the quality of oakley glasses infallible. The special edition of Oakley sunglasses, painter, charity, sports and athletes together to learn some favorite Oakley sunglasses sale, would be the world's best light. You will be happy to understand this is not only just to deliver a sophisticated celebrity to determine you, but the sunglasses, and even to produce excellent UV protection of their very own eyes. Cheap Oakley Fuel Cell ,The unique design and precision manufacturing touch, from the brand, in order that each pair of sunglasses masterpiece. They may close in a style, design and magnificence. These sunglasses improve individual women, there may be definitely a kind of every woman within the overall collection of things cheaply Oakley sunglasses. To shield the eyes of harmful UV sunglasses, even with a cloudy day, which is why the look and driving sunglasses altogether instances even an essential idea, bear in mind to create. Comfortable being a pair of modest sunglasses sunglasses more than a few dark lens held by way of a framework, to be able to maintain in the Gulf harmful rays, it is no chance as a consequence. Oakley Outlet ,By far the most comfortable tone or shade hip your own personal eyelids completely attractive warm-up began direct sunlight gloss esotropia eye area has not been spared. All of this sounds very technical, professional athletes, Oakley half jacket XLJ sunglasses feel it? ray ban outlet ,Product design or choice of materials, is a huge group of advanced scientific experiments and testing to ensure the comfort and high-quality, higher level of integration and functionality and fashion. Popular elements of many, the excitement through history, will look back, so with the retro. Trousse De Toilette Sac Longchamp ,A lady may wish to glance several very eye-catching from the general population, women cheap Oakley women's sunglasses to ensure purchasing of the U.S. flag. Extracted from the suitable attire, ladies may add some device, the unit is usually for each case, with all the crowding together of events in their own individual clothing line. Regardless of what you desire, remember when shopping online, resulting in your best purchase decisions, to generate any difference what you would like to obtain sunglasses or perhaps the exact location.

    Reply
  • Discount Oakley Fuel Cell sale for cheap

    Posted by osxfejnbg on 06/29/2013 07:48am

    Knockoff Oakley ,The structure of the Oakley sunglasses inject tone cool like the style, functionality and security the result of a number of special features. Generally, the content of Oakley sunglasses, feather weight and impact protection features. Oakley half jacket XLJ sunglasses today can be a symbol of excellence for many who can't compromise performance. The style combines technology using more than 600 patents. Cheap ray ban ,For style forward even Oakley at the pinnacle. Oakley call time latest model generated glasses. Oakley shade in the application is incredibly a large celebrity list. Oakley sunglasses, lens coverage round the temple to defeat greater light and UV compared to the standard lenses additional visual security since. Cheap Oakley Mens ,Good design and manufacture of the framework is also good, irrespective under what circumstances, may make people comfortable. As time passes, sunglasses, and gradually become present with daily life necessities, and fashion jewelry. Oakley sunglasses exports of various varieties of color, and the modern label of sunglasses is that things are ready, though the first part of choice in order to see if it may prevent the ultraviolet. The skin we have and eyes nearby the photovoltaic ultraviolet (UV) risk. This can be the well-known experience UV sun, might result in a burning sun-damage, and in the end cancer of the skin. Oakley is popular all over the world range of products like shoes, watches, backpacks and sweatshirts, but they're very famous for the attractive color, people cheap Oakley sunglasses are very well known. How come people have to wear Oakley sunglasses. The key reason is really because it can give eye extra protection. Product design or selection of materials, has become a combination of advanced scientific experiments and testing to guarantee the comfort and high-quality, higher level of integration and functionality and fashion. Oakley is really a sports brand in the us, the leading portions of various types of functions, as well as casual wear, skiing, swimming, cycling and athletics sportswear. Eyeshades you simply won't be strange in point of fact may be the first step toward the first invention, the application of innovative technology to offer a glasses consist of the normal accessories for major items of equipment. Besides sunglasses online supplier of goggles for individuals who would like to play in the slopes this year's perfect to support prescription lenses in your eyes venue specifications. A fashion enthusiast and sunglasses collectors, her addiction the fashion business and blog, manage a website, where she share the many shop Oakley things.

    Reply
  • Cheap Oakley Caveat wholesale online

    Posted by hufnirubg on 06/25/2013 04:54am

    CHEap OaklEyS ,Oakley sunglasses, Jim started at $ 300, with better manufacturing performance, look more beautiful uninspiring values create. Fashion to reflect the change in current trends - retro, retro-style framework, chunky tortoiseshell and geometric shapes to draw in, instead of to divert attention. Fak Oakley Sunglasses ,In the sun's ultraviolet radiation may harm you and prolonged contact. Oakley sunglasses are really the classic inside the history. By the pool, usually a several property or housing the Prohibition on the rays of the sun and the atmosphere, the matter faced by men and women, with all the spread of water reflected light car atmosphere. FaKe OaKley FrogsKins ,It's also harmful UV from the eye is very blocked, in order that people in bright light, bankruptcy lawyer las vegas long-term activities, and eye fatigue, vision more clearly the truth three-dimensional, and protect. Glasses will make up his face disadvantage, people seem more temperament, specially in sun glasses, to ensure the face is usually to choose sunglasses. Oakley sunglasses, cheap is a wonderful brand, it represents a combination of art and fashion. You will need that you've got their own unique fashion style. Improvement in high-altitude skiing: a solar panel and plateau UV radiation may be at 2000 m (typical of Australian ski) is often nearly 30%, than sailing level. Oakley sunglasses can completely block the scattering of inflection, reflection brought on by various factors, for instance glare, glare. People have a tendency to sunglasses lenses and frames, thought we would purchase a Oakley sunglasses could possibly be superior to other brands a bit more expensive, the consumer will usually acquire money's worth. Art means the packaging of the inventions. Oakley pursuing this view, and deeply rooted inside the core of our own culture. Polarized sunglasses, export for your requirements in addition to the ability to take care of the very best security, so that you take notice of the clear, you can also choose the best option for dynamic lifestyle completely one. When all of our girls, not the spirit from the performance could be beautiful and trendy bat, made a statement, mustn't be identical trend. You can find a reliable company, providing high-quality products, the cheapest cost for the minutes of the most useful pattern, variety, sunglasses add-ons monitor.

    Reply
  • Cheap Oakley Radarlock no tax worldwide

    Posted by ncllmaxmk on 06/23/2013 09:39pm

    oAkLey SungLASSeS outLet ,As a brand, Oakley is well-known classic and timeless fashion fashion, this collection is exclusive and exquisite charm critical of an truly representative. Most girls would consider as being a compliment, this can be since that like to be called trendy and stylish, this is the reason to find out over most men. Fake Oakleys ,If, as the great tastes a variety of women, you might without a doubt be including texture and shows the fashionable glasses and also the indisputable fact that attention. An example may be definitely a fantastic dietary supplement from the latest accessories direction. These types of technologies are too assigned on the Oakley lenses. The best research and continuing development of Oakley is an awesome experience, which is their secret. Cheap Oakley Fuel Cell ,If you have the opportunity to go to the beach during the summer time carnival, marketing and advertising to take into consideration startingsuch a sunglasses, naturally, only a special, is just not a tiny obstacle. Oakley sunglasses lenses are safe, no pressure, may get a new optical pause, so that you have to be truthful, accurate vision premium clarity. To find out how the repair of good sunglasses cannot only extend the duration of usage of sunglasses, but can better be sure that the sunglasses eye protection role. Oakley sunglasses, summer sunglasses, because it's fashionable and functional co-exist, you need to do outdoor circumstances to protect the longer term health of your respective vision. Additional Oakley sun block lotion use, can be used for medical, so they entice the superb visual safety along with the shadow of the sun or UV goggles. The standard of Oakley sunglasses (especially encompassed by the kind) to deliver substantial protection along with the eyes with the sun's ultraviolet radiation, and thus ideal for people of nearly every age. Oakley sunglasses would be the unique one lets you change a glasses, re-decorating from your early 1980s, supplying you with the opportunity to have a very good reputation for the resurrection with the original tool. An enduring lens coating in order to avoid rain and sweat building within the lens, the exclusion of skin oils along with other contaminants, to ensure the lens is smudge as well as simple to keep clean. There are many of these sunglasses, or a number of different cheap OAKLEY sunglasses, various improvements. They are about equally well. Are you needing prescription sunglasses or perhaps want quality accessories to guarantee you have whatever you buy, you can find people who offer online Oakley suppliers.

    Reply
  • Discount Oakley Jupiter Squared wholesale online

    Posted by hyimabuop on 06/23/2013 01:53am

    Cheap RayBan ,Oakley glasses by everyone loves due to its glasses comfortable, practical, artistic, integrating. Wear OAKLEY sun block within the appropriate forum, our 1st look at las vegas dui attorney would like to choose a different tag Oakley sunglasses. Fake Oakley SUnglasses ,All lens offers truer color perception in sunny the weather is good purpose, three points suitable to support the lens precise optical alignment of comfort as well as. A sample may be interpreted with the classic style of romantic named Oakley Romeo and Juliet "sunglasses. Cheap Oakley Oil Rig ,Oakley sunglasses sold in the marketplace of all ages plus a selection of colors, shapes and design, using truly accurate optical technology, expensive and firm manufacturing research for many years to strengthen. Oakley is really so perfect! However , there are numerous artisans top brand sunglasses, Oakley accept to receive their particular some time to have been added is always strange architecture and innovative distance limitations. When buying sunglasses, sunglasses you might want to know fits into your budget, what's the eyes, you are properly safeguarded. It becomes the right companion for some, so long as you have been in work activities or simply eventually, in an area within the first or on foot over the derrick involved if you always maintain a the shutters minimum personal. In addition to the conventional technology polarization films and drop formation while using injection molding process, injection in the lens material around the filter. This implies that any point is known as in order to work, the works of sunglasses. Product design or selection of materials, has become a 2010 group of advanced scientific experiments and testing to guarantee the comfort and high-quality, advanced level of integration and functionality and fashion. The gray lenses of Oakley sunglasses in bright light the most effective in sunny conditions for good purposes, all the lens to provide a truer color perception. The durable anti-allergy frame three-dimensional metal sculpture and built ultra-light titanium, to ensure any weather or light conditions, and comfortable sunglasses. Every one of the recommendations in direct hitting the ground with producers, and possibly a brief period of producers, will never provide the shops, especially, is usually an substitute for can directly invest in these. Don't forget the custom features. Perk up extra colour of the icon, and within a few seconds to alter your lifestyle. You wish to have your individual unique fashion style, Oakley sunglasses sale is the best most suitable choice!

    Reply
  • Replica Oakley Radarlock XL good quality

    Posted by xqkgboimz on 06/17/2013 09:12pm

    cHEap OaklEy SunglaSSES ,Oakley sunglasses are developing a new trend inside fashion world. Independent status inside the fashion field, and so are creating some exciting products, adjustments to trends as a way to advance while using times. A particular style, the fundamental trend of Oakley glasses, Oakley glasses to keep up with the modern trends and circulation with the glasses on their collection, the design. fake oakley sunglasses ,Its wide range of good-looking, since it is well-made, they may be effortless to performance technology and fashion combining. Supporting the lens with Oakley, you can always think of the best. Through the years, the Oakley Sunglasses has been to boost outdoors frontier of the lens structure, thus preventing the complete visual field field athletes down frame RIM like running and cycling. Fake Oakley Jawbone ,Oakley sunglasses are not only avoid the sun, however the other hit the decorative surface. The fashionable appearance and fashion style, will probably be your good choice. The best option of girls and men of Oakley sunglasses brand sunglasses, Oakley sunglasses are stylish and useful, some people like it. For anyone who is in bright light, indoors or relatively weak in the sun, it is possible to choose pink or brown lenses, so that you can better distinguish colors. Everyone of us includes a unique face shape, but these can usually be split into to help you pick a qualified sunglasses will probably be flat. The color is fantastic, they belong the glare may be the sun produces ultraviolet radiation, that's really toxic and guarded eye vision. People tend to sunglasses lenses and frames, thought we would obtain a Oakley sunglasses might be greater than other brands a tad bit more expensive, the person in most cases get their money's worth. Now, while using sunglasses and improve on the design, the sunglasses have been as if to form a fashion trend from the wind. Recently introduced the "wearable electronics" to collect weapons to offer Bluetooth solutions, and implantation on the solution framework to lose the necessitie of the headset, headphone, line and wire. Whether you would like to get yourself a dvd accessories as well as the way forward for the festival, or simply to help keep in a vehicle using a sunny day, you can not beat the style and quality they have got. The stylish appearance and fashion style, it will be your wise decision. Select your discount Oakley sunglasses collection, you find the best sunglasses.

    Reply
  • very

    Posted by jaya on 01/10/2013 06:38am

    very help ful

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: November 20, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Are you wanting to target two or more platforms such as iOS, Android, and/or Windows? You are not alone. 90% of enterprises today are targeting two or more platforms. Attend this eSeminar to discover how mobile app developers can rely on one IDE to create applications across platforms and approaches (web, native, and/or hybrid), saving time, money, and effort and introducing apps to market faster. You'll learn the trade-offs for gaining long …

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds