Have you ever went to post a status update about one of your website’s pages and the thumbnail Facebook chose to show wasn’t the image you wanted? Have you ever posted a link, and no thumbnail showed?
Facebook has a coding technology called “OpenGraph” that allows a website to tell Facebook what information to display when someone shares a link. This can be crucial for a fine-tuned social media campaign.
Let’s say you have a page, and you want to change the image that shows when someone likes or links to that page on Facebook. Or, you want the description or title to read differently, well, how do you do that? And how do you test it without posting it on your facebook?
The Facebook Debugger Tool
Facebook for Developers has a tool known as “Debugger” (can be found here) that allows a user to recieve feedback about your pages markup, and will show the information Facebook will retrieve from the page: title, description, picture and more!
- Visit the Facebook Debugger tool
- Enter in the site address that you wish to see information on
- Hit the blue “Debug” button
This way you can see how Facebook will display your page when someone shares/likes/posts the link!
Changing What Your Link Displays
Using the above photo as reference, perhaps you don’t want the penguin thumbnail to be displayed when you put your link in the status update, perhaps you want something that doesn’t even exist on the page. You can impliment this coding structure into your <head> tag to change that!
<meta property=”og:image” content=”http://linktoyourimage.com/image.jpg” /> <meta property=”og:title” content=”This will be the title displayed!” /> <meta property=”og:description” content=”This will be the description that shows below the title!” />Useful Trick – Update Your Thumbnail
Facebook caches the thumbnails for links as soon as you put them into a status. This means that if you were wanting to change your thumbnail that displays when someone links to that page, it will show the original thumbnail that was there from the first time you posted the link.
But, there is a way to “refresh” your thumbnail however.
You can “trick” Facebook into refreshing the thumbnail by entering the URL in question into the Debugger tool. This will force Facebook to fetch the page and associated images again.
Getting Facebook Thumbnails working on Joomla
If you are using Joomla as your Content Management System, implementing Facebook Open Graph is a bit more complicated. Generally it requires some custom coding to integrate the meta tags that are in this blog post.
However, there are some plug-ins that are made specifically for Joomla that fix these issues:
- http://www.perfect-web.co/joomla/plugins/link-with-article-images-facebook
- http://www.hyde-design.co.uk/free-joomla-extensions/open-graph-protocol