Hello everyone!
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:
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="info@example.com"/>
<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).'"/>
');
Add the above code in
components/com_content/views/article/tmpl/default.php at
line 22 (so before the
?> tag)
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!
Definitely gonna check this out further!