Extending Orchard.Framework for Facebook Open Graph Meta

Topics: Writing modules
Feb 19, 2011 at 4:33 PM

Hello fellow devs,

I am hoping you can help me with a module writing issue.  I am currently writing a module much like the Vandelay.Meta module that allows you to add meta tags to each new page that you create.  Only in my module, I want to add Facebook's Open Social Graph meta tags (http://developers.facebook.com/docs/opengraph/).  This will allow a like button to be placed on each page that, when clicked, will grab the OG data such as title, description, thumbnail image url, etc. and make a nice wall post on Facebook.

The problem is that, instead of using the "name" and "content" convention that is the standard for meta tags, the OG meta tags use "property" and "content" as a convention.  OG tags also require that two additional namespaces be added to the html tage so that it ultimately looks like this:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">

The Orchard.Framework.UI.Resources.MetaEntry does not currently have a attribute for "property".  It only has "name", "content", "HttpEquiv", "Charset", etc as you would expect.  I added the "property" attribute, but it doesn't work in my build.

So, I need for my module to do two things:

  1. Utilize a "property" attribute of the meta tag rather than a "name" attribute.
  2. Add the additional namespaces to the HTML tag.

Any help you can offer would be greatly appreciated.  I am new to Orchard and am very excited about it, but need to understand more about how to construct these modules when extending the Orchard.Framework source needs to be altered.

Thanks,

Matt

Coordinator
Feb 22, 2011 at 12:44 AM

MetaEntry has a method that can be used to add arbitrary attributes: AddAttribute. Did you try that?

Feb 22, 2011 at 5:00 AM

Sadly, no joy.  Perhaps I am doing something incorrectly:

 if (!String.IsNullOrWhiteSpace(part.title)) {
               
                MetaEntry title = new MetaEntry();
                title.AddAttribute("property", "og:title");
                title.AddAttribute("content", part.title);

                resourceManager.SetMeta(title);
            }

To be clear, this compiles without error, but fails to actually write the metatag to the page.

I must be missing something obvious here. . .

Coordinator
Feb 22, 2011 at 5:46 AM

Ah, that may be a bug. I've asked the dev for that feature to take a look. A workaround in the meantime may be to add a name attribute.

Feb 22, 2011 at 11:14 AM

Okay.  Please feel free to put me in touch with that dev if he/she doesn't have the bandwidth to get to it.  I am happy to help but just may need to be pointed in the right direction.  mattcashatt at gmail dot com.

Coordinator
Feb 22, 2011 at 10:33 PM

I think the problem is that you're not giving it a Name. Try this:

                MetaEntry title = new MetaEntry { Name: "ogcontent" };
                title.AddAttribute("property", "og:title");
                title.AddAttribute("content", part.title);

                resourceManager.SetMeta(title);
That should work. Does giving it a name break your scenario somehow? The name is what uniquely identifies a metatag, which is what makes it possible to do 'AppendMeta', where you can add to the content of an existing meta tag (such as 'keywords', for example).

Feb 23, 2011 at 12:35 AM

@infinitiesloop:  Thanks for your reply!  That worked in that if finally wrote this tag to the page:

<meta content="test title" name="ogcontent" property="og:title" />

Any way to get rid of the "name" attribute though so that the tag just has "property" and "content" attributes?  Not sure if it matters to Facebook's OG runtime or not.  

Also--if I may push my luck here--any insight on how to modify the HTML tag to include the necessary namespaces like so:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
Thanks!

Matt
Editor
Jun 21, 2011 at 10:03 PM

Did anyone ever figure out a way to modify the HTML node in Orchard? The remaining question of this thread.

Coordinator
Jun 21, 2011 at 10:16 PM

Have your own document.cshtml in your theme.

Oct 4, 2011 at 3:26 PM

Was this ever competed? I would love to be able to add this stuff to my site. I have a Facebook like button - buts its a bit useless as it posts a so-and-so likes this link... then its kinda gone.

 

Cheers,

 

Scott

Editor
Oct 4, 2011 at 3:28 PM

I am not sure if a module was ever created, but I modified Document.cshtml to add the appropriate tags.

Oct 4, 2011 at 3:34 PM

Thats what I have resorted to doing, however - is it possible to modify the document.cshtml only for the index page, and is it possible to keep the <title> attribute? I seem to have lost that..

 

Thanks,

Editor
Oct 4, 2011 at 3:41 PM

    var title = (Request.Path.TrimEnd('/') != Request.ApplicationPath && HasText(Model.Title)                    ? Model.Title + WorkContext.CurrentSite.PageTitleSeparator                    : "") +        WorkContext.CurrentSite.SiteName;        

Developer
Nov 27, 2011 at 5:09 PM

Anybody wants to team up and extend the Facebook Suite module with Open Graph functionality?