Adding Social Networking to Your Website

Tuesday, February 14, 2012

By Microsoft ASP.NET Team|September 28, 2010

This chapter explains how to integrate your site with social networking services.

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 chapter:

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

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 LinkShare 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.

Add the ASP.NET Web Helpers Library to your website as described in Chapter 1 - Getting Started with ASP.NET Web Pages, if you haven't already added it.
Create a page named ListLinkShare.cshtml and add the following markup:
```
<!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.
Run the ListLinkShare.cshtml page in a browser. (Make sure the page is selected in the Files workspace before you run it.)
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 del.icio.us link, you're taken to the Save Bookmark page on the Delicious website.

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 theTwitter.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.

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.

Add the ASP.NET Web Helpers Library to your website as described in Chapter 1, if you haven't already.
Add a new page named Twitter.cshtml to the website.

Add the following code and markup to the page:

<!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>

In the Twitter.Profile code statement, replace <Insert User Name> with the account name of the feed you want to display.
In the Twitter.Search code statement, replace <Insert search criteria here> with the text you want to search for.
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 Gravatars is to let people specify their Gravatar address when they register on your site. (You can learn how to let people register inChapter 16 – Adding Security and Membership.) Then whenever you display information for that user, you can just add the Gravatar to where you display the user's name.

Add the ASP.NET Web Helpers Library to your website as described in Chapter 1, if you haven't already.
Create a new web page named Gravatar.cshtml.

Add the following markup to the file:

<!DOCTYPE html>
<html>
    <head>
        <title>Gravatar Example</title>
    </head>
    <body>
        <h1>Gravatar Example</h1>
        @Gravatar.GetHtml("<Your Gravatar account here>")
           
        @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.

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.)
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.

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.

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

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

<!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.

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

Pages

10th class result a-level 11th part first second year bise result 2014 Lahore Multan Federal