hypertransitory.com

I run this site using WordPress, but a lot of the other sites I develop are created with Joomla.

Recently, I had a lot of trouble getting the thumbnail and meta-description from my sites to show up when I tried to share them on Facebook. Only the site name and the link to the article would be showing when I tried it. Turns out this was a Facebook bug but it really made me dive into the whole process.

If you’re not familiar with Facebook you might be wondering why this is so important. Let’s take a look.

When I see an article I like and want to share with my friends, if they have a share button available, I’ll use that, or if necessary I’ll copy the link and paste it in using the link button in the Facebook status field.

So let’s check out one of my favorite sites, gossip site mediatakeout.com. When I see a funny article there, of which there are many, I’ll click on their big-azz Facebook share button they use (not sure why that thing is so dang big).

Here’s what I get when I do that:

Essentially nothing. So when that posts to my wall, that’s all my friends are going to see. There’s no description or thumbnail with this post. It’s pretty boring and people are much less likely to click on the link if they can’t even see what it’s about. I know I usually pass over boring links like this.

So to show a site that does this correctly, let’s look at a link from this very site. When I browse to one of my articles and click the share button, I get this:

Now this looks a lot more interesting. There’s a description of the article, and even a thumbnail. Now that link is a lot more likely to be clicked than the generic one above it.

So again, this is WordPress, how do we get this in Joomla? Well, honestly, sometimes it just works, and other times it doesn’t seem to. I ended up checking out Facebook’s specs on sharing here:

http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifying_Meta_Tags

And it turns out there’s three basic items that should be present on the page you want to share.

1. Meta Title
2. Meta Description
3. Image thumbnail source

That last one is the tricky one!

In Joomla, it’s trivially easy to put in the meta description in the ‘Metadata Information’ tab at the bottom right of the Parameters sidebar in your article entry screen.

The title I’ve never had a problem picking up in Facebook from the page title. Normally, Joomla SEO extensions like SH404SEF or Artio JoomSEF can help you with all the metadata, anyway.

But that thumbnail. It’s not a meta tag, it’s a ‘link’ tag. Not so easy to get into the head of your Joomla document.

I spent some time wrangling with it and I came up with a workaround that didn’t involve hacking the core header file.

Essentially we use a bit of php to fill in the name of your image, based on which page you’re on. We do this using the Menu ID assigned to your article. You can find this ID by going to the Menu that your article is assigned to. See this example:

The red part is the ID number we need. We’ll add this number onto the end of our link tag so it pulls the correct image based on which page we’re on.

So now on to the PHP. Joomla has a variable which allows it to get the Menu ID of an item. It’s called, appropriately enough, ‘$itemid’.

So what we’ll do first is open up your template index.php file (it should be found by going to your ftp Home>templates>YOUR_TEMPLATE>index.php.

Or if you’re editing through the Joomla backend, go to Extensions>Template Manager, then click your template,and finally click the ‘Edit HTML’ button. You’ll get a screen with the code of your index.html where you can now edit.

So the first thing we need to do to get started using $itemid is to declare, or initialize the variable (I’m not a true php guru so this may not be the proper term).

To do this we’ll use this code:

<?php $itemid = JRequest::getVar(‘Itemid’); ?>

You have to place this before we actually try to use the $itemid variable. So I put this directly after my first head tag.

Then it’s time to put in the link tag that Facebook will be looking for. The code I use is as such:

<link rel="img_src" href="http://www.example.com/images/stories/fbthumbs/thumbnail<?php echo $itemid; ?>.jpg" />

I put this tag right after the Joomla ‘head calling’ tag that looks like this:
<jdoc:include type="head" />

Check this pic for an example (click for larger view):

So to break this down, Facebook is going to prefer whichever image is called in this link. Reading the specs from the Facebook link I provided above says that your link has to be an absolute link.

You can see that I have an absolute link there, then I used my ‘images/stories’ folder and created a new folder in there called ‘fbthumbs’, but you can use whatever directory is convenient for you.

Following that as the link continues, you see it says ‘thumbnail’ and then our php code sandwiched right up against it. What’s happening here is that every image I put in this directory will be named ‘thumbnail’ with a Menu ID tacked right on the end. So if my Menu ID was ’44′ as in the image above, my image would be named ‘thumbnail44.jpg’.

The php code is set to “echo” the item ID of whatever page we’re on, so it replaces the  php with the item ID, then we wrap it up by adding the ‘.jpg’ on the end and close the tag.

So whenever you make an article, you’ll need to check the Menu ID for it, then name your photo ‘whatever’ and append that Menu ID onto it. As long as it goes into the right directory, Facebook should have no problem finding your preferred thumbnail to use when someone tries to share the item.

And that should do it!

Now, with all that said, this is a workaround, and I hate workarounds. I’d love it if someone came up with a simple extension to handle this.

On my site True Tales of the Soryan Order I use a module called Flexheader 3.

This extension allows you to have a different header for every page based on the Menu ID. It would be great if someone could adapt this header or point out one that does something similar, only for our specific Facebook situation.

Anyway, that’s all for now and please contact me or leave a comment if you know of a simpler solutions. Peace!

UPDATE: I only thought of this later, but I should mention that some people have reported that having any EXIF metadata in your image may cause Facebook to not show your thumbnail. I haven’t observed this behavior myself, but plenty of others have. Here’s one of many threads that discusses how to remove this: http://photo.net/digital-darkroom-forum/00Dy2C.