topside

Joomla + Facebook OpenGraph

Facebook has some relatively new OpenGraph web 2.0-ish technology that you can embed in your pages, allowing a content creator to easily provide all of a reasonable description of the content, users to easily 'like' the content which you provide, and embed a messaging/comment system among other things. While I hesitate to effectively 'hand the keys' over to one of the Internet's largest data aggreagators, the ease and elegance of the OpenGraph interface intrigued me enough to give it a whirl.

So, adding a like button seems like a good first step. Joomla has a relatively easy plugin system designed to allow dynamic options to be added, complete with installer and internationalization built in.

The first step is to build up a manifest for your plugin, which is an XML document.

opengraphlike.xml

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="plugin" group="content">
  <name>Content - OpenGraph Like Button</name>
  <author>Martin Bukowski</author>
  <creationDate>September 2010</creationDate>
  <copyright>Copyright (C) 2010 Martin J. Bukowski. All rights reserved.</copyright>
  <license>MIT</license>
  <authorEmail>martins email</authorEmail>
  <authorUrl>martinbukowski.com</authorUrl>
  <version>1.0</version>
  <description>Adds an OpenGraph Like IFrame to Items</description>
  <files>
    <filename plugin="graphlike">graphlike.php</filename>
  </files>
</install>

Next we define our event handler which intercepts our content as it's going out the door, and inserts it's payload.

opengraphlike.php

<?php
/**
* @version    $Id: opengraphlike.php $
* @package    Joomla
* @copyright  Copyright (C) Martin J. Bukowski. All rights reserved.
* @license    MIT
*/
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.plugin.plugin' );
class plgContentOpengraphlike extends JPlugin
{
  function plgContentOpengraphlike( &$subject, $params )
  {
    parent::__construct( $subject, $params );
    $this->_plugin = JPluginHelper::getPlugin( 'content', 'opengraphlike' );
    $this->_params = new JParameter( $this->_plugin->params );
  }

function onBeforeDisplayContent( &$article, &$params, $limitstart ) { global $mainframe; $link = trim(JURI::base(), ‘/’); $link .= $base.JRoute::_( ContentHelperRoute::getArticleRoute( $article->slug,
$article->catslug,
$article->sectionid ),
0 ); $link = urlencode( $link ); $layout = ‘button_count’; $show_faces = ‘false’; $action = ’like’; $color_scheme = ’light’; $width = 70; $url = “http://www.facebook.com/plugins/like.php?href=$link&amp;layout=$layout&amp;".
“show_faces=$show_faces&width=$width&action=$action&”.
“colorscheme=$color_scheme”;
$output = “<iframe src=’$url’ scrolling=‘no’ frameborder=‘0’ “.
“allowTransparency=‘true’ class=‘og_like’></iframe>”;
return $output; } } ?>

...and that's it. You now have a like button embedded in all your articles, quick and dirty. OpenGraph by default makes a pretty big footprint, but CSS allows for a relatively easy tweak for that.

.og_like {
  float: right; height: 30px; width: 70px;
}

The neatest part of the new OpenGraph API is the ease of use without having many of the usual API/Development issues. By IFraming all the content in, it allows Facebook to change the code on their end whenever they so choose with nobody any the wiser. This is great for their developers who may want to add new features or fix bugs without requiring changes. Any potential vulnerability or privacy issues in this? Probably, considering how every time they serve up that frame they are seeing a visit from your IP, and if you're logged in to Facebook they are seeing you.

So all in all, pros and cons. I have a feeling that the ease of use for this technology is going to only further Facebook as being the center of the web 2.0 world, much like Google rose to prominance (dominance) in the last era; eg, go ahead and click that Donate Virtual Currency button over there, and throw up some ads relevant to this article and Joe Visitors likes while you're at it.

Now, the above does nothing to fix the fact that your meta tags are not set right for OpenGraph, but that and adding comments will have to wait for some future articles.