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 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.
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: <?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))
elseif (isset($images->image_fulltext) and !empty($images->image_fulltext))
$doc =& JFactory::getDocument();
<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('" ','"',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="firstname.lastname@example.org";/>
<meta property="og:url" content="'.str_replace('" ','"',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.
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(
<meta property="og:description" content="'.substr(strip_t ags($this->item->
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 vulnerble to XSS vulnerabilities and the correct code should be:
<meta property="og:url" content="'.str_replace('" ','"',JURI::current()).'"
We have updated the code with this correction, and you should do likewise.
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
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!
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
Follow us on Social
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!
New! DIVI 3.0 WordPress TeMPLATE + PageBuilder - 10% OFF Limited Launch offer
You'll surely create a perfect website with Divi 3.0!