Page 2 of 3

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Thu Nov 15, 2012 9:06 pm
by timmieboy
Hello,

I have a question, I have installed this and Facebook/Twitter is working fine. I only have another problem. When I click on a category and than on a product my template is totally ruined. The same happens when I click on a name of the supplier and that on a product. See picture what happens. The strange things is that it only happens in IE. I discovered that the problem shows when I add the header code. Unfortunately when I do not copy the code in the header facebook is not working anymore and it shows a random picture again.

Next to this, when I click on a facebook like button, still the wrong picture appears, why is that.

Any ideas what can be wrong, www.your-lifestyle.nl is my site.

Thanks

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Mon Nov 26, 2012 5:14 am
by bones_ct
I found a simple solution for the image to show on facebook like. It probably works on all open cart versions.
go to /catalog/view/theme/default/template/product/product.tpl

replace the first line from this:
<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>

to this:
<?php echo '<meta property="og:image" content="'.$rs_image1.'" />'.$header; ?><?php echo $column_left; ?><?php echo $column_right; ?>

and remove any og:image meta from the header file to avoid duplicates.
header file is : /catalog/view/theme/default/template/common/header.tpl

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Fri Nov 30, 2012 5:11 pm
by timmieboy
Hi,

I have tried this, but I get this error:
Notice: Undefined variable: rs_image1 in /var/www/vhosts/your-lifestyle.nl/httpdocs/catalog/view/theme/OC04A00422/template/product/product.tpl on line 1

Something is not correct

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Sun Dec 02, 2012 4:59 pm
by bones_ct
Maybe the $rs_image1 variable is not named like that on your code. Just search in the product.tpl for "img src" and in the first instance that you find see what's the php variable that builds that src, and use it instead of $rs_image1

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Tue Dec 11, 2012 6:01 pm
by timmieboy
Hi, thanks, it is working but the next problem occurs, my text style is changing. So there is still going something wrong. I have changed it in the product.tpl of my template not the default one.

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Wed Mar 13, 2013 10:16 pm
by tacno
Works in 1.5.4.1

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Fri Jun 07, 2013 10:26 am
by gocreative
Below was my solution in /catalog/view/theme/default/template/product/product.tpl:

Code: Select all

<?php
$find = '<head>';
$replace = '<head><meta property="og:image" content="'.$thumb.'" />';
echo str_replace($find,$replace,$header);
?>

<?php //echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
You could replace a different element instead of <head>, but that does the trick. You can of course also use this in any other page required.

For the sake of completeness, you might want to add these lines of code to your header.tpl file:

Code: Select all

<meta property="og:title" content="<?php echo $title; ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?php echo $base; ?>">
<meta property="og:image" content="http://www.YOURWEBSITEHERE.com/og-image.jpg">
<meta property="og:site_name" content="<?php echo $name; ?>">
<?php if ($description) { ?><meta property="og:description" content="<?php echo $description; ?>"><?php } ?>
And you could then alter my above solution to replace the og:image property instead, like this:

Code: Select all

<?php
$find = '<meta property="og:image" content="http://www.YOURWEBSITEHERE.com/og-image.jpg">';
$replace = '<meta property="og:image" content="'.$thumb.'" />';
echo str_replace($find,$replace,$header);
?>

<?php //echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
This way you have a default opengraph image but you can override it with the product thumbnail (or whatever else you want).

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Fri Jun 28, 2013 11:47 am
by paketonlinestore
I have a problem with ShareThis Button on one of my website, it won't fetch the product image while its definitely clear that the product image size is 300x300 and square. Here is the example link http://www.happymocha-shop.com/bed-cover I have put the open graph meta tags (og:title, og:type, og:url, og:image, etc) and managed to get the product description, url and title right but still no image. The Facebook Share Button somehow keep refusing to detect my product image while it was standing right there. I already tried so many things but none of them seem working.

I've used the Facebook Linter/Debugger in http://developers.facebook.com/tools/debug/ but still it refused to recognised my product image. It says that "Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'logo.png' will be used instead."

