Click here to Skip to main content
15,867,686 members
Articles / Web Development / HTML

Make your Page Social with the Open Graph Protocol

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
28 Oct 2011CPOL3 min read 38.6K   1.4K   24   4
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:

ASP.NET
<%@ 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:

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


Written By
Engineer Robotic Assistance Devices / AITX
Canada Canada
Yvan Rodrigues has 30 years of experience in information systems and software development for the industry. He is Senior Concept Designer at Robotic Assistance Devices

He is a Certified Technician (C.Tech.), a professional designation granted by the Institute of Engineering Technology of Ontario (IETO).

Yvan draws on experience as owner of Red Cell Innovation Inc., Mabel's Labels Inc. as Manager of Systems and Development, the University of Waterloo as Information Systems Manager, and OTTO Motors as Senior Systems Engineer and Senior Concept Designer.

Yvan is currently focused on design of embedded systems.

Comments and Discussions

 
QuestionHtml Tag Attribute (opengraphprotocol.org vs ogp.me) Pin
AspDotNetDev28-Oct-11 8:43
protectorAspDotNetDev28-Oct-11 8:43 
AnswerRe: Head Tag Attribute (opengraphprotocol.org vs ogp.me) Pin
Yvan Rodrigues28-Oct-11 9:27
professionalYvan Rodrigues28-Oct-11 9:27 
GeneralRe: Html Tag Attribute (opengraphprotocol.org vs ogp.me) Pin
AspDotNetDev28-Oct-11 9:42
protectorAspDotNetDev28-Oct-11 9:42 
GeneralRe: Html Tag Attribute (opengraphprotocol.org vs ogp.me) Pin
Yvan Rodrigues28-Oct-11 9:49
professionalYvan Rodrigues28-Oct-11 9:49 

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

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