How to Output the "Full Article Image" with Shack Open Graph

Documentation for Joomla 3

Our Shack Open Graph extension helps your site visitors to smoothly and effectively share your Joomla content on Facebook. When you enable it, it will add Open Graph meta tags to the header section of your site. Facebook uses them when someone shares a content item of your site on their FB page.

In this document, you will learn how to include the "Full Article Image" to a Facebook share.

This is a four-step process:

Create a Facebook Application for your Joomla site and add its ID number to Shack Open Graph
Enable the Open Graph in Shack Open Graph
Set an image in the "Full Article Image" setting for the required Joomla article
Re-scrape the article with Facebook Sharing Debugger

What is the Full Article Image

The Full Article Image is an image that Joomla will display at the very top of a page with a full Joomla article:

full article image displayed

Step #1. Create a Facebook Application for your Joomla site

This step is optional. But we highly recommend you create a Facebook Application for your Joomla site.

Read this tutorial on how to create a Facebook Application.
Copy the Facebook Application ID number.
In your Joomla administrator panel, go to "Extensions" > "Plugins":

go to extensions plugins

You will be taken to the "Plugins" screen. Search for the "shack open graph" and once you see it listed, click on its name to open it for editing:

open shack open graph for editing

This will open up the "Plugins: System - Shack Open Graph Pro" screen. Paste your Facebook Application ID into the "Facebook application ID" field:

Click "Save".

Good job! In the next step, you will turn on the Open Graph tags for your Joomla site using the Shack Open Graph Joomla plugin.

Step #2. Enable Open Graph tags

Still in the "Plugins: System - Shack Open Graph Pro" screen, set the "Site details" parameter to "Yes":

set the site details to yes

Click "Save".
Check the source code of your Joomla site. You should see the Open Graph og: tags in the header section:

open graph tags added

Take note that the og:image tag is not displayed. It happens since your article doesn't have an image yet. Let's add a full article image.

Step #3. Add the Full Article Image to the required Joomla article

Open your Joomla article for editing. For our demonstration, I am using the sample "Smart Search" article. Click the "Images and Links" tab:

click images and links

Locate the "Full Article Image" parameter. Click its "Select" button and add an image:

add full article image

Click "Save".
Check the source code of the page of the article. You will see the og:image Open Graph meta tag referencing the full article image you just added:

open graph tag for image added

This looks like a job done, but there is one more step you have to do.

It is very likely that Facebook crawler scraped your Joomla article before you added the full article image in it. In such a case, Facebook keeps that image-less version of the article in its cache.

What if someone would like to share this article on their Facebook timeline? To the first such person, Facebook will pull the Open Graph metadata from the previously cached image-less version of this article. This means that such a person won't see the full article image in the Facebook share.

In the next step, you will use the Facebook Sharing Debugger to re-scrape the article page and clear its image-less version from Facebook's cache.

Step #4. Re-scrape the article using Facebook Sharing Debugger

In your Shack Open Graph screen, click the "Advanced" tab:

click the advanced tab

On the Advanced tab, click "Open Facebook Debugger":

You will be taken to the Sharing Debugger tab on Facebook for Developers screen, as shown in the image below. Paste the URL of your Joomla article into the field and click "Debug":

click debug

You might see a warning that your og:image Open Graph meta tag is missing with no image displayed in the "Link Preview":

no image open graph meta tag

Click the "Scrape Again" button twice:

You will now see the warnings about missing Open Graph meta tags gone and the image displayed:

the article open graph meta data rescraped

Documentation for J4