I tried several plugins which promised to add Open Graph META data (used by Facebook when you share a page) to my Joomla site, but they all displayed the wrong urls and titles. Twitter also has a cool feature named Twitter Cards, which creates a 'Summary' button beneath tweets which contain links to your website. This summary then shows a picture, a title, a description and the author of the article.
Stuff like this can greatly increase the click through rate of your tweets, or tweets of others who share your articles. Unfortunately, I was only able to find one plugin which crashed my entire website..
So I took matters into my own hands. Here is the code:
Code: Select all
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.example.com/default-image.jpg';
}
$doc =& JFactory::getDocument();
$doc->addCustomTag( '
<meta name="twitter:title" content="'.$this->escape($this->item->title).'">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@TwitterUsernameOfWebsite">
<meta name="twitter:creator" content="@TwitterUsernameOfAuthor">
<meta name="twitter:url" content="'.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="[email protected]"/>
<meta property="og:url" content="'.JURI::current().'"/>
<meta property="og:image" content="'.$timage.'"/>
<meta property="og:site_name" content="Your Website Name Here"/>
<meta property="fb:admins" content="johndoe.3"/>
<meta property="og:description" content="'.strip_tags($this->item->introtext).'"/>
');
BE SURE TO REPLACE THE EXAMPLE WITH YOUR OWN INFORMATION, e.g. your own website title.
This code takes the url and title of the current article and makes it readable for Twitter and Facebook. It also looks if there is an intro image set, otherwise it uses the full text image, or as a last resort a default image you have specified. As a description, it uses the intro text of your articles (but strips it of all HTML tags first).
Adding this code will make your website appear way better on Twitter and Facebook. Hope this was useful!