Open Graph Tags

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=""/>
<meta property="og:url" content=""/>
<meta property="og:description" content="Joomla Facebook Connect integration, payment systems, and custom Joomla development based in FL"/>

Open Graph 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. To learn more, see our JFBConnect Object Creation guide.

Per-Page Overrides

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. To do so, 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=}
{SCOpenGraph title=My Great Article about Facebook Integration}
{SCOpenGraph description=Facebook integration with Joomla is made extremely simple using JFBConnect}

Default Site-Wide Open Graph Easy-Tags

If you go to the Social 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.

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.

Open Graph Defaults

Open Graph fields will be added to your page in the following order:

  1. All {SCOpenGraph} tags will be added first. Use these tags to specify values for individual pages.
  2. If SourceCoast's OpenGraph plugins are enabled, those tags will be added to the page.
  3. The default fields specified on this page will be added to all of your site pages. 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.
  4. If not already added, Description, URL and Title will be added automatically by JFBConnect.
    (Note: We recommend these automatic tags so that each page uses its own title, description and URL instead of a generic value across all pages.)


Debugging and Testing Open Graph Tags in Joomla

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.

Social Stream
Hide. Seek. Play!

Countdown Hide & Seek Game

Countdown, the new hide & seek toy, is available now! Designed and developed by the founders of SourceCoast, it's the perfect toy to get your kids moving at all ages.

Learn More About the Hide and Seek Toy