No/Wrong Thumbnail Image When Sharing K2 Articles Through Facebook

Note: This post is not about setting a default share image for your K2 content on Facebook. If you want to do that, then you’re better off checking this post.

Content editors working for a major client of ours were having an issue when they were trying to share their K2 articles through Facebook. The issue was simply that Facebook was not generating the right thumbnail image (or was not generating a thumbnail at all). Here’s what they were doing:

• They were creating an article through K2.

• They were adding an image (or several images) inside the article.

• They were trying to share that article on their Facebook account.

• Facebook wasn’t showing the thumbnail image of the K2 article (or was showing the wrong thumbnail image, such as their website’s logo).

They called us late last week and they told us about the problem, and pointed us to an article they had just created but couldn’t get Facebook to display its thumbnail image. So, we checked the HTML code of that article, and we couldn’t find any og:image meta tag anywhere in the code. All the other Open Graph meta tags were there (recent versions of K2, for those who don’t know, automatically generate Open Graph meta tags without the use of any additional 3^rd party plugin), which was odd. What could it be?

We then checked the K2 article in the backend, and we noticed that they have added the image to the Content portion of the item, and not through the Image tab. Hmmm – we started suspecting something… So, we searched for the code responsible for adding the og:image meta tag in the HTML, and we found this in the view.html.php file (located under the components/com_k2/views/item folder):

$image = substr(JURI::root(), 0, -1).str_replace(JURI::root(true), '', $item->$facebookImage);
$document->setMetaData('og:image', $image);

If you’re a programmer, you’re probably thinking right now, what on Earth is $item->facebookImage? Well, it’s actually the size of the image that you want to share through Facebook. You can set it by going to the K2 component in the backend (by clicking on Components -> K2), and then clicking on Parameters on the top right, and then clicking on the Social tab, and finally choosing the image size from the dropdown next to Image size to use when posting K2 items on Facebook. Now we have read the code responsible for generating the og:image meta tag nearly a dozen times, but, for the life of us, we couldn’t figure out a scenario where that code would would actually work as it should. Yes – we have discovered a bug!

Quite frankly, we thought that the problem was because the image was being embedded directly into the content instead of being added through the Image tab, but that wasn’t the case. We were wrong. The cause of the problem was a bug in the K2 code. There was nothing that they (the client) could’ve done to fix the problem from within K2’s interface in Joomla’s backend.

So, how did we solve the problem?

Well, we opened the file item.php located under the components/com_k2/templates/default folder (note that for those with an overridden K2 template, the file to edit would be located somewhere under the templates/template-name/html/com_k2 folder) and we added the following code at the beginning of the file (just below the defined(‘_JEXEC’) or die; statement):

$document =& JFactory::getDocument();
preg_match('/<img [^>]*src=["|\']([^"|\']+)/i', $this->item->introtext, $arrImages);
if (!empty($arrImages[0])){
	$image = JURI::base().$arrImages[1];
	$openGraphImage = '<meta property="og:image" content="'.JURI::base().$arrImages[1].'"/>';
	$document->addCustomTag($openGraphImage);
}

The above code searches (using Regular Expressions or regex) the content inside the introtext field for images, and, if it finds any, then it sets the og:image meta property to the path of the first image found.

Adding the above code fixed the problem for our client. They were happy and we were happy, because we fixed their problem and we made an excellent Joomla extension (K2) even better.

If you’re not seeing any thumbnail images when sharing your K2 articles on Facebook, then try the above solution. It should work. If it doesn’t, then try extending the search for images to include the fulltext attribute ($item->fulltext) in addition to the introtext attribute. If it still doesn’t work (or if you don’t have the necessary programming background to deploy the above solution), then please contact us. We are eager to help, we are professional, we are hard working, our customers love us, and we don’t charge much!