65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Open Graph 协议让您的页面社交化

Yvan Rodrigues
starIconstarIconstarIconstarIconstarIcon

5.00/5 (6投票s)

2011年10月27日

CPOL

3分钟阅读

viewsIcon

40262

downloadIcon

1413

Open Graph 协议指定了可以添加到页面中的附加元标记，以便为社交网站提供有关您页面的更多信息。

引言

<jargon>Open Graph 协议使任何网页都可以在社交关系图中成为一个丰富的对象。</jargon>

本文演示了

  • Open Graph 协议的使用
  • 如何创建一个简单的自定义 ASP.NET 服务器控件
  • 如何使用我们的服务器控件添加 Open Graph 属性

背景

Open Graph 协议指定了可以添加到页面的 <head> 中的附加 元标记，以便为搜索引擎和社交网站提供有关您的页面内容的附加信息。该协议当前最常见的用途可能是当用户单击“赞”按钮时，向 Facebook 详细说明有关您网站的信息。另一个用途是添加关于图像、视频片段或声音片段的 元数据，以描述内容的性质及其创建者。

该协议在 Open Graph 协议页面中进行了描述。它使用 RDFa 语法来扩展 HTML 文档的 <head> 中常见的 <meta> 元素。

Using the Code

当我决定将 Open Graph 添加到我的网站时（我后来删除了它；参见兴趣点），我创建了一个自定义服务器控件，用于 ASP.NET Web Form，因为我想以编程方式填充一些字段。该服务器控件可以轻松添加到您的页面。

  1. 添加对 RedCell.Web.OpenGraph 程序集的引用。
  2. 注册程序集并将其与标签前缀相关联。
  3. 将 runat="server" 属性添加到您的 <html> 和 <head> 元素，以便控件可以添加必要的“前缀”。
  4. 添加四个强制属性。
  5. 添加任何其他属性（有关完整列表，请参阅 Open Graph 协议文档）。

使用基本位的渲染 HTML5 的 Web Form 如下所示

<%@ Page Language="C#" %>
<%@ Register Assembly="RedCell.Web.OpenGraph" 
Namespace="RedCell.Web.OpenGraph" TagPrefix="og" %><!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" runat="server">
<head runat="server">
    <title>Happy Fun Ball</title>
    <og:Meta property="type" content="website" runat="server" />
    <og:Meta property="title" content="Happy Fun Ball" runat="server" />
    <og:Meta property="locale" content="en_CA" runat="server" />
    <og:Meta property="site_name" content="Children's Toy Depot" runat="server" />
    <og:Meta property="image" 
	content="http://example.com/images/happyfunball.png" runat="server" />
    <og:Meta property="image" 
	content="http://example.com/images/happyfunball.png" runat="server" />
    <og:Meta property="image:type" content="image/png" runat="server" />
    <og:Meta property="url" 
	content="http://example.com/products/balls/happyfunball" runat="server" />
</head>

<body>
    <h1>Happy Fun Ball</h1>
    <section id="warnings">
        <p>Do not expose Happy Fun Ball to children.</p>
    </section>
</body>
</html>

当呈现此 Web Form 时，它将生成如下代码

<!DOCTYPE html>
<html id="Html1" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
<head id="Head1" prefix="website: http://ogp.me/ns/website#">
    <title>Happy Fun Ball</title>
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Happy Fun Ball" />
    <meta property="og:image" content="http://example.com/images/happyfunball.png" />
    <meta property="og:url" content="http://example.com/products/balls/happyfunball" />
</head>
<body>
    <h1>Happy Fun Ball</h1>
    <section id="warnings">
        <p>Do not expose Happy Fun Ball to children.</p>
    </section>
</body>
</html>

工作原理

自定义 ASP.NET 服务器控件是从 System.Web.UI.Control 继承的类。

默认情况下，任何是原始类型的 public 属性都可以在 Web Form 的标记中设置为属性。 这些称为简单属性。 在此示例中，我们通过将值分配给 property 和 content 属性来将值分配给 Property 和 Content 属性。 请注意大小写的灵活性。

应用于 Meta 类的 ToolboxData 属性指示设计器在将控件从工具箱拖动时将代码段插入到标记中。

我覆盖了 Control.OnLoad 方法来

  • 将所需的 prefix 属性添加到 <head> 元素
  • 评估 og:type 属性的值，确保其有效，如果需要，将 prefix 属性添加到 <head> 元素
  • 检查是否存在四个强制性 Open Graph 属性
  • 检查所有其他 Open Graph 属性是否都是有效的关键字

大多数自定义服务器控件旨在输出某种格式化的值。 我们通过覆盖 Control.RenderControl 方法来执行此操作。 此方法传递一个 HtmlTextWriter 实例，该实例具有正确形成有效标记所需的所有方法。

关注点

Open Graph 协议使用 RDFa 语法来扩展 HTML 文档的 <head> 中找到的 <meta> 元素。 应该注意的是，这样做会使大多数具有 DOCTYPE 的页面无效。 这是因为它依赖于在 <meta> 元素上使用 property 属性，只有在使用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> DOCTYPE 时，该属性才是有效的标记。

历史

这是我的第一篇文章。 它面向初学者。 欢迎提出建设性的反馈。

  • 2011 年 10 月 27 日：版本 1.0.0.x
© . All rights reserved.