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

项目
07/13/2023

本文介绍如何将 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 帮助程序添加到页面。访问页面人员可以单击单个字形。如果他们拥有该社交网络网站的帐户，则可以在该网站上发布指向你的页面的链接。

如在 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 帮助程序运行时，页面标题将作为参数传递，而参数又将页面标题传递给社交网络网站。但是，可以传入所需的任何字符串。此示例还指定要在列表中包括哪些社交网络网站。您可以指定与您的网站相关的社交网站。
在浏览器中运行 ListLinkShare.cshtml 页。 (在运行页面之前，请确保已在 “文件” 工作区中选择该页面。)
单击注册的其中一个站点的字形。该链接将转到所选社交网络网站上的页面，你可以在其中共享链接。例如，如果单击 Reddit 链接，则会转到 submit to reddit Reddit 网站上的页面。

添加 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 添加到显示用户名的位置。

按照在 ASP.NET 网页网站中安装帮助程序中所述，将 ASP.NET Web 帮助程序库添加到网站（如果尚未这样做）。
创建名为 Gravatar.cshtml 的新网页。

将以下标记添加到文件：

@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 的数字会使图像变大。

在方法中 Gravatar.GetHtml ，将替换为 <Your Gravatar account here> 用于 Gravatar 帐户的电子邮件地址。 (如果没有 Gravatar 帐户，可以使用该帐户的用户的电子邮件地址。)
在浏览器中运行页面。该页显示指定电子邮件地址的两个 Gravatar 图像。第二个图像小于第一个图像。

显示 Xbox 玩家卡

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

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

创建名为 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 属性指定要显示的玩家卡的别名。

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

通过

本教程中使用的软件版本

添加 Twitter 源

显示 Facebook“赞”按钮

呈现 Gravatar 图像

显示 Xbox 玩家卡

反馈

其他资源

通过

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

本教程中使用的软件版本

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

添加 Twitter 源

显示 Facebook“赞”按钮

呈现 Gravatar 图像

显示 Xbox 玩家卡

反馈

其他资源