Quick Start Guide to Shack Open Graph

Getting started with Shack Open Graph is a four-step process:

  1. Select which components will be using Open Graph tags
  2. Configure the Open Graph section.
  3. Configure the Twitter Card section.
  4. Configure the Images section.

Let's take a look at each of these four steps in more detail.


Step #1. Select components to use Open Graph

Shack Open Graph allows you to control which of your components' pages will add the Open Graph tags on your site.

  • In your Joomla control panel go to Extensions > Plugins:

go to extensions plugins

  • You will be taken to the Plugins administrative page listing all the plugins installed on your site.
  • Enter shack open graph into the search field and press Enter on your keyboard:

enter open graph press the enter key

  • You will see only the Shack Open Graph plugin listed. Click on its title:

click on the plugin title

  • You will be taken to the Plugins: System - Shack Open Graph Pro screen.
  • Click on the Filter Components tab:

click on the filter components tab

  1. Filter type: Select whether you wish the listed component to be included in or excluded from displaying the Open Graph tags. Default setting: Include.
  2. Filter components: Select which exactly components you wish to be included in or excluded from displaying the Open Graph tags. If all views of the component must be used, then select only the component name. The component selected by default is Articles:

select components

  • Click Save.

Good job! You just configured what components will include or exclude Open Graph meta tags in their pages. In the next step, you will start setting the Open Graph tags.


Step #2. Configure the Open Graph section

open graph group of settings

  1. Site details: Click Yes if you would like your Shack Open Graph plugin to add to your site pages the meta tags with details about your site (og:title, og:type, og:url, og:site_name, og:description). If any other Joomla extension already added them, click No.
  2. Facebook admins ID (optional): Enter a comma-separated list of IDs of your Facebook pages administrators (optional). These Facebook users would have access to the analytics through Facebook Insights.
  3. Facebook application ID (optional): Enter here your Facebook Application ID. Adding this setting will allow you to use Facebook Insights which lets you view analytics for traffic to your site from Facebook.
  4. Add Open Graph namespace: Click Yes if you would like to add an XML namespace to the html tag of your site pages. Otherwise, click No. 

Step #3. Configure the Twitter Card section

twitter card group of settings

  1. Add Twitter Card Tags: Click Yes if you would like your site to support Twitter Cards. With this setting enabled, users who would tweet a link to your site content will get the link displayed as a "card".
  2. Site details: Click Yes if you would like to add the following Twitter Card tags with details about your site: twitter:card, twitter:url, twitter:title, twitter:description. 
  3. @username of website: Enter here your website Twitter usename. It will be displayed in tweets footer.
  4. @username of content creator: Enter here a Twitter username of a content creator (used only with the summary_large_image Twitter cards).
  5. Single image card type: Select 'summary' if your site uses only small size images. 
  6. Multiple images card type: Please, ignore this setting. It is obsolete and will be deleted from one of the future Shack Open Graph versions. 

Step #4. Configure the Images section

the images group of settings

  1. Limit images: Select here how many images to add to the Open Graph tag: the first image in the flow of the content item or up to 10 images. 
  2. Default image: Select here an image to be used by default if Twitter or Facebook crawlers won't find any image.
  3. Default image on home page: Select here if you would like to use the default image set in the previous setting only for your site Home page.
  4. Add component images: Select if Shack Open Graph should look only for images, placed in the components sections of your site.
  5. Only images with extension: Select whether Shack Open Graph should look for only images with extensions .jpg, .png and .gif. or for any images.
  6. Images in links: Select whether Shack Open Graph should look for images inside links, such as <a href="/image.png">
  7. Check image size: Please, ignore this setting. It will be updated in future Shack Open Graph versions.