3 minutes reading time (591 words)

How to share a page on Facebook

November-Share-on-FB

Have you ever shared a link on Facebook only to find the thumbnail was missing, or there was a different picture than you expected? If you don't explicitly tell Facebook what image to use then it makes a guess.

In Facebook’s own words,

“Without these Open Graph tags, the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image for your content. Designate this info explicitly with Open Graph tags to ensure the highest quality posts on Facebook.”

There are many Joomla extensions available that will let you add an image etc for Facebook to use but on a truly dynamic site this is a never ending task and one that is often forgotten or simply not practical in the real world.

For example I have a website using DPCalendar with thousands of events. It is not realistic for me to manually designate an image etc for each of these events. Even if I wanted to do it I can guarantee that I will miss some pages.

My Solution?

This is what I do. I am sharing it because others may find it useful. You are free to implement these same techniques or use your own. 

It may not be perfect but it guarantees that any page shared on Facebook from my site will have a unique branded image. Once I have set it up for a site I there is nothing else I have to do or remember.

The Trick

They key part of this method is to use Cloudinary to generate the images. Cloudinary will take any image sent to it and add text dynamically to the image. Once an image has been generated for a page (Cloudinary call this a transformation) then it will be used every time. As the free Cloudinary tier lets you perform 25 thousand transformations each month this hasn't cost me anything for the five sites I am using this on.

The Image

I am not going to document how to set up the dynamic text overlay for Cloudinary as it is well documented on their site - How to Add a Text Overlay. The key is to create a single image which encompasses your branding and has an area for the text to be displayed. 

4 example images used for Open Graph images

In these four example images you can see that I have left a solid coloured area where Cloudinary can add the text.

The Code

If you add the code below to the index.php of your template then your site will have all the appropriate Open Graph (OG) meta data to the head of every web page and whenever a page on your site is shared on Facebook (or any other site that supports Open Graph) the correct information will be used. 

$this->setMetaData('og:title', $this->getTitle(),  $attribute = 'property');
$this->setMetaData('og:url', URI::current(), $attribute = 'property');
$this->setMetaData('og:site_name', $sitename, $attribute = 'property');
$this->setMetaData('og:locale', $this->language,  $attribute = 'property');
$this->setMetaData('og:type', 'website',  $attribute = 'property');
$this->setMetaData('og:image', 'https://res.cloudinary.com/xxxxxxxx/\$overlay_!' . rawurlencode($this->getTitle()) . '!/t_dm/image.png', $attribute = 'property' );
$this->setMetaData('og:image:width', "1200", $attribute = "property");
$this->setMetaData('og:image:height', "628", $attribute = "property");
$this->setMetaData('og:description', $app->get('MetaDesc'),  $attribute = 'property');

You will see that the code sets values of the metadata to that of your web page and that the image link is to Cloudinary servers. The first time the image is requested Cloudinary will create it for you and subsequently it will re-use the generated image. Remember the final image is unique to every page.

Test the Code

You can use the Facebook Debugger to test the Open Graph data and image and see exactly how the link will appear on Facebook when it is shared.

Web Page shared on Facebook

Some articles published on the Joomla Community Magazine represent the personal opinion or experience of the Author on the specific topic and might not be aligned to the official position of the Joomla Project

2
The November Issue
My Joomla 5.2 experiment: a 35 Languages Multiling...
 

Comments 5

Already Registered? Login Here
Marc Dechèvre on Wednesday, 20 November 2024 15:03
Really nice solution!

This is a really nice solution.
For those
- who can't edit the index.php of their template (cfr updates, ...)
- and/or want to be able to have Open Graph only on some pages, or even different Open Graph configurations for different pages
an easy solution is to create a override for the Custom HTML Module.

Indeed there you can paste Brian's code... and since it is a Module you can assign them
- to Menu items
- languages
- etc

0
This is a really nice solution. For those - who can't edit the index.php of their template (cfr updates, ...) - and/or want to be able to have Open Graph only on some pages, or even different Open Graph configurations for different pages an easy solution is to create a override for the Custom HTML Module. Indeed there you can paste Brian's code... and since it is a Module you can assign them - to Menu items - languages - etc
Emmanuel Lemor on Wednesday, 20 November 2024 17:13
Great!

Thanks, Brian, I had seen this in your Joomla 5 Secrets presentation - very useful article!

0
Thanks, Brian, I had seen this in your Joomla 5 Secrets presentation - very useful article!
phulst on Saturday, 23 November 2024 20:34
Simple using IFTTT-service

Using the facilities of IFTTT (http://www.ifttt.com) and a free account, you can easily automate it using the site rss feed.
I used the service:

If feed from 《site name》/index.php?format=feed&type=rss then create a link post on 《your facebook page》


Regards, Peter

0
Using the facilities of IFTTT (www.ifttt.com) and a free account, you can easily automate it using the site rss feed. I used the service: If feed from 《site name》/index.php?format=feed&type=rss then create a link post on 《your facebook page》 Regards, Peter
Nelson Fernando Bautista Pinzon on Monday, 25 November 2024 15:53
Phoca Open Graph Plugin for share image articles on facebook

Cordial saludo a todos.

Siempre recomiendo el plugin Phoca Open Graph porque además de ser gratis, funciona perfecto :

https://www.phoca.cz/download/78-phoca-plugins/62-phoca-open-graph-plugin

0
[b]Cordial saludo a todos.[/b] Siempre recomiendo el plugin Phoca Open Graph porque además de ser gratis, funciona perfecto :): https://www.phoca.cz/download/78-phoca-plugins/62-phoca-open-graph-plugin
Brian Teeman on Tuesday, 26 November 2024 17:46
Unrelated

That plugin is completely different - it uses article images or generic images you have added to the server. The method in this article generates unique images for every article

0
That plugin is completely different - it uses article images or generic images you have added to the server. The method in this article generates unique images for every article

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/