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

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 ovverride. Here's how to do this:

 

Twitter Cards Joomla

When implementing Twitter cards using Joomla open graph tags - rather than having any image showing up, or no image at all, your Joomla article.

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 DART Creations, 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 or follow an article such as this one to Find your Facebook Admin Id.

Reader suggestion:

Eddie suggested that you can restrict the length of the description to a specificied 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-&gt;item-&gt;introtext),0,45).'"/>
or 
<meta property="og:description" content="'.substr(strip_t ags($this-&gt;item-&gt;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-&gt;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 vulnerble 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

4. Test against the Twitter validator and the Facebook Linter 

Check the article of 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 meta data to your Joomla articles :)

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

One more thing...

Do you have friends or a Facebook group who you think would find this useful? Share this with them and then let me know what they think.

Want to supercharge your website?

  Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion servers We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for DART Creations friends + FREE domain! Check it out NOW!

Translate

who are we?

DART Creations 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

         

 

 

 

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?

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

 

InMotion Hosting Review - Recommended Web Hosting servers for business, Joomla, WordPress and ecommerce websites.

InMotion Hosting Review

Advertise on DART-Creations.com

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 :-)

The Outstanding HunGRYJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get this bundle for just $29 - This month ONLY!

The Hungry JPEG Awesome font bundles

New! DIVI 3.0 WordPress TeMPLATE + PageBuilder - 10% OFF Limited Launch offer

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

Divi 3