通过

将社交网络添加到 ASP.NET 网页 (Razor) 网站

作者 Tom FitzMacken

本文介绍如何将 Facebook、Twitter、Reddit 和 Digg 的社交网络链接添加到 ASP.NET 网页 (Razor) 网站中的页面，以及如何包括 Twitter 源、Xbox 玩家卡片和 Gravatar 图像。

学习内容：

  • 如何让用户为您的网站添加书签/链接。
  • 如何添加 Twitter 源。
  • 如何将 Facebook 赞 按钮添加到页面。
  • 如何呈现 Gravatar.com 图像。
  • 如何在网站上显示 Xbox 玩家卡。

本教程中使用的软件版本

  • ASP.NET 网页 (Razor) 2
  • ASP.NET Web 帮助程序库 (NuGet 包)

本教程也适用于 ASP.NET 网页 3，但使用 ASP.NET Web 帮助程序库的部件除外。

在社交网站上链接您的网站

如果用户喜欢你的网站上的内容，他们通常希望与好友共享它。 通过显示字形 (图标) ，用户可单击这些标志符号在 Digg、Reddit、Facebook、Twitter 或类似网站上共享页面，从而简化此操作。

若要显示这些字形，请将 LinkSharecode 帮助程序添加到页面。 访问页面人员可以单击单个字形。 如果他们拥有该社交网络网站的帐户，则可以在该网站上发布指向你的页面的链接。

图 1

  1. 如在 ASP.NET 网页网站中安装帮助程序中所述，将 ASP.NET Web 帮助程序库添加到网站（如果尚未添加）。- 创建名为 ListLinkShare.cshtml 的页面并添加以下标记：

    @using Microsoft.Web.Helpers;

<!DOCTYPE html>
<html>
  <head>
    <title>LinkShare Example</title>
  </head>
  <body>
    <h1>LinkShare Example</h1>
    Share: @LinkShare.GetHtml("LinkShare Example", linkSites: new[]{
        LinkShareSite.Reddit, LinkShareSite.Facebook, LinkShareSite.Twitter})
  </body>
</html>

    在此示例中，当 LinkShare 帮助程序运行时，页面标题将作为参数传递，而参数又将页面标题传递给社交网络网站。 但是，可以传入所需的任何字符串。 此示例还指定要在列表中包括哪些社交网络网站。 您可以指定与您的网站相关的社交网站。

  2. 在浏览器中运行 ListLinkShare.cshtml 页。 (在运行页面之前，请确保已在 “文件” 工作区中选择该页面。)

  3. 单击注册的其中一个站点的字形。 该链接将转到所选社交网络网站上的页面，你可以在其中共享链接。 例如，如果单击 Reddit 链接，则会转到 submit to reddit Reddit 网站上的页面。

    图 2

添加 Twitter 源

有关使用与当前版本的 Twitter API 兼容的 Twitter 帮助程序的信息，请参阅 Twitter 帮助程序。 此示例演示如何编写自己的帮助程序，以便可以轻松重用许多页面中的代码。

显示 Facebook“赞”按钮

在某些情况下，最佳选择是直接从社交网络提供商获取代码，而不是依赖于帮助程序。 如果社交网络提供商更新其选项的速度比帮助程序更新得更快，则尤其如此。

若要将 Facebook 功能 (（如“赞”按钮) ）添加到网站，可以从 developers.facebook.com 网站检索代码片段。 在 Facebook 网站上，使用他们的工具生成与网站相关的代码片段。

以下突出显示的代码是从 developers.facebook.com 站点上的“赞按钮”工具检索到的代码。 必须提供自己的应用 ID。

<!DOCTYPE html>
<html>
  <head>
    <title>Facebook Like Example</title>
  </head>
  <body>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<provide appId>";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
    <h1>Facebook Like Example</h1>
    <div class="fb-like" data-href="/web-pages/overview" data-layout="standard" 
        data-action="like" data-show-faces="true" data-share="true"></div>
  </body>
</html>

呈现 Gravatar 图像

Gravatar (“全局识别的头像”) 是一个图像，可以在多个网站上用作你的头像，即代表你的图像。 例如，Gravatar 可以在论坛文章、博客评论等中标识人员。 (你可以在 Gravatar 网站上注册自己的 Gravatar，网址为 http://www.gravatar.com/.) 如果要在网站上的人员姓名或电子邮件地址旁边显示图像，可以使用 Gravatar 帮助程序。

在此示例中，你将使用表示自己的单个 Gravatar。 使用 Gravatar 的另一种方法是让用户在您的网站上注册时指定其 Gravatar 地址。 (在向 ASP.NET 网页 Site.) 添加安全性和成员身份中可以了解如何让用户注册。然后，每当显示该用户的信息时，只需将 Gravatar 添加到显示用户名的位置。

  1. 按照在 ASP.NET 网页网站中安装帮助程序中所述，将 ASP.NET Web 帮助程序库添加到网站（如果尚未这样做）。

  2. 创建名为 Gravatar.cshtml 的新网页。

  3. 将以下标记添加到 文件：

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

    方法 Gravatar.GetHtml 在页面上显示 Gravatar 图像。 若要更改图像的大小，可以包含数字作为第二个参数。 默认大小为 80。 小于 80 的数字会使图像更小。 大于 80 的数字会使图像变大。

  4. 在 方法中 Gravatar.GetHtml ，将 替换为 <Your Gravatar account here> 用于 Gravatar 帐户的电子邮件地址。 (如果没有 Gravatar 帐户，可以使用该帐户的用户的电子邮件地址。)

  5. 在浏览器中运行页面。 该页显示指定电子邮件地址的两个 Gravatar 图像。 第二个图像小于第一个图像。

    图片 4

显示 Xbox 玩家卡

当用户在线玩 Microsoft Xbox 游戏时，每个用户都有一个唯一的 ID。 每个玩家的统计信息以玩家卡的形式保存，显示其信誉、玩家分数和最近玩游戏。 如果你是 Xbox 玩家，则可以使用GamerCard帮助程序在网站的页面上向玩家显示卡。

  1. 按照在 ASP.NET 网页网站中安装帮助程序中所述，将 ASP.NET Web 帮助程序库添加到网站（如果尚未这样做）。

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

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

    使用 GamerCard.GetHtml 属性指定要显示的玩家卡的别名。

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

    图片 5