社交图谱中的网页对象

Open Graph协议允许任何网页成为社交图谱中的一个丰富对象。本文将展示如何使用Open Graph协议,创建一个简单的自定义ASP.NET服务器控件,以及如何使用该控件添加Open Graph属性。

Open Graph协议指定了可以添加到页面部分的额外meta标签,以补充搜索引擎和社交网络站点关于页面内容的额外信息。目前最常见的用途是在用户点击“赞”按钮时,向Facebook提供关于网站的详细信息。另一个用途是添加关于图像、视频剪辑或声音剪辑的元数据,以描述内容的性质及其创作者。

协议在上有描述。它使用RDFa语法来扩展HTML文档中常见的元素。

使用代码

当决定在网站上添加Open Graph(后来已经移除了;参见“要点”),创建了一个自定义服务器控件用于ASP.NET Web表单,因为想以编程方式填充一些字段。该服务器控件可以轻松添加到页面。

要使用Open Graph协议,请按照以下步骤操作:

  • 添加对RedCell.Web.OpenGraph程序集的引用。
  • 注册程序集并将其与一个标签前缀关联。
  • 将runat="server"属性添加到和元素,以便控件可以添加必要的"前缀"。
  • 添加四个强制性属性。
  • 添加任何其他属性(参见Open Graph协议文档以获取完整列表)。

一个渲染HTML5并包含必要元素的Web表单将如下所示:

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

工作原理

自定义ASP.NET服务器控件是一个从System.Web.UI.Control继承的类。默认情况下,任何公共属性如果是基本类型,都可以在Web表单的标记中作为属性设置。这些被称为简单属性。在示例中,通过为property和content属性分配值来分配Property和Content属性的值。请注意大小写灵活性。

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

重写了Control.OnLoad方法以:

  • 向元素添加所需的prefix属性。
  • 评估og:type属性的值,确保其有效,并在需要时向元素添加prefix属性。
  • 检查四个强制性Open Graph属性是否存在。
  • 检查所有其他Open Graph属性是否为有效关键字。

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

要点

Open Graph协议使用RDFa语法来扩展HTML文档中的元素。需要注意的是,这样做会使大多数DOCTYPE的页面无效。这是因为它依赖于元素上的property属性,这只有在使用 DOCTYPE时才是有效的标记。

这是第一篇文章。它旨在为初学者提供帮助。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485