I recently added a Facebook Like Button to my product page. I used the FBLB extension (which just includes a modifiy product.tpl file).
Instead of modifying a core file I wrote a vQmod xml file to make the change virtually. It is using Qphoria's excellent vQmod module, with support thread on this board.
You can download the facebook like button xml file from my web site. I have attached it to this post too - just rename .xml.txt to .xml before uploading it to your vqmod/xml directory.
Instead of modifying a core file I wrote a vQmod xml file to make the change virtually. It is using Qphoria's excellent vQmod module, with support thread on this board.
You can download the facebook like button xml file from my web site. I have attached it to this post too - just rename .xml.txt to .xml before uploading it to your vqmod/xml directory.
Attachments
vQmod xml file for Facebook Like Button extension.
Did anyone ever get this whole thing fully figured out, with no errors and everything working 100%? I would use Q's vmod tool but...to be honest I am lucky to have gotten as far as I have, and don't dare play with things that I don't really understand :S
On another note...
Thank you,
Jared
On another note...
I'm not sure if you're still watching this thread or if you've figured out the problem, but the SEO keywords will actually constitute your URL, hence you cannot have commas in that field. If you're selling an Apple iPhone, you would not want to enter "apple,iphone" in the keywords box, you would want to enter "Apple-iPhone", which would generate a product URL like yourstore.com/Apple-iPhoneCEOself wrote:When I turn on the SEO URLs everything goes out the window. The product pages run to "Page Not Found". I have multiple SEO keywords in for each item. They are separated by commas. Any ideas of what I am doing wrong?
Thank you,
Jared
hi guys,
can someone let me know the required if statement to prevent my like button from appearing on the page if the client HAS NOT entered an seo keyword.
this works really well, just have a very lazy client! haha.
mike
can someone let me know the required if statement to prevent my like button from appearing on the page if the client HAS NOT entered an seo keyword.
this works really well, just have a very lazy client! haha.

mike
Mike Little
Director / Developer / Makes the coffee
Creative Digital Limited
http://www.creativedigital.co.nz
Install VQMod and use this VQScript http://forum.opencart.com/viewtopic.php ... 25#p132625musicofthehart wrote:I did NOT have SEO URLS enabled, I am sure that was my problem, but now I have opened up a whole new can of worms since I turned that on.... all of my pages are not found. I am sure it has to do with the fact that I am using godady hosting. Ill try to figure out this problem and get back to you. Great mod btw... and I am sure it works once I get my new problem fixed.
Did anyone happen to figure out a solution to this issue?sketchi wrote:The Facebook Like iframe works for me (running OpenCart 1.4.9.2) but the wrong product image is displayed in my Facebook feed. Any ideas how to fix?
Edit: I think what's needed is an Open Graph meta tag with the correct image path, so I've tried entering this into header.tpl, but I don't get it to display the thumb:
Code: Select all
<?php if ($thumb) { ?> <meta property="og:image" content="<?php echo $thumb; ?>" /> <?php } ?>
This is what I have for the opengraph protocol in my header, but the only thing I can't get to work is the image.
Code: Select all
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:site_name" content="COMPANY NAME" />
<meta property="og:image" content="<?php echo $product['image']; ?>" />
<meta property="og:type" content="product" />
<meta property="og:url" content="<?php echo $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&product_id='.$this->request->get['product_id']); ?>" />
<meta property="og:description" content="<?php echo $description; ?>" />
<meta property="fb:app_id" content="MY_APP_ID" />
Everything I put there such as <?php echo $thumb; ?> or <?php echo $image; ?> doesn't work.
Code: Select all
<meta property="og:image" content="<?php echo $product['image']; ?>" />
How would we call the main image by itself?
BTW, everything else works fine, the call to the image is the only thing that breaks.
Thanks in advance.
Really hoping someone can help me with?d3z1gnr wrote:hi guys,
can someone let me know the required if statement to prevent my like button from appearing on the page if the client HAS NOT entered an seo keyword.
this works really well, just have a very lazy client! haha.![]()
mike
Mike Little
Director / Developer / Makes the coffee
Creative Digital Limited
http://www.creativedigital.co.nz
Is this what you need? I'm not really sure, but it might work for you.d3z1gnr wrote:Really hoping someone can help me with?d3z1gnr wrote:hi guys,
can someone let me know the required if statement to prevent my like button from appearing on the page if the client HAS NOT entered an seo keyword.
this works really well, just have a very lazy client! haha.![]()
mike
Code: Select all
<?php if ($keywords) { ?>
Whatever you want to put here
<?php } ?>

