The Facebook Open Graph tags are a way to describe your page to Facebook. When utilized, you can easily control the title, description, image, and other information that is shown in a user's wall when a page is Liked, Shared, or Commented on. This helps to ensure that the message and brand for your pages is always how you want it to be.
The Open Graph support in JFBConnect is extensive and powerful, yet flexible and easy to implement. When setup properly, invisible tags will appear in your HTML, like below:
<meta property="og:title" content="SourceCoast Web Development"/>
<meta property="og:image" content="http://www.sourcecoast.com/templates/source_coast_template/images/logo.png"/>
<meta property="og:url" content="http://www.sourcecoast.com/"/>
<meta property="og:description" content="Joomla Facebook Connect integration, payment systems, and custom Joomla development based in FL"/>
Since there are many ways to add tags to your page with JFBConnect, Open Graph fields will be added to your page in the following order:
On individual pages where you want to specify a unique title, description, image or other information about your page, you can use the JFBConnect Open Graph tags to override the defaults. Instead of doing this on every page manually, we recommend using this option sparingly and letting JFBConnect add tags with the other methods described below.
To add tags to specific content, use the following format in an Joomla article, custom HTML module, template file, or anywhere else on the page, and JFBConnect will do the rest:
{SCOpenGraph image=http://domain.com/betterimage.jpg}
{SCOpenGraph title=My Great Article about Facebook Integration}
{SCOpenGraph description=Facebook integration with Joomla is made extremely simple using JFBConnect}
For certain extensions, JFBConnect includes specific Open Graph plugins to set tags appropriate to the different views of the extension. We currently support Joomla Content, EasyBlog, EasySocial, JomSocial, JReviews and K2 in these plugins.
By installing and enabling any of the Open Graph plugins that are included with JFBConnect, most tags will automatically be set for your page. For example, if you enable the Open Graph - Content plugin, JFBConnect will automatically set the title and description for your Joomla page using the title and intro text to your article. The image used on Facebook will be set to the first image found in the article.
Once an Open Graph plugin is installed, you can even add more flexibility over how the tags are set by creating an 'object' for your pages. For instance, you can configure the automatically generated tags for a specific article category. To learn more, see our JFBConnect Object Creation guide.
If you go to the Meta -> Configuration section of JFBConnect, you can set 'default' values for each tag type. This is useful in case a tag can't be set for a page, you always know what the fall back value will be.
The default fields specified on this page will be added to all of your site pages. However, they will not override any {SCOpenGraph} tags. This should be a list of Open Graph fields and values, separated by carriage returns. See example of a valid entry below.
A good example is to set your logo as a default image tag. When set, that will ensure that on any page that an image could not be set using the methods above, your logo will be used in Facebook posts instead of a random or unknown image from that page.
If tags are not already added with any of the above methods, Description, URL and Title will be added automatically by JFBConnect from your page's meta information. Note: Instead of setting a default title, description and URL with Meta > Configuration > Defaults, we recommend these automatic tags so that each page uses its own title, description and URL instead of a generic value across all pages.
Facebook caches the Open Graph tags on your page, so when you make changes, they may not appear immediately when if you share your content. It can generally take Facebook a few days to automatically update their data about your pages.
However, you can test how Facebook 'sees' your pages by using the Facebook URL Debug Tool. This will also update Facebok's cached data for that page so that you can verify and use the new tags immediately.
Please see our Common Support Questions item for "My Share Preview is Incorrect" for tips on troubleshooting incorrect Open Graph tags.