Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Image not displayed in Facebook "Like"


SagarJ

Recommended Posts

Hi All,

 

I am a novice here, so please excuse me if the query is rather simplistic.

 

I have implemented OSC 2.3 and have Facebook "Like" button on my site. When users click the "Like" button, it adds a link on their Facebook timeline page correctly, but there is no image of the product.

 

Clicking the link from Facebook navigates the users back to the correct product on my site. So I assume this is working as expected. The only problem is the image display in Facebook.

 

Please assist.

 

Thanks,

Sagar

Link to comment
Share on other sites

Hi All,

 

I found the problem and fixed it.

Since Facebook has changed their code, a number of changes had to be made to get this working.

 

Just a summary of the changes:

 

1. Had to include a query in \include\template_top.php at the start of the file under immediately <head> tag.

 

<?php
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
$product_info = tep_db_fetch_array($product_info_query);
?>

 

This query gets the required parameters for the "Like" function of Facebook.

 

2. Add the meta tags which Facebook "Like" button will read and use for sharing. These lines immediately follow the code given in Step 1, under the <head> tag.

 

<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:type" content="product" />
<meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;?>" >
<meta property="og:image" content="<?php print 'http://' . $_SERVER['SERVER_NAME'] . DIR_WS_HTTP_CATALOG . DIR_WS_IMAGES . $product_info['products_image']; ?>" />
<meta property="og:site_name" content="<?php echo STORE_NAME;?>" />
<meta property="fb:admins" content="YOUR_ADMIN_KEY_GOES_HERE" />
<meta property="og:description" content="<?php echo preg_replace('/[^a-zA-Z0-9\s]/','',preg_replace('/\s+/',' ',preg_replace("/<br>/", "",strip_tags($product_info['products_description'])))); ?>" />

 

The last code statement for "og:description" strips any HTML code you may have used in the description of your products.

Note, you have to put in your Facebook Admin Key as shown by YOUR_ADMIN_KEY_GOES_HERE.

 

If you don't have your admin key, do the following steps:

a. Log on to Facebook

b. Click on "Developers" link (generally at the bottom of the page)

c. Navigate to Build for Websites > Social Plugins > Like Button.

d. Scroll down to "Step 2 - Get Open Graph Tags"

e. The admin key is displayed in the text box "Admin". Copy this and paste into the code above.

 

 

 

3. Update the file \includes\modules\social_bookmarks\sb_facebook_like.php

Search for this code

 

return '<iframe src="http://www.facebook.com/plugins/like.php?href=' . urlencode(tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $HTTP_GET_VARS['products_id'], 'NONSSL', false)) . '&layout=' . $style . '&show_faces=' . $faces . '&width=' . $width . '&action=' . $action . '&colorscheme=' . $scheme . '&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:' . $width . 'px; height:35px;" allowTransparency="true"></iframe>';

 

Replace with

 

return '<div class="fb-like" data-href=' . urlencode(tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $HTTP_GET_VARS['products_id'], 'NONSSL', false)) . ' data-send="false" data-layout="' . $style . '" data-show-faces="' . $faces . '" data-width=" ' . $width . '" data-colorscheme="' . $scheme . '" overflow:auto; width:' . $width . 'px;" ></div>';

 

 

Thats it, all done! Hope that helps you.

 

Cheers,

Sagar

Link to comment
Share on other sites

  • 7 months later...
  • 1 month later...

does this still work? I read on facebook that they had made some changes to how this is done on nov. 2012.

I also have trouble finding the admin key

Link to comment
Share on other sites

  • 1 month later...

i have added the Open Graph meta tags to template_top, also i tried to put any image link (e.g. http:\\www.***** ) in the image tag content.

nothing happened, still no image. need some help here. thx

 

N.B. I'm not using the like button, am using the share button.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...