Language

Sign In|Join

////Adding Social Networking to Your Website

Adding Social Networking to ASP.NET Web Pages (Razor) Sites

By |

This article explains how to add social networking links for Facebook, Twitter, Reddit, and Digg to pages in an ASP.NET Web Pages (Razor) website, and how to include Twitter feeds, Xbox gamer cards, and Gravatar images.

What you'll learn:

  • How to let people bookmark/link your site.
  • How to add a Twitter feed.
  • How to render Gravatar.com images.
  • How to display an Xbox gamer card on your site.
  • How to add a Facebook Like button to pages.

These are the ASP.NET programming concepts introduced in the article:

  • The LinkShare helper.
  • The Twitter helper.
  • The Gravatar helper.
  • The GamerCard helper.
  • The Facebook helper.

Note   The information in this article applies to ASP.NET Web Pages 1.0 and Web Pages 2, and to Microsoft WebMatrix 1.0 and Microsoft WebMatrix 2.

Linking Your Website on Social Networking Sites

If people like something on your site, they often want to share it with friends. You can make this easy by displaying glyphs (icons) that people can click to share a page on Digg, Reddit, Facebook, Twitter, or similar sites.

To display these glyphs, add the LinkSharecode helper to a page. People who visit your page can click an individual glyph. If they have an account with that social networking site, they can then post a link to your page on that site.

Picture 1

  1. Add the ASP.NET Web Helpers Library to your website as described in Installing Helpers in an ASP.NET Web Pages Site, if you haven't already added it.

  2. Create a page named ListLinkShare.cshtml and add the following markup:

    3. @using Microsoft.Web.Helpers;

<!DOCTYPE html>
<html>
  <head>
    <title>LinkShare Example</title>
  </head>
  <body>
    <h1>LinkShare Example</h1>
    Share: @LinkShare.GetHtml("LinkShare Example")
  </body>
</html>

    In this example, when the LinkShare helper runs, the page title is passed as a parameter, which in turn passes the page title to the social networking site. However, you could pass in any string you want.

  3. Run the ListLinkShare.cshtml page in a browser. (Make sure the page is selected in the Files workspace before you run it.)

  4. Click a glyph for one of the sites that you're signed up for. The link takes you to the page on the selected social network site where you can share a link. For example, if you click the Reddit link, you're taken to the submit to reddit page on the Reddit website.

    Picture 2

Adding a Twitter Feed

ASP.NET provides helpers that let you add a Twitter feed on a page. If you use the Twitter.Profile method in your code, you can display the Twitter feed for a specific Twitter user on your web page. If you use the Twitter.Search method in your code, you can specify a Twitter search (for words, hash tags, or any other searchable text) and display the results on your page. Both helpers also let you configure settings like width, height, and styles.

Picture 3

Access to Twitter information is public, so you don't need a Twitter account in order to use the Twitter helpers on your pages.

The following procedure shows you how to create a web page that demonstrates both Twitter helpers.

  1. Add the ASP.NET Web Helpers Library to your website as described in Installing Helpers in an ASP.NET Web Pages Site, if you haven't already.
  2. Add a new page named Twitter.cshtml to the website.
  3. Add the following code and markup to the page: 
    @using Microsoft.Web.Helpers;
<!DOCTYPE html>
<html>
  <head>
    <title>Twitter Example</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Twitter profile helper</td>
        <td>Twitter search helper</td>
      </tr>
      <tr>
        <td>@Twitter.Profile("<Insert User Name>")</td>
        <td>@Twitter.Search("<Insert search criteria here>")</td>
      </tr>
    </table>
  </body>
</html>
  4. In the Twitter.Profile code statement, replace <Insert User Name> with the account name of the feed you want to display.
  5. In the Twitter.Search code statement, replace <Insert search criteria here> with the text you want to search for.
  6. Run the page in a browser.

Rendering a Gravatar Image

