Click here to Skip to main content
Click here to Skip to main content
Go to top

Make your Page Social with the Open Graph Protocol

, 28 Oct 2011
Rate this:
Please Sign up or sign in to vote.
The Open Graph protocol specifies additional meta tags that can be added to the page to supplement social networking sites with more information about your page.

Introduction

<jargon>The Open Graph protocol enables any web page to become a rich object in a social graph.</jargon>

This article demonstrates:

  • Use of the Open Graph protocol
  • How to create a simple custom ASP.NET server control
  • How to add Open Graph properties using our server control

Background

The Open Graph protocol specifies additional meta tags that can be added to the <head> of a page to supplement search engines and social networking sites with additional information about the content of your page. Probably the most common current use of the protocol is to detail information about your site to Facebook when a user clicks on a "Like" button. Another use is to add metadata about an image, video clip, or sound clip to describe the nature of the content and its creator.

The protocol is described at The Open Graph protocol page. It uses RDFa syntax to extend the <meta> elements commonly found in the <head> of HTML documents.

Using the Code

When I decided to add Open Graph to my site (I have since removed it; see Points of Interest), I created a custom server control for use on an ASP.NET Web Form, because I wanted to populate some of the fields programmatically. The server control can be easily added to your page.

  1. Add a reference to the RedCell.Web.OpenGraph assembly.
  2. Register the assembly and associate it with a tag prefix.
  3. Add the runat="server" attribute to your <html> and <head> elements, so that the control can add the necessary "prefixes".
  4. Add the four mandatory properties.
  5. Add any additional properties (see the Open Graph protocol documentation for the complete list).

An Web Form that renders HTML5 with the essential bits and pieces would look like:

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

When this Web Form is rendered, it will produce code like:

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

How It Works

A custom ASP.NET server control is a class that inherits from System.Web.UI.Control.

By default, any public properties that are primitive types can be set in the Web Form's mark-up as attributes. These are called simple properties. In the example, we assign values to the Property and Content properties by assigning values to the property and content attributes. Note the flexibility in case.

The ToolboxData attribute that is applied to the Meta class instructs the Designer to insert a snippet of code into the mark-up when the control is dragged from the Toolbox.

I have overridden the Control.OnLoad method to:

  • Add the required prefix attribute to the <head> element
  • Evaluate the value of the og:type property, make sure it is valid, and add a prefix attribute to the <head> element if required
  • Check that the four mandatory Open Graph properties are present
  • Check that all other Open Graph properties are valid keywords

Most custom server controls are intended to output some kind of formatted value. We perform this by overriding Control.RenderControl method. This method is passed an HtmlTextWriter instance, which has all the required methods to properly form valid mark-up.

Points of Interest

The Open Graph protocol uses RDFa syntax to extend <meta> elements found in the <head> of the HTML documents. It should be noted that by doing so, it makes pages with most DOCTYPEs invalid. This is because it relies on the use of the property attribute on the <meta> element, which is only valid markup if using the <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> DOCTYPE.

History

This is my first article. It is intended for beginners. Constructive feedback would be appreciated.

  • October 27, 2011: Version 1.0.0.x

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Yvan Rodrigues
President Red Cell Innovation Inc.
Canada Canada
Yvan Rodrigues has 25 years of experience in information systems and software development for the manufacturing sector. He runs Red Cell Innovation Inc./L'innovation de Globules Rouges, a consulting company focusing on efficiency and automation of manufacturing and business processes for small businesses, healthcare, and the public sector. He is a Certified Technician (C.Tech.), a professional designation granted by the Institute of Engineering Technology of Ontario (IETO).
 
Yvan draws on experience at Mabel's Labels Inc. as Manager of Systems and Development, and the University of Waterloo as Information Systems Manager.
 
Yvan supports open-source software. He is a committer for SharpKit (C# to Javascript cross-compiler) and WebIssues (Issue/Ticket Management System), and contributes to MySQL, Ghostscript, iTextSharp, Bacula, FreeBSD, MonoTouch, and Mono for Android.
 
Yvan's consumer-focused apps can be found in the Windows Store, Apple App Store, and Google Play marketplace.
Follow on   Google+   LinkedIn

Comments and Discussions

 
QuestionHtml Tag Attribute (opengraphprotocol.org vs ogp.me) [modified] PinmvpAspDotNetDev28-Oct-11 8:43 
AnswerRe: Head Tag Attribute (opengraphprotocol.org vs ogp.me) PinmemberYvan Rodrigues28-Oct-11 9:27 
I believe the xmlns:og namespace attribute is part of a previous and now deprecated version of the protocol.
Like all things Facebook, everything is subject to change... possibly daily.
 
Yvan Rodrigues
Red Cell Innovation Inc.
GeneralRe: Html Tag Attribute (opengraphprotocol.org vs ogp.me) PinmvpAspDotNetDev28-Oct-11 9:42 
GeneralRe: Html Tag Attribute (opengraphprotocol.org vs ogp.me) PinmemberYvan Rodrigues28-Oct-11 9:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 28 Oct 2011
Article Copyright 2011 by Yvan Rodrigues
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid