Open Graph Metadata for SEBLOD Content Types

Open Graph Metadata for SEBLOD Content Types

April 17, 2015

The Open Graph Metadata Schema helps to give your content better visibility on social networks like Facebook. Use this post to learn how to add this to your SEBLOD content types.

The technique I use to add Open Graph Metadata information to the Content View of my SEBLOD Content Types require using a postition override in order  to take full control over the Content View in a PHP file.

My example below is what I use in this blog for my blog posts. In your Content Type (and in your Content View) make sure you have a field where you enter the Title, Description (or snippet) for your content, and an Image Upload field. In my demo below, I'm using the SEBLOD fields called art_title, blog_snippet (a custom field of mine), and blog_feature_image (another custom field of mine), respectively.

You can copy and paste the code in red below directly in to your postition override PHP file or use the button below to download a template file (make sure you change the file extension to .php). If you're using other fields for your Title, Description and Image, make sure you replace the values in my example with your actual field names.

<?php

// Retrieve Joomla Application and Document
$mainframe = JFactory::getApplication();
$document = JFactory::getDocument();

// Define Open Graph Metadata
$ogimg = '<meta property="og:image" content="'. JURI::base() .''.$cck->getThumb2('blog_feature_image').'" />';
$ogtitle = '<meta property="og:title" content="'.$cck->getValue('art_title').'" />';
$ogtype = '<meta property="og:type" content="article" />';
$desc = $cck->getValue('blog_snippet');
$desc .= strip_tags($desc);
$ogdesc = '<meta property="og:description" content="'.$desc.'" />';
$ogurl = '<meta property="og:url" content="'.JURI::current().'" />';
$ogsite_name = '<meta property="og:site_name" content="'.$mainframe->getCfg('sitename').'" />';

// Add Open Graph Metadata to header
$document->addCustomTag($ogimg);
$document->addCustomTag($ogdesc);
$document->addCustomTag($ogtitle);
$document->addCustomTag($ogtype);
$document->addCustomTag($ogurl);
$document->addCustomTag($ogsite_name);

?>

Download a template position override PHP file directly

After adding this to your position override PHP file, you can test your link using the Facebook URL Linter / Debug Tool. This tool shows you exactly what Facebook sees when it scrapes your URL in order to show a preview card. You can also use tool to re-cache your URL's content by clicking "Fetch new scrape information".