How to get correct Zen Cart product thumbnail when posting to Facebook [Updated: 26th Aug 13]

When users post a link to your products on Facebook, its nice for the automatic link to show a picture of an actual product.

Unfortunately Zen Cart doesn’t have this facility out of the box, but its not too tricky to add it yourself.

In your template’s html_header.php add the following lines for all the Facebook Open Graph tags:





" />

/includes/templates/YOU_TEMPLATE/images/logo.png"  />

/images/" />

Note: this is using a new DEFINE variable called META_TAG_PRODUCT_IMAGE.

This needs to be defined in your modules/meta_tags.php file.

(use an override for your template obviously by copying the existing one into a folder called YOUR_TEMPLATE. Also check what the default directory for your product images is – this code is assuming they are directly beneath the images folder. You’ll need to do extra work to figure ou if they are in more complex subdirectories)

In the line around 194 that is building the SQL to pull data from the products table add the following  field to the list:

p.products_image

Then around line 208 below where it says // custom meta tags per product  add the following line:

$meta_products_image = $product_info_metatags->fields['products_image'] ;

define('META_TAG_PRODUCT_IMAGE', $meta_products_image);
 

(Note: I have moved both lines together as it seemed to make it work on ZenCart 1.5. It looks like there were more if statements added in this version!)

Thats it. You can see it in work here http://www.thepartypirate.com and in version 1.5 http://www.framecraftonline.com

 

  1. I couldnt get it to work 🙁 Followed exactly just not sure why images will not show up on facebook. Very annoying.

  2. My images are in their own directory under images for each product category. This helps with SEO, but is a pin with facebook. How would I change that so they appear?

  5. Hi TJ, Sorry if you thought I had deleted your comments – they were still waiting approval and I hadn’t had time to read them.

    My first suggestion would be to change the php shortcode <? = in front of ‘$_SERVER[“SERVER_NAME”]’ to <? echo (that was in the code above – I’ve edited now so that all the echos are explicit and not using =)

    (Maybe your PHP installation doesn’t like those? In know in some later versions of PHP you have to turn that shortcode on explicitly)

    Then check you have hardcoded the image folder name correctly in the ‘meta property=”og:image” ‘ line to whatever your image folder is,

    HTH

  6. Thanks a lot! Works like a charm. Was about to slowly look for each parameter to insert into the Meta information but your code saved me loads of time.

  7. Hi Laura, Thanks for this code, I have been trying to sort this for a while now! Something broke and stopped the thumbnails from working but while your code sorts the og parameters for everything I’m still getting an error on the image from facebook debugger saying it too small. Do you have any idea what this could be? Thanks, Rob

  9. Thanks for the link ill have a go through but i think the images are alright, it just seem to be falling short on getting the

    images/” />

    bit of the head to propagate. not sure if its something ive changed when editing the site but the FBdebugger seems to show the og:image link stopping at images/ , so does the source on the site, not surprised its too small then!

    im just trying to track back through the php to find where a break may be. no luck yet though

  10. Sorry Laura, can I pick your brain? I cant seem to get the META_TAG_PRODUCT_IMAGE variable working. I can see in the DB all is well and the lines of code make sense, it just doesn’t want to fulfil the link. Any Ideas?

  11. In the meta_tags.php file are you *sure* you’ve:
    1) Added this field “p.products_image” to the SQL statement to pull it from the DB in the query?

    2) Created the $meta_products_image variable to store this value?

    3) Added the define statement define(‘META_TAG_PRODUCT_IMAGE’, $meta_products_image);

    (TBH I honest I did this for Zen Cart 1.3.8 I think so the db field name may have changed in 1.5 maybe – but the rest should still work…?)

    Let me know how you get on :>

  12. Laura,

    I love this code, but I cannot get it to pull the product_image info out of the database and put it into the META_TAG_PRODUCT_IMAGE..I’m using Zen 1.5.. The rest of the code is working properly. I am testing it using Facebooks debugger. Any suggestions?

    Brian

  13. An update to that previous post.. it’s pulling the correct information into the variable.. it just cannot put it into this string properly.

    <meta property="og:image"
    content="http:///images/” />

    Must be a format issue with PHP or Zen Cart 1.5…

  14. HI Brian,
    I’ve checked the code on 1.5 and it sort of works – I’ve had to move both the lines together in the meta_tags.php, but I’ve updated the code in the post to reflect this.

    I’ve also expanded the bit that adds all the FB OG tags in the html_header.php

    So maybe you could try that? And also trying changing the short code “=” for “echo” as maybe your install of PHP doesn’t support that?
    (I’ll go change that in my post too – as someone else looked like they had a problem with that too!)

    Good luck

    Laura

  16. SOLVED!

    I had to allow Private Spider sessions to use cookies.. I am using an Auction Module that is using these.. So any NORMAL user would not have this issue….

    Configuration–> Sessions -> Prevent Spider Sessions to False…

    Thanks for the help!

  18. I love using zen cart but am having the same problem Tj is. I cannot get the images to show up when posting to facebook.

    The images are located in their own directories. My code looks like this in the Meta tags and the rest of the files were updated as you suggested.

    <meta property="og:image" content="http:///images/” />

    that being said,each of the images are in their own directory, ie /images/precious-moments-dated-christmas/131002.jpg

    Oh and I am using a few modules 2 of which may be impacting this.

    ceon uri mapping manager
    ceon uri mapping seo config

    So how do I get the meta data set for each page when images are in their own directories?

    I appreciate all you are doing to help people like me.

  19. So Happy, I figured it out

    Both lines with <meta property="og:image" content="http://&lt;? echo $_SERVER["SERVER_NAME"

    Must have <? I had only changed one line because the one for the logo was working, but once I changed the logo line and uploaded, ti works! Again, thank you for your help.

  20. Hi. I have modified your code so that it is dynamic instead of hard coded references to the site name and template directory.

    <meta property="og:title" content="” />
    <meta property="og:url" content="http://” />

    <meta property="og:image" content="http://get_template_dir(”,DIR_WS_TEMPLATE, $current_page_base,’images’).’/logo.png’; ?>” />

    <meta property="og:image" content="http://images/” />

    <meta property="og:site_name" content="”/>
    <meta property="og:description" content="”/>
    <meta property="og:locale" content="” />

    The language setting is still not correct.

  22. Thanks for this, it works great!
    However what if i want to block certain product images from being shown?

    Eg: i have a folder /images/sensitive/ for certain products,
    that i dont want people to be able to share on facebook,
    but i want them to be able to share everything else under /images

    so just the pics in the sensitive folder not to show, is that possible??

Back to Blog

Testimonials

Thank you for all of your hard work its looks fab and I am over the moon with it!
Amanda MercerAmanda Mercer Ceramics