See if this helps.
I am facing the same problem. Title and Description is OK but as the first product image, facebook share shows a image which is located in the footer of my page, rather than the real product image. Original product image comes as the second one. How i can fix this?vang wrote:Did anyone happen to figure out a solution to this issue?sketchi wrote:The Facebook Like iframe works for me (running OpenCart 1.4.9.2) but the wrong product image is displayed in my Facebook feed. Any ideas how to fix?
Edit: I think what's needed is an Open Graph meta tag with the correct image path, so I've tried entering this into header.tpl, but I don't get it to display the thumb:
Code: Select all
<?php if ($thumb) { ?> <meta property="og:image" content="<?php echo $thumb; ?>" /> <?php } ?>
This is what I have for the opengraph protocol in my header, but the only thing I can't get to work is the image.How do we call the url to the main product image dynamically?Code: Select all
<meta property="og:title" content="<?php echo $title; ?>" /> <meta property="og:site_name" content="COMPANY NAME" /> <meta property="og:image" content="<?php echo $product['image']; ?>" /> <meta property="og:type" content="product" /> <meta property="og:url" content="<?php echo $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&product_id='.$this->request->get['product_id']); ?>" /> <meta property="og:description" content="<?php echo $description; ?>" /> <meta property="fb:app_id" content="MY_APP_ID" />
Everything I put there such as <?php echo $thumb; ?> or <?php echo $image; ?> doesn't work.The retrieval is accomplished somewhere else?Code: Select all
<meta property="og:image" content="<?php echo $product['image']; ?>" />
How would we call the main image by itself?
BTW, everything else works fine, the call to the image is the only thing that breaks.
Thanks in advance.
Since I couldn't ever get an answer, I had to think outside of the box a little and rig something up.
What I ended up doing is creating an /fb/ directory and creating new image files using the product title for the image name. Then put these images in the new /fb/ directory. The only thing I don't like about this solution is I have spaces in my titles. Therefore, there are spaces in the image name, which will probably cause problems somewhere? IE?
What would be ideal for me is to use the SKU as the image name, since I used the SKU to name all my product images.
I'm thinking about adding "Q's" vQmod and integrating the SKU mod, then try to pull the SKU instead of the Title.
I don't know if this will work either. It'll probably end up being another situation like the <?php echo $product['image']; ?> problem.
I believe I need to install the vQmod anyway. It looks pretty cool and makes sense.
Anyhow, I hope this helps a little.
I know it is probably a "crazy" way of getting it done, but it works. At least on my end.
I was desperate, so I had to get creative.
This is how I have my opengraph tags setup:
Go to my site and like a product and see for yourself.
You can always unlike it.
If the whole SKU idea works I'll let you know.
You know, what still bugs me though is that <?php echo $product['image']; ?> doesn't work. I guess it is pulling a gallery of images and won't work as is? I dunno.
Code: Select all
<meta property="og:image" content="http://www.MY_DOMAIN.com/catalog/view/theme/MY_TEMPLATE/image/fb/<?php echo $title; ?>.jpg"/>

What would be ideal for me is to use the SKU as the image name, since I used the SKU to name all my product images.
I'm thinking about adding "Q's" vQmod and integrating the SKU mod, then try to pull the SKU instead of the Title.
I don't know if this will work either. It'll probably end up being another situation like the <?php echo $product['image']; ?> problem.
I believe I need to install the vQmod anyway. It looks pretty cool and makes sense.
Anyhow, I hope this helps a little.
I know it is probably a "crazy" way of getting it done, but it works. At least on my end.

I was desperate, so I had to get creative.

