添加社交网络到您的站点(Adding Social Networking to Your Website)

待我称王封你为后i 2022-10-02 04:58 6阅读 0赞

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

在本章中，您将学习如何让社交网站的书签\\链接、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\_p\_w\_picpath001][clip_p_w_picpath001]][clip_p_w_picpath001_clip_p_w_picpath001]

1. 如果您还没有添加ASP.NET Web Helpers Library到您的站点，请添加进来，具体方法请参照[WebMatrix和ASP.NET网页入门][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\_p\_w\_picpath002][clip_p_w_picpath002]][clip_p_w_picpath002_clip_p_w_picpath002]

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

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

[![clip\_p\_w\_picpath003][clip_p_w_picpath003]][clip_p_w_picpath003_clip_p_w_picpath003]

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

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

1. 如果您还没有添加ASP.NET Web Helpers Library到您的站点，请查阅[第1章][WebMatrix_ASP.NET]所述。同时在这里也需要添加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/][http_www.gravatar.com]。）如果想在您的站点上提供形像（头像）功能，则可以使用gravatar助手。

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

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

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\_p\_w\_picpath004][clip_p_w_picpath004]][clip_p_w_picpath004_clip_p_w_picpath004]

**显示您XBox玩家卡**

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

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

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\_p\_w\_picpath005][clip_p_w_picpath005]][clip_p_w_picpath005_clip_p_w_picpath005]

**显示一个Facebook的“Like”按钮**

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

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

[![clip\_p\_w\_picpath006][clip_p_w_picpath006]][clip_p_w_picpath006_clip_p_w_picpath006]

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

[![clip\_p\_w\_picpath007][clip_p_w_picpath007]][clip_p_w_picpath007_clip_p_w_picpath007]

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

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

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

[![clip\_p\_w\_picpath008][clip_p_w_picpath008]][clip_p_w_picpath008_clip_p_w_picpath008]

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

[![clip\_p\_w\_picpath009][clip_p_w_picpath009]][clip_p_w_picpath009_clip_p_w_picpath009]

*  同样的，LikeButton方法是可以设置按钮显示时的宽和颜色light或dark（亮或暗）

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

1. 如果您还没有添加Facebook.Helper library 到您的站点，请查阅[第1章][WebMatrix_ASP.NET]所述。（请注意，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\_p\_w\_picpath010][clip_p_w_picpath010]][clip_p_w_picpath010_clip_p_w_picpath010]

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语法参考][ASP.NET_Razor]

转载于:https://blog.51cto.com/jianle/828144

[DIGG]: http://digg.com/
[Reddit]: http://www.reddit.com/
[clip_p_w_picpath001]: https://s1.51cto.com/attachment/201204/6/429692_1333721165UoZ2.jpg
[clip_p_w_picpath001_clip_p_w_picpath001]: https://s1.51cto.com/attachment/201204/6/429692_1333721162Txjk.jpg
[WebMatrix_ASP.NET]: http://www.asp.net/web-pages/tutorials/basics/1-getting-started-with-webmatrix-and-asp-net-web-pages#webhelpers
[clip_p_w_picpath002]: https://s1.51cto.com/attachment/201204/6/429692_1333721166OiDM.jpg
[clip_p_w_picpath002_clip_p_w_picpath002]: https://s1.51cto.com/attachment/201204/6/429692_1333721165pOKU.jpg
[clip_p_w_picpath003]: https://s1.51cto.com/attachment/201204/6/429692_1333721167sbPx.jpg
[clip_p_w_picpath003_clip_p_w_picpath003]: https://s1.51cto.com/attachment/201204/6/429692_1333721167sOY8.jpg
[http_www.gravatar.com]: http://www.gravatar.com/
[clip_p_w_picpath004]: https://s1.51cto.com/attachment/201204/6/429692_13337211684oQ4.jpg
[clip_p_w_picpath004_clip_p_w_picpath004]: https://s1.51cto.com/attachment/201204/6/429692_1333721168Vuwv.jpg
[clip_p_w_picpath005]: https://s1.51cto.com/attachment/201204/6/429692_1333721169Dali.jpg
[clip_p_w_picpath005_clip_p_w_picpath005]: https://s1.51cto.com/attachment/201204/6/429692_1333721169Dd65.jpg
[clip_p_w_picpath006]: https://s1.51cto.com/attachment/201204/6/429692_1333721169zd2p.jpg
[clip_p_w_picpath006_clip_p_w_picpath006]: https://s1.51cto.com/attachment/201204/6/429692_13337211698GJs.jpg
[clip_p_w_picpath007]: https://s1.51cto.com/attachment/201204/6/429692_1333721170cxfd.jpg
[clip_p_w_picpath007_clip_p_w_picpath007]: https://s1.51cto.com/attachment/201204/6/429692_1333721170LbtB.jpg
[clip_p_w_picpath008]: https://s1.51cto.com/attachment/201204/6/429692_13337211700b9G.jpg
[clip_p_w_picpath008_clip_p_w_picpath008]: https://s1.51cto.com/attachment/201204/6/429692_1333721170Hs4B.jpg
[clip_p_w_picpath009]: https://s1.51cto.com/attachment/201204/6/429692_1333721171AguS.gif
[clip_p_w_picpath009_clip_p_w_picpath009]: https://s1.51cto.com/attachment/201204/6/429692_1333721171uh4P.gif
[clip_p_w_picpath010]: https://s1.51cto.com/attachment/201204/6/429692_1333721171Lek2.jpg
[clip_p_w_picpath010_clip_p_w_picpath010]: https://s1.51cto.com/attachment/201204/6/429692_1333721171w2xn.jpg
[ASP.NET_Razor]: http://go.microsoft.com/fwlink/?LinkId=208659