本章详细讲述如何整合,在你的站点上建立社交网络服务。

在本章中,您将学习如何让社交网站的书签\链接、Facebook或Digg等网站的链接、Twitter的feeds, gravatar头像和Xbox玩家卡添加到您的网站中。

您将学习:

  • 如何让社交网站书签/链接添加到您的网站。
  • 如何添加一个Twitter的feeds。
  • 如何呈现Gravatar.com图像(头像)。
  • 如何显示在您的网站上的Xbox玩家卡。
  • 如何添加一个Facebook 按钮到您的网页。

以下是在本章介绍ASP.NET编程时引入的概念:

  • LinkShare 助手。
  • Twitter助手。
  • Gravatar助手。
  • GamerCard助手。
  • Facebook助手。

让社交网站的链接添加到您的站点

如果访问者喜欢您网站的信息,并且经常要分享给朋友时。人们可以点击一个文字(图标)形式的链接,从而分享内容到DIGG(掘客)、Reddit(一个社交新闻站点)、Facebook、Twitter或相似的网站,在本节内容中,你可以简单的实现这一功能。为了显示出这些图标或文字链接,需要加入LinkShare的助手。人们在访问您的网页,要分享内容时可以点击一个链接,如果他们有一个该社交站点的账号,则可以将您站点的信息分享到社交站点,并将您的链接张帖到社交站点上。

clip_image001

1. 如果您还没有添加ASP.NET Web Helpers Library到您的站点,请添加进来,具体方法请参照WebMatrix和ASP.NET网页入门

2. 创建一个名为页ListLinkShare.cshtml并在其中添加以下标记:

<!DOCTYPE html>
<html>
<head>
<title>LinkShare 范例</title>
</head>
<body>
<h1>LinkShare Example</h1>
分享: @LinkShare.GetHtml("您要分享的内容。")
</body>
</html>

在这个范例中,您可以将您要分享的内容做为参数,分享到社交站点中。当然,这个参数您是可以自定义的。

3. 在浏览器中运行的ListLinkShare.cshtml页面。 (确保本页面在选定的文件工作区,然后再运行它。)

4. 点击一个站点的文字(图标)链接,您可以共享您的信息和链接到您选定的社交网络站点上的页面中。例如,如果您按一下del.icio.us链接,将获取你的页面信息到del.icio.us站点的保存书签页面中。

clip_image002

在您的站点中加入一个Twitter feed

ASP.NET提供者辅助功能可以让我们在站点中增加Twitter feed,如果在您的代码中使用Twitter.Profile方法,可以为您的网页上显示特定的Twitter用户Twitter feed。如果在您的代码中使用Twitter.Search方法,则可以为您的网站中显示根据指定搜索内容呈现出来的结果。并且这个Twitter助手高宽都是可以设置的。

clip_image003

在您的网站点添加Twitter助手的时候不需要您的账号信息,这些信息是公开的。

下列步骤显示了如何建立一个网页,演示了这两种Twitter的助手。

1. 如果您还没有添加ASP.NET Web Helpers Library到您的站点,请查阅第1章所述。同时在这里也需要添加Twitter.Helper到您的站点。

2. 添加一个新的页面网站名为Twitter.cshtml

3. 添加下面的代码和标记到页面中:

<!DOCTYPE html>
<html>
<head>
<title>Twitter 范例</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. 将Twitter.Profile语句块方法参数中的<Insert用户名>改为您指定的帐户名就会获取您要显示的账号的feed。

5. 在Twitter.Search语句块主应运参数中的<Insert搜索标准here>替换为您搜索的文本。

6. 在浏览器中运行页。

呈现Gravatar网站获取的形像(头像)

