Adding Facebook Like Button

picaflor-azul:

I just wanted to post a small update. Glen (gjh42) pointed out a small correction in the code and now the like button will post the product image as well as the url to facebook. You can see the updated tutorial here:

Easy Help Zen Cart Tutorial: How to Add a Facebook Like Button to Your Product Pages

Thanks so much Glen!

Thanks,

Anne

Hi Anne,
Thanks for this tutorial.
It works like a wonder, but the iamge pulled to facebook is the next button instead of the product image....
Any advise would be very much appreciated.
MTIA!

To make facebook grab the product image for the like button you can follow this tutorial...

http://pro-webs.net/blog/2011/07/13/product-images-for-facebook-like/

Basically after the <?php } //endif FAVICON ?> in your templates html_header.php add this little bit of code...

<meta property="og:image" content="<?php echo zen_image(DIR_WS_IMAGES . $product_info->fields['products_image'], $product_info->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT) ?>"/>

Hope it works :smile:

found a better tutorial... which I have now implemented into my site...
http://www.kerrinhardy.com/2010/11/27/add-the-facebook-like-button-to-your-zen-cart-store/

put the following code into your templates html_header.php....

**<?php if (isset($_GET['products_id'])) { // use products_image if products_id exists $facebook_image = $db->Execute("select p.products_image from " . TABLE_PRODUCTS . " p where products_id='" . (int)$_GET['products_id'] . "'"); $fb_image = HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_IMAGES . $facebook_image->fields['products_image']; } if ($fb_image == '') { // if no products image, use the default image if enabled $fb_image = 'http://www.store.com/includes/templates/template_default/images/logo.gif'; } if ($fb_image != '') { ?>
<meta property="og:image" content="<?php echo $fb_image; ?>" />

howb:

To make facebook grab the product image for the like button you can follow this tutorial...

http://pro-webs.net/blog/2011/07/13/product-images-for-facebook-like/

Basically after the <?php } //endif FAVICON ?> in your templates html_header.php add this little bit of code...

<meta property="og:image" content="<?php echo zen_image(DIR_WS_IMAGES . $product_info->fields['products_image'], $product_info->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT) ?>"/>

Hope it works :smile:

Thanks for the help :clap::clap: It works:clap:

howb:

found a better tutorial... which I have now implemented into my site...
http://www.kerrinhardy.com/2010/11/27/add-the-facebook-like-button-to-your-zen-cart-store/

put the following code into your templates html_header.php....

**<?php if (isset($_GET['products_id'])) { // use products_image if products_id exists $facebook_image = $db->Execute("select p.products_image from " . TABLE_PRODUCTS . " p where products_id='" . (int)$_GET['products_id'] . "'"); $fb_image = HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_IMAGES . $facebook_image->fields['products_image']; } if ($fb_image == '') { // if no products image, use the default image if enabled $fb_image = 'http://www.store.com/includes/templates/template_default/images/logo.gif'; } if ($fb_image != '') { ?>
<meta property="og:image" content="<?php echo $fb_image; ?>" />

<?php } ?>**

Since the first one works, I will give this a miss....Lazy me :blush:
Is there any difference between the 2 method?

The difference between the two is principally the way they account for the product image. The first one uses the products_image already held in the product_info data, while the second one fetches the products_image from the database again, and explicitly accounts for cases of missing images. So it is more flexible and more code execution time.

Unless I'm missing something, I've been mostly unsuccessful at the different attempts to add the 'Facebook Like' feature to a product page. To be fair — I can get the 'like' box integrated, but in order for the 'like' to show up on someone's wall, they also have to comment on it as well.

Requiring a 'comment' for a 'like' to appear on a Facebook wall negates the value of this quick-click feature.

Has anyone encountered the same problem or have a solution I haven't seen online, yet?

I just "liked" this product, and it showed up on my facebook automatically:

http://www.prommart.com/index.php?main_page=product_info&cPath=122_30&products_id=6820

I used the Facebook button just above my additional photos.

My Like button at top of page asks for a comment. But even without a comment it went to my facebook.

Hmmm.... I'll need to see what's going on. We're not having the same success here. So far in our tests, we've had to add a comment to get the product to show up on Facebook.

I'm actively on this fix now, so I'll keep this thread updated.

Just to clarify, I'm not sure what my top facebook button is. It came with this new template I'm using/testing. I can post by clicking Post to Facebook without entering a comment.

My bottom social buttons are what Picaflor Azul uses in her nice templates. No comment request, just click and it's done.

Thanks for chiming in. You got a little more lucky than me. I'm still having issues, though. I've tried the methods suggested in this thread and then I tried the Kerrin Hardy method.

I can get it working, but the thumbnail showing on Facebook isn't the product thumbnail. For whatever reason, it's grabbing a JPEG in my images folder I use for a button graphic. I can't figure out why it wants to grab that and not the product thumbnail.

I have it finally working, but only by using a completely different implementation which turned out to be incredibly simpler than the Hardy method. After days of googling to find the right info and resources, the method that worked for me came from this link:

http://www.navspan.com/ecommerce/facebook-like-twitter-google-zen-cart.htm#.T5CVKo6j1oM

Article titled "eCommerce, Facebook, Social Media Optimization, Web Design, Website Design, Zen Cart"

I hope this helps anyone else struggling with the implementation and issues of facebook not showing product photos.