This is how I have my opengraph tags setup:
Code: Select all
<meta property="og:title" content="<?php echo $title; ?>"/>
<meta property="og:site_name" content="MY_SITE_NAME"/>
<meta property="og:image" content="http://www.MY_DOMAIN.com/catalog/view/theme/MY_TEMPLATE/image/fb/<?php echo $title; ?>.jpg"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="<?php echo $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&product_id='.$this->request->get['product_id']); ?>"/>
<meta property="og:description" content="<?php echo $description; ?>"/>
You can always unlike it.
If the whole SKU idea works I'll let you know.
You know, what still bugs me though is that <?php echo $product['image']; ?> doesn't work. I guess it is pulling a gallery of images and won't work as is? I dunno.

Nice website vang!
I've just been introduced to this site: AddThis - http://www.addthis.com, which has tracking for most social sharing (maybe not Likes or Tweets). The tracking can be added to Google Analytics.
I've just been introduced to this site: AddThis - http://www.addthis.com, which has tracking for most social sharing (maybe not Likes or Tweets). The tracking can be added to Google Analytics.
I heart cmd-f, cmd-c, cmd-v, cmd-z + vQmod.
My favourite page...
v1.5.4.1
Thank you philbydevil. I am still tweaking the site, but I don't think that will ever end! 
Yeah, I also have "AddThis" on the category and product pages.
Had it on there before I started playing with the OpenGraph protocol.
I'll probably keep "AddThis" there for all of the other sharing options.
What I really want is Single Sign On or Facebook Connect integrated.
May have to just purchase the mod from the commercial extensions?
Oh, BTW, your site is really nice too! It's a clean and nice modification of OpenCart!
Good job!

Yeah, I also have "AddThis" on the category and product pages.
Had it on there before I started playing with the OpenGraph protocol.
I'll probably keep "AddThis" there for all of the other sharing options.
What I really want is Single Sign On or Facebook Connect integrated.
May have to just purchase the mod from the commercial extensions?

Oh, BTW, your site is really nice too! It's a clean and nice modification of OpenCart!
Good job!

Hi there,daymobrew wrote:I recently added a Facebook Like Button to my product page. I used the FBLB extension (which just includes a modifiy product.tpl file).
Instead of modifying a core file I wrote a vQmod xml file to make the change virtually. It is using Qphoria's excellent vQmod module, with support thread on this board.
You can download the facebook like button xml file from my web site. I have attached it to this post too - just rename .xml.txt to .xml before uploading it to your vqmod/xml directory.
I really like your module for Opencart: vqmod-facebook-like-product.xml,
but I found one inconvient problem with it.
When like button is pressed, on the facebook wall appears product title, description and the RANDOM image from the shop, which never is the one of the product.
Screens:


Do you have any fix?
Hi vang,vang wrote:Since I couldn't ever get an answer, I had to think outside of the box a little and rig something up.What I ended up doing is creating an /fb/ directory and creating new image files using the product title for the image name. Then put these images in the new /fb/ directory. The only thing I don't like about this solution is I have spaces in my titles. Therefore, there are spaces in the image name, which will probably cause problems somewhere? IE?Code: Select all
<meta property="og:image" content="http://www.MY_DOMAIN.com/catalog/view/theme/MY_TEMPLATE/image/fb/<?php echo $title; ?>.jpg"/>
![]()
What would be ideal for me is to use the SKU as the image name, since I used the SKU to name all my product images.
I'm thinking about adding "Q's" vQmod and integrating the SKU mod, then try to pull the SKU instead of the Title.
I don't know if this will work either. It'll probably end up being another situation like the <?php echo $product['image']; ?> problem.
I believe I need to install the vQmod anyway. It looks pretty cool and makes sense.
Anyhow, I hope this helps a little.
I know it is probably a "crazy" way of getting it done, but it works. At least on my end.![]()
I was desperate, so I had to get creative.![]()
This is how I have my opengraph tags setup:Go to my site and like a product and see for yourself.Code: Select all
<meta property="og:title" content="<?php echo $title; ?>"/> <meta property="og:site_name" content="MY_SITE_NAME"/> <meta property="og:image" content="http://www.MY_DOMAIN.com/catalog/view/theme/MY_TEMPLATE/image/fb/<?php echo $title; ?>.jpg"/> <meta property="og:type" content="product"/> <meta property="og:url" content="<?php echo $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&product_id='.$this->request->get['product_id']); ?>"/> <meta property="og:description" content="<?php echo $description; ?>"/>
You can always unlike it.
If the whole SKU idea works I'll let you know.
You know, what still bugs me though is that <?php echo $product['image']; ?> doesn't work. I guess it is pulling a gallery of images and won't work as is? I dunno.
First of all you have really well designed website. Congratulations.
I used opengraph metatags that you provided and as you mentioned i couldn't manage to show the exact product image.
So i changed the code little bit and voila! Now title, description and picture of the product, are all right. However, my way how i tweaked the code is so odd


