Open Graph for ZOO

1. Getting started

Open Graph for ZOO is extension for ZOO (CCK for Joomla!) that implementing meta-tags of Open Graph protocol and compatible with any ZOO App for which the element is assigned to. The installation package consist of an element for ZOO (CCK for Joomla!) and system plugin.

The Open Graph protocol enables any web page to become a rich object in a social graph and was created as a part of Facebook API platform. These pages gain the functionality of other graph objects including profile links and stream updates for connected users. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. Soon Open Graph protocol which basically is made for FB purposes was accepted by Twitter.

Twitter card tags look similar to Open Graph tags, and that’s because they are based on the same conventions as the Open Graph protocol. When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property.

Open Graph Markers for ZOO marks page with both standard: Open Graph for Facebook and tags for Twitter. Using OG tags you may manage markup of the object to posting like title, description, data, language code, custom image and etc (see the list below). And finally, the element adds two micro data tags.

How it looks like?

In typical situation when the page have no OG tags, the Facebook collect the data from suggested page automatically and sometimes it’s not nice when you post a link on interesting article, but FB takes image element from design instead of preferable image or there is no description, etc.

Using OG protocol can help to manage the data that appears in social network when you post a link. Once you post a link on web-page in Facebook that marked with Open Graph tags, you’ll get Facebook / Twitter object with predefined data and the final result will looks really nice.

So, Open Graph for ZOO element marks ZOO content with following tags:

Facebook:

og:locale - Language code
og:type - Type of the content
og:title - Content title
og:image - URL to image
og:url - URL to the page
og:site_name - Website name
article:published_time - Published time
article:modified_time - Modified time
og:updated_time - Updated time (last modified)

Twitter:

twitter:card - Card Type. (example value: “summary”)
twitter:title - Title of the page
twitter:site - Twitter account of website
twitter:url - link to the web-page
twitter:creator - Twitter account of content author
twitter:image - Link to content image

Examples in pictures:

Example of Twitter Card Types
Example of Twitter Card Types
Example of sharing a page in Facebook that has Open Graph tags
Example of sharing a page in Facebook that has Open Graph tags

The plugin automatically generates Open Graph data taken from core content item settings (title, image). But you can control these tags and set custom values if needed. If no image is selected in the item, then default image will be taken from plugin settings.

2. Installation

Open Graph for ZOO can be installed as typical extension for CMS Joomla! via standard process of installation. Go to your website back-end > Extensions > Extension manager > Install extension. Upload the latest version of package file taken from NorrNext repository.

Installation package has the following extensions:

  • ZOO element - can be configured as an element for ZOO App
  • System plugin - available as typical plugin in Joomla extension manager

After installing the package, go to Plugins > Open Graph system plugin, configure and enable it! If this plugin is disabled, no Open Graph element will be appeared in ZOO.

3. Configuration

Here is a ZOO element and Joomla! system plugin that need to be configured.

System plugin

After installation there is a System - Open Graph for ZOO plugin. It has following params:

  • Image - choose default image for Open Graph if the content have no image. I.e. you may use special picture with logotype of your website.
  • Twitter Site - Twitter account related to your website
  • Twitter Creator - Twitter account of content author
  • Twitter Card type Available options: Summary, Summary large image and Photo. More information: Twitter Card Types
  • Facebook admins (optional) - IDs of Facebook administrators separated by comma. Find your Facebook ID
  • Facebook application ID (optional) - ID of Facebook application.

Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. Read more: Optimize images to generate great previews

To get Facebook ID you need to create an App. More information can be found here: Register and Configure an App Note: you should select website platform during the App creation.

Do not forget to enable the plugin!

ZOO element

Now ZOO have got new element that might be implemented in the App. Please read ZOO documentation: http://yootheme.com/zoo/documentation

If you are not familiar how to manage ZOO elements, here is a guide: Assigning ZOO elements to Apps

4. Using the Open Graph for ZOO

Open ZOO content item for edit and see Open Graph element in the panel that is rolled up (disabled). Just click on its button and get params available for configuration. If Open Graph settings it’s not configured manually by content author, the plugin generate meta-tags according default settings of the article. Click on its settings “Configure it manually”.

There are following fields and elements:

  • Title - Custom Article’s title
  • Description - Custom article’s description
  • Type - default value is website. You may input any other type manually (i.e. video)
  • Image selector - a button to select image from your computer’s HDD

5. Example of HTML tags in front-end

Here is how ZOO OpenGprah generates meta-tags:

<!-- Start Norrnext Open Graph Meta Tags -->
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="article"/>
<meta property="og:title" content="Open Graph for ZOO"/>
<meta property="og:image" content="http://joomla.norrnext.com/images/test_opengraph.jpg"/>
<meta property="og:description" content="This demo page for Open Graph for ZOO Plugin" />
<meta property="og:url" content="http://joomla.norrnext.com/zoo-apps/zoo-opengraph"/>
<meta property="og:site_name" content="NorrNext Demo"/>
<meta property="article:published_time" content="2015-01-11T16:36:32+00:00" />
<meta property="article:modified_time" content="2015-02-05T07:43:03+00:00" />
<meta property="og:updated_time" content="2015-02-05T07:43:03+00:00" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Open Graph for ZOO"/>
<meta name="twitter:description" content="This demo page for Open Graph for ZOO Plugin"/>
<meta name="twitter:site" content="@norrnext"/>
<meta name="twitter:url" content="http://joomla.norrnext.com/zoo-apps/zoo-opengraph"/>
<meta name="twitter:creator" content="@norrnext"/>
<meta name="twitter:image" content="http://joomla.norrnext.com/images/test_opengraph.jpg"/>
<meta itemprop="name" content="Open Graph for ZOO">
<meta itemprop="description" content="This demo page for Open Graph for ZOO Plugin">
<meta itemprop="image" content="http://joomla.norrnext.com/images/test_opengraph.jpg">
<!--/ End Norrnext Open Graph Meta Tags -->

F.A.Q.

Q: I want to set custom image for Open Graph which differs from the image displayed on the page. Is it be possible?

A: Yes! You can control and set custom values for Open Graph tags via the element that appears in item edit mode.

Q: The item has been published / I changed the image for item, but I do not see new image in Facebook. Why?

A: Facebook stores and caching all images. When you sharing a post with the URL first time or changed the image, you should clean Facebook cache. Open Sharing Debugger and paste URL of your page. Then click on Scrape Again button to purge Facebook cache. After a few seconds the data will be renewed.

Clean cache via Facebook debugger
Paste URL and click on Scrape Again button to clean FB cache
Q: The plugin does not proceed item image automatically even after clearing FB cache.

It seems you have inserted image as a part of text area. ZOO item should have image element which is used by OG plugin for automatic process. Otherwise deault OG image will be used. Please add custom image element to the content type. The Open Graph plugin will take image automatically from this element. Otherwise you can assign the image via the OG element manually.

Video guide