How to Quickly Add Facebook Open Graph and Twitter Cards to Joomla

If you haven’t been living under a rock for the past decade or so, you’ll probably have very often seen people sharing articles on Facebook with a nice image and title, and a similar thing on Twitter with large pretty cards showing a large image. The best way to control this, is to implement what are called Open Graph tags which give hints to Twitter and Facebook on what content they should use.

You can easily do this in Joomla without implementing any extension by creating a template override.

Here’s how to do this:

Twitter Cards Joomla

When implementing Twitter cards using Joomla open graph tags – rather than having an image showing up, or no image at all, your Joomla article. See the below example from the CollectiveRay twitter feed.

Facebook Open Graph example

On the other hand – in Facebook, using the Joomla Open Graph tags, you posts when shared will look like the below.

1. Joomla Open Graph tags: Create a Template Override for articles

Extensions > Template Manager > Templates > (your template) Details and Files > Create Overrides > Components > com_content > article

Once you have created the article template override, you can add the metadata to the override which is going to be used to display your article. Essentially, you’ll need to add the following content to the article such that the metadata is picked up from your article.

Wait! Don’t want to mess around with code? You can integrate Joomla with Facebook with this component.

2. Add the metadata for Facebook / Twitter Open Graph

Go to Extensions > Template Manager > Templates > (your template) Details and Files > Editor > html > com_content > articles > default.php

Add the code below to the top between php tags: – take a bit of care where to add this, you might break your template temporarily if you add it in the wrong place…

if (isset($images->image_intro) and !empty($images->image_intro))
{
$timage= htmlspecialchars(JURI::root().$images->image_intro);

}

elseif (isset($images->image_fulltext) and !empty($images->image_fulltext))
{
$timage= htmlspecialchars(JURI::root().$images->image_fulltext);
}
else
{
$timage= ‘http://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg‘;
}
$doc =& JFactory::getDocument();
$doc->addCustomTag( ‘

=””>


=””>


3. Customize the Open Graph tags to your values

The above code is customized to CollectiveRay, so obviously edit the bold values to the items which you want for your own site. Instead of the XXXXX of the fb:admins tag, you’ll need to enter the numeric id of the Facebook user who will be performing such stuff as Page Insights. To find the number, you might want to look at such a tool as this tool – find my Facebook ID.

Reader suggestion:

Eddie suggested that you can restrict the length of the description to a specified number of character if you use the code below:

You might want to restrict the length of the description to c.45 characters by using mb_strimwidth or substr like this:

or 

Ed has also made a 2nd suggestion which actually allows you to pick the data from the meta description of the article, which is a pretty great suggestion.

I’ve tweaked the code a little & have got the following:

.

This is produced by this code (note “>” is stripped out):

You can see I’m getting the meta description, limited to 45 characters, & adding ellipsis if the description is truncated. This way I can “click bait” my description for better CTR while keeping my intro text readable in keeping with the “style” or “voice” of my website. By using the meta description I can also add some of this code to an override for categories too!

Another reader: Thomas Meredith commented below that the code

was vulnerable to XSS vulnerabilities and the correct code should be:

="">

We have updated the code with this correction, and you should do likewise.

More updates from our visitors

If you follow the conversation below, you’ll find that even if the above code works for most situations, there are specific instances where the code this not work. Michael from N8 Solutions, took it upon himself to make found a solution for those instances where this was not working.

In the spirit of the open-source Joomla community, they shared the code with the rest of visitors in the comments below. I’m reproducing the code and Michael’s comments verbatim, for clarity:

I was able to solve the problem not only for the “Contact” page but also for the “Blog” & “Featured” menu item pages.

First, what I wrote above for the Contact Page, for grabbing the “Name” the contact is saved as will work. The “twitter:title” & “og:title” should look like this if you want to use the saved name of the contact.

"twitter:title" content="'.$this->escape($this->item->name).'" />

However, if you would like to use the information from the menu you can do that with this new code which will also work for “Blog” & “Featured” menu item pages.
You can choose to use the “Menu Title”, “Browser Page Title”, or the “Page Heading”. I prefer to use the Page Heading and set the menu not to show the Page Heading. This way I can utilize the Page Heading for Open Graph the way I want since it won’t show up anywhere else unlike the Menu Title or the Browser Page Title which will.

To do this, you need to add the code below between “$timage” and above “$doc”.

$active = JFactory::getApplication()->getMenu()->getActive();
$title = $active->title;
$browserpagetitle = $active->params->get('page_title');
$pageheading = $active->params->get('page_heading');

Then you should replace the code for “twitter:title” & “og:title” with this code below in order to use the “Page Heading”.

"twitter:title" content="'.$this->escape($pageheading).'" />
"og:title" content="'.$this->escape($pageheading).'" />

If instead, you want to use the “Menu Title” or the “Browser Page Title”, in the code you would replace “$pageheading” with either “$title” to use the Menu Title or “$browserpagetitle” to use the Browser Page Title.

You can create the overrides here:
Create Overrides > Components > com_content > category
Create Overrides > Components > com_content > featured
Create Overrides > Components > com_contact > contact

Then edit the overrides, adding the code above, in their respective locations:
Editor > html > com_content > category > blog.php
Editor > html > com_content > featured > default.php
Editor > html > com_contact > contact > default.php

I also removed the “if” statement for the Open Graph Image leaving only the basic line:

$timage= 'https://www.domain.com/custom-open-graph-image.jpg';

I did this because the “if” statement is not necessary for these pages since there is no Intro Image or Full Text image.

Another thing of importance concerning the “Descriptions”.

For CONTACTS:

In the code for the contact page for the “twitter:description” & “og:description” the “introtext” needs to be replaced with “metadesc” in order to grab the Meta Description that is set for the contact. If you do not set a description for the contact then nothing will be displayed for the open graph description tags.

For BLOG & FEATURED Articles:
Just as above for the contacts the “twitter:description” & “og:description” the “introtext” needs to be replaced with Eddie’s code above in order to grab the Meta Description that is set for either the Blog or Featured Article Menu Item. Again, if you do not set a description there then nothing will be displayed. So you don’t have to look for it, here is the code Eddie provided above and what the description lines should look like.

"twitter:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
"og:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />

I prefer to change the character length from 45 to 160 since I’m not interested in “Bait Clicking” potential site visitors.

I hope this is helpful to others!

4. Test against the Twitter validator and the Facebook Linter

Check the article on your website against the Twitter validator: https://cards-dev.twitter.com/validator

and the

Facebook Linter: https://developers.facebook.com/tools/debug/og/object/

You may also want to test your results against the following too: http://richpreview.com/

And that’s how you add Open Graph metadata to your Joomla articles 🙂

Recommend Reading: How to increase Facebook Engagement on your Joomla site