Code: Select all
<meta property="fb:admins" content="100000316282537" />
<meta property="og:title" content="<?php echo $title; ?>"/>
<meta property="og:site_name" content="Šeherezad"/>
<?php foreach ($links as $link) { ?>
<meta property="og:image" content="http://www.seherezad.cz/image/fb/<?php echo str_replace('http://www.seherezad.cz/', '', $link['href']); ?>.jpg"/>
<?php } ?>
<meta property="og:type" content="product"/>
<meta property="og:url" content="<?php echo $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&product_id='.$this->request->get['product_id']); ?>" />
<meta property="og:description" content="<?php echo $description; ?>"/>
<meta property="og:latitude" content="49.221038" />
<meta property="og:longitude" content="17.665640" />
<meta property="og:street-address" content=
"námestí Tomáše Garrigue Masaryka, 1280" />
<meta property="og:locality" content="Zlín" />
<meta property="og:region" content="Zlínsky Kraj" />
<meta property="og:postal-code" content="76001" />
<meta property="og:country-name" content="CR" />
<meta property="og:email" content="info@seherezad.cz" />
<meta property="og:phone_number" content="+420775986866" />
Code: Select all
<meta property="fb:admins" content="100000316282537" />
<meta property="og:title" content="Náramek"/>
<meta property="og:site_name" content="Šeherezad"/>
<meta property="og:image" content="http://www.seherezad.cz/image/fb/cerveny-naramek-s-allahovymi-oky-z-turecka.jpg"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.seherezad.cz/cerveny-naramek-s-allahovymi-oky-z-turecka" />
<meta property="og:description" content="Červený náramek s Alláhovými oky z Turecka."/>
<meta property="og:latitude" content="49.221038" />
<meta property="og:longitude" content="17.665640" />
<meta property="og:street-address" content=
"náměstí Tomáše Garrigue Masaryka, 1280" />
<meta property="og:locality" content="Zlín" />
<meta property="og:region" content="Zlínsky Kraj" />
<meta property="og:postal-code" content="76001" />
<meta property="og:country-name" content="CR" />
<meta property="og:email" content="info@seherezad.cz" />
<meta property="og:phone_number" content="+420775986866" />
Code: Select all
<?php foreach ($links as $link) { ?>
<meta property="og:image" content="http://www.seherezad.cz/image/fb/<?php echo str_replace('http://www.seherezad.cz/', '', $link['href']); ?>.jpg"/>
<?php } ?>
Then i hide "http://www.seherezad.cz/" url by using str_replace code.
Sorry for my bad English, but i think you got it

