OpenCart Community

Posted: **Wed Mar 16, 2011 6:32 pm**

Hey,

I put in the code just as you said, but nothing appears on the product pages. It just adds some space between "average rating" and "Quantity"

Any ideas?

Edit -> fixed that, but the problem mentioned above with the wrong picture is still there. I read everithing posted but it is very hard for me to uderstand. Can somebody please write the solution as simple as possible?

Thanks a lot in advance!

Posted: **Thu Mar 17, 2011 4:33 am**

Just adding my post here so I get updates on this. I'd love to install this on my site but until the image issue is fixed I'll wait

Posted: **Thu Mar 17, 2011 6:42 pm**

I think I found another problem with this MOD. When I post a link on the fanpage of my website on facebook, the thumbnail doesn't appear at all.

It is great mod, but still some issues to clarify. Can somebody help us with this?

Posted: **Tue Mar 22, 2011 6:39 am**

Hello all!

I've been playing with FB Like button for a whole day and I still haven't figured out how to deal with main picture which is not displaying on FB wall when someone press like button at product.

I entered meta tags as:

On top of the header.tpl file

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" xml:lang="<?php echo $lang; ?>" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" >

Under meta tags

Code: Select all

<meta property="og:image" content="<?php echo $thumb; ?>" />

And when I open source code of my browser I get this error under meta property tag:

Code: Select all

<meta property="og:image" content="<b>Notice</b>: Undefined variable: thumb in <b>/var/www/vhosts/playroom.si/httpdocs/catalog/view/theme/studio/template/common/header.tpl</b> on line <b>25</b>" />

If someone knows how to define this variable then we should solve this problem without extra "FB" folders.

Can someone help me on this? Or have a suggestion?

Best regards

Posted: **Thu Mar 24, 2011 4:58 pm**

@WSurfer and anyone else trying to get the Facebook Like button to show the right image - an extension has just been posted where the solution can be found!

Take a look at the Facebook & Twitter Share extension: http://www.opencart.com/index.php?route ... on_id=1701

The only remaining issue I have now is to generate only one og:image tag rather than several if there are multiple product images, so the main image is always shown, but that's an issue I can live with for now

Posted: **Thu Mar 24, 2011 7:19 pm**

Hi sketchi!

Thank you for your reply!

Yup, I saw that there are multiple image meta tags, but for the most products it's working fine.

I just found one or two products on my site, where I always get related product picture.
it's this product: http://playroom.si/Onkyo-TX-SR-309

Maybe there should be a function, which would ordered to take only first picture, if more pictures are added to product.

but as you said... We can live with such small problem.

Thanks again

Posted: **Mon Mar 28, 2011 11:09 pm**

Hey Guys,

I saw the extension and the images are working fine there.

I have one questions, since i modified the product.tpl in view/theme/default, is it possible just to add this code in the header.tpl:

Code: Select all

<fb:share-button class="meta">
<meta name="medium" content="mult"/>
<?php foreach ($this->document->getFBMeta() as $fbMeta) { ?>
<meta property="<?php echo $fbMeta['property'] ?>" content="<?php echo $fbMeta['content']; ?>" />
<?php } ?>
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
</fb:share-button>

I got this code from the extension's documents section.

I tried just putting it there but no success with the images on facebook. Is there a way to add it correctly and resolve this annoying problem?

Posted: **Tue Mar 29, 2011 6:31 am**

Hello KuriN

Please check this instructions and modifications:

Take a look at the Facebook & Twitter Share extension: http://www.opencart.com/index.php?route ... on_id=1701

Best

Posted: **Tue Mar 29, 2011 11:11 am**

Sorry Sketchi. You know how it is working on a site. You end up jumping around and getting focused on other things. Well, that's how it is with me any way.

I don't have the [MOD] you guys are using so I really can't tell you what and what is not included, but I was having the IMAGE problem as many of you are. It seems as if whoever made the [MOD] didn't include instructions on how to properly set-up your header file with the Opengraph Protocol that Facebook uses to gather the data from your page.
By using the Opengraph protocol set-up that we discussed earlier everything works great on my end.

This is how I set-up my meta tag for the image (in the header.tpl of course).
Thank you dogacankanat for the code!

Code: Select all

<?php foreach ($links as $link) { ?>
<meta property="og:image" content="http://www.YOUR_DOMAIN.com/catalog/view/theme/YOUR_TEMPLATE/image/fb/<?php echo str_replace('http://www.YOUR_DOMAIN.com/', '', $link['href']); ?>.jpg"/>
<?php } ?>

We were never able to get the images pulled from the product page as hoped. It seems that "Addthis" can pull the image just fine, but I don't know how.

Anyway, I created an "fb" directory in my image directory (under my template), and uploaded my Facebook images there.
I had to use my product link to name the image file.
e.g. http://www.aboveclothing.com/Logos-V3-charcoal <-- I removed my URL and named my image Logos-V3-charcoal.jpg .

Here is the post to a Facebook wall:

and here is the Facebook page that is created:

I did this for each product. I don't have that many products right now, so it was not too difficult for me. I can see it being a pain if you have a lot of products.

Other than that, I really don't know what to tell you guys.
I was hoping we would have a better solution to pulling the image for Facebook, but apparently the right person hasn't seen this thread and shared it with us yet.

Do you want me to post what my header looks like?

Posted: **Tue Mar 29, 2011 3:28 pm**

If you don't have SEO friendly url's, you can also use this code:

Code: Select all

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo 'http://'.str_replace('&', '&',$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]); ?>" layout="button_count" show_faces="false" width="230" font=""></fb:like>

It doesn't use an iFrame, but the XFBML script.
You can customize your button here: http://developers.facebook.com/docs/ref ... gins/like/
(it also generates an iframe script)

