[MOD] Facebook Like Button on Product Page

[Nija]

It works for me.
Thx verry much !

[rasyid]

I am so happy.. my first mod and it work...

[daymobrew]

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.

[jcgadgets]

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...

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?

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-iPhone




Thank you,
Jared

[d3z1gnr]

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

[dry_flood]

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.

Install VQMod and use this VQScript http://forum.opencart.com/viewtopic.php?f=131&t=26749&p=132625#p132625

[nick the geek]

worked a treat straight off of the page

thank you very much

[vang]

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 } ?>

Did anyone happen to figure out a solution to this issue?
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" />


How do we call the url to the main product image dynamically?
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']; ?>" />

The retrieval is accomplished somewhere else?
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.

[vang]

No one can offer up anything? Please. Pretty please.

[d3z1gnr]

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

Really hoping someone can help me with?

[vang]

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

Really hoping someone can help me with?

Is this what you need? I'm not really sure, but it might work for you.

Code: Select all

<?php if ($keywords) { ?>
Whatever you want to put here
<?php } ?>


I'm not sure if the keywords meta tag will even display unless you actually insert keywords into your product.
See if this helps.

[dogacankanat]

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 } ?>

Did anyone happen to figure out a solution to this issue?
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" />


How do we call the url to the main product image dynamically?
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']; ?>" />

The retrieval is accomplished somewhere else?
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.

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]

Since I couldn't ever get an answer, I had to think outside of the box a little and rig something up.

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 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:

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; ?>"/>

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.

[philbydevil]

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.

[vang]

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!

[steppen321]

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.

Hi there,

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?

[dogacankanat]

Since I couldn't ever get an answer, I had to think outside of the box a little and rig something up.

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 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:

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; ?>"/>

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.

Hi vang,
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 I don't have any idea how this php and other things work

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" />

Here how it shows in source view:

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" />

Here is the code i managed to take images with SEO URL data:

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 } ?>

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?

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=" />

I checked your website and on your homepage you don't have this code, but you have it just on your product pages.
How can i manage the same?

Thank you so much!

[vang]

@steppen321 ... I believe you are missing the opengraph protocol in your header.

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; ?>"/>


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.

[vang]

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

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?

I believe this is a better execution and think I will try to apply this instead of using titles.

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 } ?>


So it looks like this

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 } ?>


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.

[dogacankanat]

Hi vang,
Thanks for the code. It works like a charm.

Code: Select all

<?php if ($keywords) { ?>
THIS IS WHERE I PUT MY OPENGRAPH TAGS
<?php } ?>

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