However i belive that there must be a better way to write this code. Do you have any idea?
and one more question to you,
In all product pages <meta property="og:url" > code works perfectly, but unfortunately in my homepage it gives the error
Code: Select all
<meta property="og:url" content="<b>Notice</b>: Undefined index: product_id in <b>/home/content/07/7101507/html/seherezad/catalog/view/theme/shopper_land_clean/template/common/header.tpl</b> on line <b>12</b>http://www.seherezad.cz/index.php?route=product/product&product_id=" />
How can i manage the same?
Thank you so much!
@steppen321 ... I believe you are missing the opengraph protocol in your header.
You can find more info in the Facebook Developer documentation here:
http://developers.facebook.com/docs/opengraph/
Plus there are other opengraph meta tags you can add as well, which are documented on the above page.
I hope this helps you get the proper images to display.
Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
Code: Select all
<meta property="og:title" content="<?php echo $title; ?>"/>
<meta property="og:site_name" content="MY_SITE_NAME"/>
<meta property="og:image" content="http://www.MY_DOMAIN.com/catalog/view/theme/MY_TEMPLATE/image/fb/<?php echo $title; ?>.jpg"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="<?php echo $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&product_id='.$this->request->get['product_id']); ?>"/>
<meta property="og:description" content="<?php echo $description; ?>"/>
http://developers.facebook.com/docs/opengraph/
Plus there are other opengraph meta tags you can add as well, which are documented on the above page.
I hope this helps you get the proper images to display.

Hey dogacankanat! You have a nice site as well. Congratulations! and Thank you.

As far as only displaying them on the product pages, I only call my opengraph tags when keywords are used
So it looks like this
Of course, I am going to change the "<?php echo $title; ?>.jpg" to "<?php echo str_replace('http://www.seherezad.cz/', '', $link['href']); ?>.jpg"/>", which is way better than what I had.
It is probably not as clean or as well executed as possible, but I've been learning as I go.
There is probably a better way, but I was looking for a quick solution, then planned to come back later and clean it up.
I hope this helps.
Thank you dogacankanat for providing a better image solution.
I believe this is a better execution and think I will try to apply this instead of using titles.Instead of SKU or Title data, i used SEO URL data as product image names. Unfortunately i have a lot of products using the same Title data. Thats why i used SEO URL data. I copied product images which i want facebook to show to the directory " /image/fb/ " and renamed them according to each products SEO URL.
Then i hide "http://www.seherezad.cz/" url by using str_replace code.
Sorry for my bad English, but i think you got it
However i belive that there must be a better way to write this code. Do you have any idea?

As far as only displaying them on the product pages, I only call my opengraph tags when keywords are used
Code: Select all
<?php if ($keywords) { ?>
THIS IS WHERE I PUT MY OPENGRAPH TAGS
<?php } ?>
Code: Select all
<?php if ($keywords) { ?>
<meta property="og:title" content="<?php echo $title; ?>"/>
<meta property="og:site_name" content="MY_SITE_NAME"/>
<meta property="og:image" content="http://www.MY_DOMAIN.com/catalog/view/theme/MY_TEMPLATE/image/fb/<?php echo $title; ?>.jpg"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="<?php echo $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&product_id='.$this->request->get['product_id']); ?>"/>
<meta property="og:description" content="<?php echo $description; ?>"/>
<?php } ?>
It is probably not as clean or as well executed as possible, but I've been learning as I go.
There is probably a better way, but I was looking for a quick solution, then planned to come back later and clean it up.

I hope this helps.
Thank you dogacankanat for providing a better image solution.

Hi vang,
Thanks for the code. It works like a charm.
Don't forget to add additional opengraph tags too
maybe for now they are not so necessary, but who knows what they will bring in future? 
By the way as i can see most opencart users are not aware of the importance of facebook integration to the opencart system. However, more and more people use social sharing tools everyday. and when they do this, it's our responsiblity to provide them with right product images,titles and descriptions.
Now i am trying to integrate facebook connect but so far i couldn't get any results.
Also i am trying to put facebook comments system instead of default opencart comments/review.
If i can manage, i will let you know
Thanks for the code. It works like a charm.
Code: Select all
<?php if ($keywords) { ?>
THIS IS WHERE I PUT MY OPENGRAPH TAGS
<?php } ?>


By the way as i can see most opencart users are not aware of the importance of facebook integration to the opencart system. However, more and more people use social sharing tools everyday. and when they do this, it's our responsiblity to provide them with right product images,titles and descriptions.
Now i am trying to integrate facebook connect but so far i couldn't get any results.
Also i am trying to put facebook comments system instead of default opencart comments/review.
If i can manage, i will let you know

Who is online
Users browsing this forum: No registered users and 4 guests