Customize Your Joomla Articles for Facebook Sharing

One of our users asked for a way to customize the content that is displayed when sharing a Joomla article in Facebook.

Facebook scrapes the meta information for the article's description and title, and also automatically pick a relevant image.

I'm going to explain how to add an image to articles and customize the meta information that is displayed when you share a link.

Sharing an article in Facebook

When we share a Joomla article in Facebook, we do it by copy and pasting the URL as a new post.

Automatically, Facebook looks at our article to extract:

• An image
• A title
• A description

A user would ask: where this content is coming from? It may looks like a somewhat random decision from Facebook. The image can be especially confusing. It sometimes just picks the first image from the page, even if that is the site's logo. 

However, we can decide which content to display on Facebook. Continue reading to find out how.

Step #1. Choose an image for your article

There is no guarantee this method will work as expected, however adding an image to our article will increase the chances that Facebook can pick our choice.

• Go to Content > Articles > Your article

There are two methods to include an image within an article. 

First, you can go the "Images and links" tab and choose a "Full article image":

The alternative is to add the image directly into the content:

.

Step #2. Define a custom title and description for your article

To manage easily the meta content that Facebook extract from the article, such as title and description, we recommend OSMeta.

• You can download OSMeta from Alledia.com^[1]. Either the free or Pro version will work for articles. If you want to manage menu items and K2 items, go for the Pro.
• Install OSMeta into your site.

Let's define the title and introduction text for our article.

• Go to Components > OSMeta.

• Find your article, and fill in these boxes:

Step #4. End result

Copy and paste the URL as a new post in the social network to see your custom image, title and description.

Tip: Debug article's URL through Facebooks developer tools

When you share a URL for the first time, Facebook save the image, description and title. If you later decide to update the Joomla article and share the URL again through Facebook, those changes won't be reflected.

You need to tell Facebook to scrape the new information.

• Go to Facebook Developers site^[2].
• Paste the public article's URL into the Input URL field.
• Click "Fetch new scrape information".

Scroll down to preview the content and confirm the new image, title and description are up-to-date.

When using Open Graph in Joomla

If your site uses an Open Graph extension, it will generate meta information that has higher priority over the default settings in this tutorial. In that case, check with the developers documentation how to manage the image, title and description.