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.
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:
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: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:
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.
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:
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.
Here is a ZOO element and Joomla! system plugin that need to be configured.
After installation there is a System - Open Graph for ZOO plugin. It has following params:
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!
Now ZOO have got new element that might be implemented in the App. Please read ZOO documentation.
If you are not familiar how to manage ZOO elements, here is a guide: Assigning ZOO elements to Apps
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:
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 -->
A: Yes! You can control and set custom values for Open Graph tags via the element that appears in item edit mode.
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.
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.