A Gravatar (a "globally recognized avatar") is an image that can be used on multiple websites as your avatar — that is, an image that represents you. For example, a Gravatar can identify a person in a forum post, in a blog comment, and so on. (You can register your own Gravatar at the Gravatar website at http://www.gravatar.com/.) If you want to display images next to people's names or email addresses on your website, you can use the Gravatar helper.

In this example, you're using a single Gravatar that represents yourself. Another way to use a Gravatar is to let people specify their Gravatar address when they register on your site. (You can learn how to let people register in Adding Security and Membership to an ASP.NET Web Pages Site.) Then whenever you display information for that user, you can just add the Gravatar to where you display the user's name.

  1. Add the ASP.NET Web Helpers Library to your website as described in Installing Helpers in an ASP.NET Web Pages Site, if you haven't already.
  2. Create a new web page named Gravatar.cshtml.
  3. Add the following markup to the file: 
    @using Microsoft.Web.Helpers;
<!DOCTYPE html>
<html>
    <head>
        <title>Gravatar Example</title>
    </head>
    <body>
        <h1>Gravatar Example</h1>
        @Gravatar.GetHtml("<Your Gravatar account here>")
        &nbsp;&nbsp;&nbsp;
        @Gravatar.GetHtml("<Your Gravatar account here>", 40)
    </body>
</html>

    The Gravatar.GetHtml method displays the Gravatar image on the page. To change the size of the image, you can include a number as a second parameter. The default size is 80. Numbers less than 80 make the image smaller. Numbers greater than 80 make the image larger.

  4. In the Gravatar.GetHtml methods, replace <Your Gravatar account here> with the email address that you use for your Gravatar account. (If you don't have a Gravatar account, you can use the email address of someone who does.)
  5. Run the page in your browser. The page displays two Gravatar images for the email address you specified. The second image is smaller than the first.

    6. Picture 4

Displaying an Xbox Gamer Card

When people play Microsoft Xbox games online, each user has a unique ID. Statistics are kept for each player in the form of a gamer card, which shows their reputation, gamer score, and recently played games. If you're an Xbox gamer, you can show your gamer card on pages in your site by using the GamerCard helper.

  1. Add the ASP.NET Web Helpers Library to your website as described in Installing Helpers in an ASP.NET Web Pages Site, if you haven't already.

  2. Create a new page named XboxGamer.cshtml and add the following markup.

    @using Microsoft.Web.Helpers;
<!DOCTYPE html>
<html>
  <head>
    <title>Xbox Gamer Card</title>
  </head>
  <body>
    <h1>Xbox Gamer Card</h1>
    @GamerCard.GetHtml("major nelson")
  </body>
</html>

    You use the GamerCard.GetHtml property to specify the alias for the gamer card to be displayed.

  3. Run the page in your browser. The page displays the Xbox gamer card that you specified.

    Picture 5

Displaying a Facebook "Like" Button

You can make it easy for people to share your content with their Facebook friends by using the Facebook helper's LikeButton method.

The Facebook helper renders a Like button itself as well as a count (which is read from Facebook) of how many other people have clicked Like for the page:

When people click the Facebook Like button on your site, a link appears on the user's Facebook feed that says that they "Like" the page.

By default, the Facebook helper's LikeButton method generates a Like button that points to the current page. That's the most common scenario — when you see a Like button, it's giving you a chance to create a Facebook link to whatever you're reading at the moment. Alternatively, you can pass a URL to the Facebook helper using the LikeButton method. In that case, the Like link in Facebook points to whatever page you've specified. This is useful if the page you're on lists other sites and you want to provide a Like button for each of those sites individually.

The LikeButton method lets you specify options for how to display the Like button, including:

  • Whether the link shows a Like link or a Recommend link.

  • How to show the count of the other people who like the page:

  • Whether to show Facebook profile pictures of the people who have already liked the page:

  •  The width and color scheme (light or dark) of the Like button display.

In the following example, you'll create two Like buttons. One points to the current page, and the other points to a specific URL (the ASP.NET WebMatrix website). To test the example, you must have a Facebook account.

  1. Add the Facebook.Helper library to your website as described in Installing Helpers in an ASP.NET Web Pages Site, if you haven't already. (Note that the Facebook helper is in a different library than many of the other helpers.)
  2. Create a new page named FacebookLikeButton.cshtml and add the following markup. 
    @using Microsoft.Web.Helpers;
<!DOCTYPE html>
<html>
    <head>
        <title>Facebook 'Like' Button</title>
        <style>body {font-family:verdana;font-size:9pt;}</style>
    </head>
    <body>
    <p>Points to the current page, uses default settings:</p>
        @Facebook.LikeButton()

    <p>Points to the ASP.NET Web site:</p>
         @Facebook.LikeButton(
          href: "http://www.asp.net/webmatrix",
          action: "recommend",
          width: 250,
          buttonLayout: "button_count",
          showFaces: true,
          colorScheme: "dark")
    </body>
</html>

    The first instance of the Facebook.LikeButton method uses all default settings, so it points to the current page. The second instance includes options. You use the url parameter to specify the URL to like. To change Like to Recommend, you set the action parameter to "recommend" (the default is "like"). To specify the "button" style for the count, you set the layout parameter to "button_count" (versus "standard" or "box_count"). To show Facebook profile pictures below the Like button, you set the showFaces parameter to true. Finally, to set the color scheme, you set the colorScheme parameter to "dark" (the default is "light").

  3. Run the web page in your browser. The page displays the Facebook Like buttons that you specified.

  4. Click the Recommend button that points to the ASP.NET website. If you're not logged into Facebook, you're prompted to do so. When you are, you'll be able to see the Recommend link on your wall.

    If you're testing the page within WebMatrix, you won't be able to test the first link (the Like button that points to the current page). Because you're running on the local computer (using the localhost URL), Facebook can't link back to you. However, once your site goes live, the link will work.

Additional Resources

Microsoft ASP.NET Team

By Microsoft ASP.NET Team, ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.

Comments (0) RSS Feed

You must be logged in to leave a comment.

Table of Contents

Introducing ASP.NET Web Pages 2

Basics

Working with Pages

Data

Files, Images, and Media

Security

Email and Search

Social Networking

Performance and Traffic