This is horrifying, my product image size is 300x300 squared and it was standing right there on the page. The Facebook share button refuses to recognize my product thumbnail. How to fix this please help me.

I already have spent 3 days to fix this but still no luck up until now. Please help and thank you before.

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Sat Jun 29, 2013 6:43 am
by gocreative
Have you checked that the image is RGB and 72dpi?

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Sat Jun 29, 2013 12:14 pm
by paketonlinestore
gocreative wrote:Have you checked that the image is RGB and 72dpi?
I've recheck it again, the original image in http://www.happymocha-shop.com/bed-cover even though it was 600x420 px size but the DPI is 200.

I then tried to upload another product http://www.happymocha-shop.com/bed-cover-8 and this one original image is 1000x1000px size and 72DPI, but still facebook couldn't fetch the image right. The Facebook linter/debugger still won't recognize the image ??? I have no idea why

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Sat Jul 13, 2013 3:23 am
by syedilyasahmed
Hi smash, it looks like you are the only one who knows all about facebook sharing ;). my issue, is I cant make the images show on when I paste my product url in facebook, the theme I bought has all the share buttons, but only problem is images does not sho. can you please help me out with this. thank you.

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Sat Jul 13, 2013 6:27 am
by gocreative
syedilyasahmed, the product image doesn't show because the template file for the product page (/catalog/view/theme/default/template/product/product.tpl) doesn't assign the product thumbnail as the OpenGraph image. My code sample a few posts up from this will solve your problem.

After implementation, you'll need to clear Facebook's cached version of your page by pasting your link into the input here: http://developers.facebook.com/tools/debug

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Mon Dec 16, 2013 9:29 pm
by alenivancec
Hello. I have ShareThis plugin on my opencart but image showing up does not work i tried all of the options above but it still doesent work. Can someone help me? The site url is http://biciklopedija.hr/

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Tue Mar 11, 2014 7:44 pm
by appaji
I like these instructions in detail. I need to add price and author details in addition to description to share with facebook users. how do I do that?

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Wed Mar 12, 2014 5:34 am
by gocreative
I'm not sure about the "author" since there is no such thing for products, however you could append the price to the description using the same method described above. For example instead of the $thumb variable, you would use $price (or whatever price variable you have in your template that you'd like to use).

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Tue Jul 01, 2014 5:24 pm
by comprido
In your theme header.tpl:

Code: Select all

<!-- mod og:image para FB -->
<?php if ($thumb || $images) { ?>
<meta property="og:image" content="<?php echo $thumb; ?>">
<?php } else { ?>
<meta property="og:image" content="<?php echo $logo; ?>">
<?php } ?>
<!-- mod og:image para FB -->
In controller/common/header.php, just after: $this->data['name'] = $this->config->get('config_name'); :

Code: Select all

if (isset($this->request->get['product_id'])) {
			$product_id = (int)$this->request->get['product_id'];
		} else {
			$product_id = 0;
		}
		
		$this->load->model('catalog/product');
		$product_info = $this->model_catalog_product->getProduct($product_id);		
		$this->data['product_info'] = $product_info;
		if ($product_info['image']) {
				$this->data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));
			} else {
				$this->data['thumb'] = '';
			}			
			$this->data['images'] = array();
This code fix the problem for me.

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Fri Jul 04, 2014 6:36 pm
by psycmos
Thanks a lot my friend! it works perfect and solve the problem!
In my case facebook share wrong thumb in opencart because it are always loading 100x100 thumb image.

After insert that code it fix my problem as works perfect to share the store and products!!!
Thanks a lot for share this info!!!

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Tue Nov 18, 2014 12:29 pm
by deal1668
hi there,version 2.0 i can't fix this bug, can you help for version 2.0, pls help step by step ,thanks so much!

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Fri Nov 21, 2014 12:31 pm
by kanisvaa
Any update on this issue solution at 2.0 version ??

Re: FIXED! Add Facebook Product Share w/Product Image Suppor

Posted: Fri Nov 21, 2014 8:29 pm
by aheen
does it work for opencart 1.5.6.4??