Managing the Facebook Like Thumbnail Image with Drupal and Drupal Service Links

After prematurely launching our own Drupal website just to replace the rather shockingly two year old version, we never had time to update, I began playing around with all the cool functionality we give to our clients.
One almost standard is the Drupal Service Links module, which very nicely allows you to put in Twitter, LinkedIn, Facebook, Google+ and a bunch more Social Widgets onto your nodes or page in general.
Having done this, I thought I could tell the world about the upcoming Tokyo Drupal Meet up by Liking my own blog article and watch it appear on my profile.

However I was in for a typical unpleasant surprise. The Like worked fantastically, and the article appeared in an instant.....next to a Twitter logo?
Why the heck was there a Twitter Thumbnail Image representing the Tokyo Drupal Meet Up article? I tried again with a work from our portfolio, for BMES Japan Executive Search and this time a LinkedIn logo appeared next to the Wall post on my Facebook.

Having had fun with Facebook Like and share for a deep-linking Flash project Lauren Berger Collection I knew that Facebook usually requires an image to be defined as the Like image in Facebook's own meta-tags Opengraph protocol.
If there is no image defined it'll select the most appropriate image to whatever Facebook thinks is best. It was deciding to take the Follow Link Icons form our footer, hence the Twitter and LinkedIn logos appearing.

My first simple solution was to create a default image in the page template using the Facebook Opengraph meta tags. To do this you first need to include the following code in the opening HTML tags:

This then allows you to create a default image. I decided to take the logo from our theme.

This presents an easy way to make sure there is a default image.

But whilst this is a fix, it wasn't one I was happy with, because I want to use an image relevant to the post, or portfolio piece. However with this being Drupal there is a module for that. Your saviour here is the Open Graph Meta Tags Module, and by downloading and installing it, you can decide which content types require Facebook meta-tags. When you do these content types will have an extra collapsible section for not just choosing an image but also custom Title and Description.
The great thing about the Image part is you are able to select any image that is part of the post (node), and it works like a charm, problem solved.

Things to be mindful of when using this module though is that it increases the amount of input for the end user, and they need to be aware that completing the inputs is important. With regard to the Image selection, the node has to be saved first, for the module to know what images are attached. Therefore you must go back and edit the node, to then be able to select an image.
If it is yourself or end-users capable of doing this then it is no problem, but very often people don't like extra boxes to tick and fields to fill out, so just forcing a default might be a better option and save the need for an additional module.

Lastly there are some annoying things about Facebook Like that were discovered from the Lauren Berger Collection project and that was that once you have Liked a page, it is cached by Facebook. So anyone who also Likes the page, will also get the same Meta Data even if you have updated the page since.
We found this really frustrating to test, and it would take maybe a day to refresh it's cache. One thing that allowed you to see what was happening with your corrected pages was the Face Book Debugger. The Facebook Debugger shows how Facebook sees your page, and so can be used to check the changes you make are working, if your page has already been cached with the wrong information.
I even started to think that applying the debugger, refreshes the Facebook cache, but I might have been dreaming.

So there are the Pitfalls of The Facebook Like button, and Service Links on Drupal.
You can force a default using the Open Graph Meta Tags in your page template, or install the Open Graph Meta Tags Module. Just be aware that Facebook caches your page, so even if you have fixed it, and go to test, if there is an old version of your page cached, you will not see the changes and it will make you think it is still broken. So you can use the Facebook Debugger to view the TRUTH and wait for the Facebook cache to clear out, and cease being silly.

Hope this explains it, and helps some one.