Gravatar(全球通用头像)是一个提供可以代表您形像(头像)服务的站点。例如Blog评论或论坛发帖等等,都可以使用Gravatar提供的形像。(你可以注册自己的gravatar网站的gravatar http://www.gravatar.com/。)如果想在您的站点上提供形像(头像)功能,则可以使用gravatar助手。

在下面的例子中,您将使用一个单一的表示您自己的gravatar形像。Gravatar还有另一种用法,是当用户在您站点注册账号时,可以指定一个Gravatar形像的地址。(关于注册、安全和成员您可以查看第16章)每当显示用户信息时,可以显示该用话指定的Gravatar形像。

1. 如果您还没有添加ASP.NET Web Helpers Library到您的站点,请查阅第1章所述。

2. 创建一个新的网页,名为Gravatar.cshtml

3. 将以下标记添加到您的页面中:

<!DOCTYPE html>
<html>
<head>
<title>Gravatar 范例</title>
</head>
<body>
<h1>Gravatar Example</h1>
@Gravatar.GetHtml("<您的Gravatar账号写>")
@Gravatar.GetHtml("<您的Gravatar 账号>", 40)
</body>
</html>

Gravatar.GetHtml方法显示的gravatar页面上的图像。为了改变图像的大小,可以设置第二个参数。不设参数默认大小为80,数字小于80使图像变小,大于80的数字,使图像放大。

4. 在Gravatar.GetHtml方法,替换<您的Gravatar账号写>您为您的gravatar帐户使用的电子邮件地址。(如果没有的gravatar的帐户,您可以使用电子邮件地址)

5. 在浏览器中运行页。页面显示您指定的电子邮件地址的gravatar图像。第二个图像是比第一次小。

clip_image004

显示您XBox玩家卡

当人们玩微软Xbox在线游戏时,每个用户都有一个唯一的ID。统计信息被保存成一个游戏卡的形式,这张卡里显示了他们的声誉,玩家评分,最近玩过的每个游戏。如果您是Xbox玩家,您可以使用GamerCard帮手,在您的网站页面上显示您的玩家卡。

1. 如果您还没有添加ASP.NET Web Helpers Library到您的站点,请查阅第1章所述。

2. 创建一个新页面名为XboxGamer.cshtml添加下面的标记。

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

您使用GamerCard.GetHtml的方法时,需要在参数中指定要显示玩家卡的别名。

3. 在浏览器中运行本页。该页面显示您指定的Xbox玩家卡。

clip_image005

显示一个Facebook的“Like”按钮

您可以通过使用Facebook 的助手的LikeButton方法,让人们很容易的分享您的内容与他们的Facebook朋友。

Facebook的助手呈现一个 LIKE 按钮本身以及其他人的点击数(这是从Facebook读取)如下图:

clip_image006

当人们在您的站点上点击Facebook Like按钮时,一个描述他们喜欢的页面的链接会出现在页面上。

clip_image007

默认情况下,Facebook Like按钮是针对当前站点的。还有一种常见的场景——在您的站点上为某一个链接添加Facebook Like按钮,您可以使用Facebook 的助手的LikeButton方法,在参数中指定一个URL地址,在这种情况下,LikeButton可以链接到您所指定的任何网页。如果您想在站点上列出其他网站,并提供每个网站一个单独的LikeButton,那么这个功能是非常有用的。

LikeButton方法可以让您指定如何显示按钮,包括:

  • 是否使链接显示Like链接或推荐链接。
  • 如何显示统计的其他人喜欢的页面:

clip_image008

  • 是否显示已经Like该页的人在Facebook的个人主页上的图片形像:

clip_image009

  • 同样的,LikeButton方法是可以设置按钮显示时的宽和颜色light或dark(亮或暗)

在下面的例子中,您将创建两个LikeButton。一个点到当前页面,另一个链到一个特定的网址(如:ASP.NET WebMatrix网站)。为了方便测试该例子,您必须有一个Facebook帐户。

1. 如果您还没有添加Facebook.Helper library 到您的站点,请查阅第1章所述。(请注意,Facebook.Helper是在不同的库中,需要另外添加。)

2. 创建一个新页面名为FacebookLikeBtn.cshtml添加下面的标记。

<!DOCTYPE html>
<html>
<head>
<title>Facebook '喜欢' Button</title>
<style>body {font-family:verdana;font-size:9pt;}</style>
</head>
<body>
<p>点击到当前页面,可使用默认配置:</p>
@Facebook.LikeButton()
<p>点击到ASP.NET WebMatrix的配置:</p>
@Facebook.LikeButton(
href: "http://www.asp.net/webmatrix",
action: "recommend",
250,
buttonLayout: "button_count",
showFaces: true,
colorScheme: "dark")
</body>
</html>

第一个例子中Facebook.LikeButton方法使用所有默认设置,所以它指向当前页。第二个例子中包括了参数项,您可以设置指定的URL地址到LikeButton上。您可以通过改变action,将like(喜欢)变为recommend(推荐),默认是like。您可以设置buttonLayout来改变按钮的风格,比如可以改变为button_count(相对于"standard"或 "box_count")布局方式。如果想要显示Facebook 主页上的图标铵钮,可以将showFaces设置为true。最后更改配色方案,您可以修改COLORSCHEME属性为”dark”(默认是”light”) 。

3. 在您的浏览器运行的网页。该页面显示了Facebook 正如您所指定的按钮。

clip_image010

4. 点击Recommend(推荐)按钮,将指向ASP.NET网站。如果你没有登录到Facebook的话,将提示您登录。当您操作成功,就可以看到在墙上的推荐链接。

如果您在本地测试在WebMatrix页面,您将无法测试的第一个链接(Like按钮,指向当前页)。因为您在本地计算机上运行程序(使用本地主机的URL),那么Facebook不回应链接。然而,一旦您的网站发布到互联网上之后,链接将可以工作。

原文:

http://www.asp.net/web-pages/tutorials/social-networking/13-adding-social-networking-to-your-web-site

资源:

ASP.NET网页与Razor语法参考