I tested above code on OC 1.4.9.3
My store: http://www.qdeals.be

Posted: **Wed Mar 30, 2011 2:47 am**

baha wrote:If you don't have SEO friendly url's, you can also use this code:
Code: Select all
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo 'http://'.str_replace('&', '&',$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]); ?>" layout="button_count" show_faces="false" width="230" font=""></fb:like>
It doesn't use an iFrame, but the XFBML script.
You can customize your button here: http://developers.facebook.com/docs/ref ... gins/like/
(it also generates an iframe script)

I tested above code on OC 1.4.9.3
My store: http://www.qdeals.be

Yeah, but this code by itself won't pull the correct image.
That's where everyone is having the problem.
You need to set-up your header with the correct Opengraph Protocol for Facebook to grab the right image.
Am I right on this?

This is the problem I was having.
Is this the problem everyone is having?

Posted: **Thu Mar 31, 2011 6:44 pm**

Yea, same here.

I tried various codes for the heading in search of the correct opengraph, but no success. Still there is problem with the images.

I am not a pro, but I'm pretty sure that one of the guys here can help us out.

You need to set-up your header with the correct Opengraph Protocol for Facebook to grab the right image.

That is the main problem!

Posted: **Sat Apr 02, 2011 3:36 am**

The reason for the 'product not found' errors lies in the fact that the URL's fed to facebook are not encoded. Hence, if you have a & or ? in your product urls it doesn't work. This happens when you don't enter a seo url in a product.

To fix this add urlencode() to the facebook url:

Code: Select all

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode($this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&product_id='.$this->request->get['product_id'])); ?>&layout=standard&show_faces=false&width=280&action=like&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:270px; height:35px;" allowTransparency="true"></iframe></td></tr>

Posted: **Mon Apr 11, 2011 11:00 pm**

hello
did you get any luck with the the integration of facebook connect to opencart
i'm trying to make it work but no results so far
i would really appreciate some help
thanks

Posted: **Wed Apr 13, 2011 4:24 pm**

Nope, no luck yet. I tried everything i could, but still wrong image. I would appreciate help too...

Posted: **Wed Apr 13, 2011 11:55 pm**

is there any solution for the correct image?

vang wrote:Sorry Sketchi. You know how it is working on a site. You end up jumping around and getting focused on other things. Well, that's how it is with me any way.

I don't have the [MOD] you guys are using so I really can't tell you what and what is not included, but I was having the IMAGE problem as many of you are. It seems as if whoever made the [MOD] didn't include instructions on how to properly set-up your header file with the Opengraph Protocol that Facebook uses to gather the data from your page.
By using the Opengraph protocol set-up that we discussed earlier everything works great on my end.

This is how I set-up my meta tag for the image (in the header.tpl of course).
Thank you dogacankanat for the code!
Code: Select all
<?php foreach ($links as $link) { ?>
<meta property="og:image" content="http://www.YOUR_DOMAIN.com/catalog/view/theme/YOUR_TEMPLATE/image/fb/<?php echo str_replace('http://www.YOUR_DOMAIN.com/', '', $link['href']); ?>.jpg"/>
<?php } ?>

Is only this code needed , is it added or is some deleted and this replace it? also is it changed in http://www.YOUR_DOMAIN.com/catalog/view/theme/YOUR_TEMPLATE/template/common/header.tpl

i have the like button working and shows the right item but like others it doesnt show the main picture of the item.
Sorry for all the questions

Posted: **Sat Apr 16, 2011 12:02 am**

Hi Guys
I have a similar problem with someones above.

I have the like button in my shop, but the wrong product image is being passed to Facebook, everything else is fine, just the dam product image.

Can someone help?

thnaks

Chris

Posted: **Mon Jul 04, 2011 11:55 am**

HI everyone, I am minimal at best to writing and using php. I have had some success with modifying code to take care of simple things and I can usually follow instructions although my understanding of advanced terminology is nil. I came across this thread because I too want to add a like button and I thought when I read the instructions at the beginning of the thread that it should not be too hard. WRONG! The piece of code to look for in the first step does not exist in my product.tpl. I am using version 1.5.0.5. So now what do I do?

Edit the file: catalog/view/theme/default/template/product/product.tpl

Find this piece of code:

Code: Select all

</table>
            <br />
            <?php if ($display_price) { ?>

Replace the <br /> with the following:

Code: Select all

<div style="width: 100%; padding-top:10px;">
            <table>
               <tr>
              <td><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/product&product_id='.$this->request->get['product_id']); ?>&layout=standard&show_faces=false&width=280&action=like&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:270px; height:35px;" allowTransparency="true"></iframe>
              </td>
              </tr>
            </table>
            </div>

I have tested this on OpenCart 1.4.8b in IE6, IE7, IE8, FF 3.6.6

Let me know if you find any problems

[/quote]

Posted: **Fri Jul 15, 2011 12:06 am**

I have updated this to use the vQmod. So there are no core files that need to be edited.

All you need to do is upload the .xml below

Update the 'USER_ID' in the .xml to your facebook ID. More info here: http://developers.facebook.com/docs/opengraph/

The iframe for the like button changes quite regular so you are best getting the latest version from: http://developers.facebook.com/docs/ref ... gins/like/. The .xml is more to ensure that Facebook will detect the correct product image etc

Posted: **Wed Jul 20, 2011 4:08 pm**

Hi, I have uploaded the oc_facebook.xml file, but I haven't seen any sign of the facebook like icon. I did generate the like button, but I am unsure where to place it.

OpenCart Community

[MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page

Re: [MOD] Facebook Like Button on Product Page