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
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
Attachments
error-product.jpg (37.26 KiB) Viewed 25086 times
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
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
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
Below was my solution in /catalog/view/theme/default/template/product/product.tpl:
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:
And you could then alter my above solution to replace the og:image property instead, like this:
This way you have a default opengraph image but you can override it with the product thumbnail (or whatever else you want).
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; ?>
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 } ?>
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; ?>
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.
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.
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.gocreative wrote:Have you checked that the image is RGB and 72dpi?
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
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.
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
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
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/
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).
In your theme header.tpl:
In controller/common/header.php, just after: $this->data['name'] = $this->config->get('config_name'); :
This code fix the problem for me.
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 -->
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();
Attachments
og:image facebook meta opencart - ogimage_opencart.png (251.06 KiB) Viewed 21227 times
Pedro Martin - websitesbuilder.com.au
Checkout my free extensions: https://www.opencart.com/index.php?rout ... r=comprido
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!!!
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!!!
Who is online
Users browsing this forum: No registered users and 68 guests