Joomla OpenGraphIf 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.

Joomla Twitter Facebook open graph

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.

Joomla Facebook Open Graph

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

Joomla Increase Facebook Engagement

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:  <?php  (code goes here)  ?> - 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( '
<meta name="twitter:title" content="'.$this->escape($this->item->title).'">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@DARTCreations">
<meta name="twitter:creator" content="@DARTCreations">
<meta name="twitter:url" content="'.str_replace('" ','&quot;',JURI::current()).'"="">
<meta name="twitter:description" content="'.strip_tags($this->item->introtext).'">
<meta name="twitter:image" content="'.$timage.'">
<meta property="og:title" content="'.$this->escape($this->item->title).'"/>
<meta property="og:type" content="article"/>
<meta property="og:email" content="info@dart-creations.com";/>
<meta property="og:url" content="'.str_replace('" ','&quot;',juri::current()).'"="">
<meta property="og:image" content="'.$timage.'"/>
<meta property="og:site_name" content="DARTCreations"/>
<meta property="fb:admins" content="xxxxxxxxxxx"/>
<meta property="og:description" content="'.strip_tags($this->item->introtext).'"/>
');

 

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:

<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($this->item->introtext),0,45).'"/>
or 
<meta property="og:description" content="'.substr(strip_tags($this->item->introtext), 0,45).'"/>

 

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:

<meta name="twitter:description" content="Read about our Magento website redesign an..."/>.

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

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

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

 

<meta property="og:url" content="'.JURI::current().'"/>



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

 

<meta property="og:url" content="'.str_replace('" ','&quot;',JURI::current()).'"="">


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

Let's help you manage your Joomla better

joomla

Free Joomla tips ebook button

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.

<meta name="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".

<meta name="twitter:title" content="'.$this->escape($pageheading).'" />
<meta property="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.

<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
<meta property="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

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

New! DIVI 3.1 WordPress Template + PageBuilder

You'll surely create a perfect website with Divi 3.1!

Get an exclusive 10% OFF for CollectiveRay visitors until

Divi 3

 

WordPress Elementor Sale

Themes for the most popular WordPress page builder from TemplateMonster!

We've got an exclusive 10% OFF for CollectiveRay visitor until - use Coupon Code: collectiveray

TemplateMonster Elementor sale

 

TemplateMonster Bundles

Awesome bundles for awesome websites. $1300 worth of products for $49 only!

We've got an exclusive 10% OFF for CollectiveRay visitors until - use Coupon Code: collectiveray

TemplateMonster Bundles

How to make your website FAST!

Step-by-step - free email course, how to make your website load in less than 1 second 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles

 

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

 

 

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

Popular Content

Joomla extensions to take your website to the NEXT level

Is your Joomla website reaching its full potential? We install many of these extensions on almost ALL of our Joomla sites - why don't you check them out our list of Joomla Extensions and see whether you can take your site to the next level?

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Follow us on Google+   Subscribe to our RSS Feed   Follow us on Twitter