How to Set the Facebook Share Image on K2

If you have a Facebook Share button on your website, then you might have noticed that Facebook tends to automatically choose an image in the popup. In some cases, Facebook chooses the right image, because the image chosen is the one closest to the share button, which is typically located inside the article itself (so Facebook chooses an image from inside the article).

However, if your article doesn’t have an image, then Facebook will choose another image from your website as the share image; that image might be the logo of your website (which usually looks distorted or wrongly cropped), or even the banner of a completely irrelevant ad located inside the article. Imagine that: people clicking on the share button and seeing the image of an ad on your website instead of an image related to your website/your post.

Also, it might be that you want to display the same share image for all your articles instead of a different image for each article. That’s what many websites are doing these days to better promote their corporate social identity.

Now, if you’re using K2, then you’re in luck, because in this post we will explain how to set the Facebook share image to be the same on all your K2 articles! Without further delay, here’s how it can be done:

  • Open the file view.html.php located under the /components/com_k2/views/item folder of your Joomla website.

  • Just above the line:

    $document->setMetaData('og:description', htmlspecialchars(strip_tags($document->getDescription()), ENT_QUOTES, 'UTF-8'));

    Add the following line:

    $document->setMetaData('og:image', 'http://www.yourjoomlawebsite.com/path-to-your-facebook-share-image.jpg');

  • Save the file and upload it back to your Joomla website.

  • That’s it!

The above will set a global share image for all K2 items, but not the category pages. If you want to set the Facebook share image on a K2 category (just the category, not the items belonging to that category), then all you need to do is to assign an image to that category. Here’s how this can be done:

  • Login to the backend of your Joomla website.

  • Go to Components -> K2 -> Categories.

  • Click on the category you wish to set the Facebook Image for.

  • Click on Image (below the Language dropdown and just next to Description tab).

  • Choose an image for your category.

  • This image will be used as the default image for Facebook when you click on the Share button.

Some notes:

  • The image you choose as your Facebook share image must have a size of at least 200px x 200px, otherwise, it will not be used by Facebook. Note that you should always opt for a 1:1 ratio, for example, if the width of the image is 300px, then the height must be 300px, otherwise, the share image will look distorted.

  • Facebook will cache images, so if you don’t see your changes appearing immediately, do not worry. Your changes will appear once Facebook refreshes its cache.

  • og stands for Open Graph, which is the same standard used by LinkedIn. This means that when you set the image for Facebook share, it will be set for LinkedIn share as well!

  • You can debug your Open Graph meta data the Facebook debug tool here. Just enter the URL of the page that you have the Open Graph metadata in and Facebook will tell you how it’s reading it (it’ll also tell you if there’s any problem with it, such as images being too small).

  • K2 has some code that apparently tries to set the Facebook share image for an item. Unfortunately, that code has no effect, even if it runs, but it will never run because the condition set to run the code will never be fulfilled.

Social meta-tagging, such as setting share images, might look daunting, but it really isn’t. Nevertheless, if you have problems with social meta-tagging on your Joomla website, then please contact us. We’ll solve the problem for you in no time and for a very reasonable cost!

No comments yet.

Leave a comment