Yesterday I got tired of the way my shared links on Facebook looked. Facebook grabbed the wrong image and the wrong description, and it looked like crap.
The solution is to add the correct Open Graph tags to your osCommerce header tags. For products you have to edit product_info.php and for categories/front page you need to edit index.php
I’ve heavily modded my distribution and it also started out from the danish osCommerce fork UniqueFree but the principle in adding the Open Graph tags to a standard osCommerce installation is pretty much the same.
The only annoyance about the Open Graph tags is that you need a Facebook App ID for Facebook to accept the tags 100% – it might work without it though, but I haven’t checked. If you haven’t got a Facebook App setup for your page I can recommend this tutorial that shows you how to create an App on Facebook.
Below is the PHP code for my Open Graph tags in product_info.php (in the <head> section)
<meta property=”fb:app_id” content=”YOUR_FACEBOOK_APP_ID!!” >
<meta property=”og:site_name” content=”<?php echo STORE_NAME;?>” >
<meta property=”og:url” content=”<?php echo (‘http://’ . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’]) ;?>” >
<meta property=”og:title” content=”<?php echo $p_pagetitle; ?>” >
<meta property=”og:image” content=”<?php echo tep_href_link(DIR_WS_IMAGES . $product_info[‘products_image’] ); ?>”>
<meta property=”og:description” content=”<?php echo ($meta_desc); ?>”>
<meta property=”og:type” content=”product”>
As I previously mentioned my shop is heavily modded and you probably don’t have alle the above variables in a stock osCommerce installation, so you need to set the following variables to the correct values:
- $p_pagetitle //Should be set to your page title
- $meta_desc //Should be your meta description or your short product description
Take a look at how your regular meta tags are generated and set the to variables by copying them.
This is how my og: tags look in my index.php file:
<meta property=”fb:app_id” content=”INSERT_YOUR_FACEBOOK_APP_ID!” >
<meta property=”og:site_name” content=”<?php echo STORE_NAME;?>” >
<meta property=”og:url” content=”<?php echo (‘http://’ . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’]) ;?>” >
<meta property=”og:title” content=”<?php echo $mtitle; ?>” >
<meta property=”og:image” content=”http://www.imania.dk/imania300x300.png?p=1234″>
<meta property=”og:description” content=”<?php echo ($meta_desc); ?>”>
<meta property=”og:type” content=”product”>
In the above you also need to set your own variables for $meta_desc and $mtitle. Since I don’t have proper category photos for all my categories, I’ve chosen to create a logo file instead, so my store logo is displayed when people share my shop’s categories on Facebook, hence the hardcoded og:image property. This is also Remember that the og:image tag should point to an image between 200×200 pixels and 1500×1500 pixels – if you don’t Facebook might ignore the property and choose another image.
Also – if you have a script setup to set the canonical url, you might want to set the og:url property to your canonical url instead of the current url.
If everything is setup correctly, you should now see something similar to this when sharing a link on facebook:
If something it doesn’t seem to work, then you can check the source of the page in question to see if the og: tags are generated correctly. If the seem to be ok, you can use the Facebook URL debug tool.
Comments? Questions?
Leave your comments below 🙂
About i4s.dk