Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 2.5 Support (CLOSED)
  7. Facebook Like button on virtuemart product details page problems

Topic-icon Facebook Like button on virtuemart product details page problems

Active Subscriptions:

None
10 years 1 week ago - 10 years 1 week ago #43413 by Cydonian
Hi,
I wanted to place a "FB Like" button on virtuemart product details page so I placed
{JFBCLike}
in /templates/ot_swizcake/html/com_virtuemart/productdetails/default.php file. and I could see it here:
www.kemalustawaffless.com/urunlerimiz/waffle-detayi

But I have 2 problems:
1- When someone logins to web site and clicks on "FB like" button under virtuemart product details, it posts wrong product image to facebook.
To solve it, I added
{SCOpenGraph image=<?php echo IMAGEURL.'product/'.$productArray['product_thumb_image']; ?>}
in /components/com_virtuemart/views/productdetails/tmpl/default.php file but it didn't solve the issue.
.
I checked the product URL on developers.facebook.com/tools/debug & facebook debug tool displays 2 types of warnings:
Like Button Warnings That Should Be Fixed => Like Button Tag Missing. og:image is missing. The og:image meta tag is necessary for Facebook to render a News Feed story that generates a high click-through rate.
Open Graph Warnings That Should Be Fixed => a) Inferred Property. The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags. b) Mismatch og:url and canonical url. og:url tag in the header is not the same URL as rel='canonical' link in the html.
.
2- It does not display "post" on user's profile wall because it seems it has "only me" permission instead of "public". I think this is related with permissions but I don't know where to change it on settings of JFBconnect component.
I need help, thanks!
Last edit: 10 years 1 week ago by Cydonian.
The topic has been locked.
Support Specialist
10 years 1 week ago #43426 by alzander
Your code and steps above do seem correct. However, in the HTML on the page you linked to, there is no og:image tag. Are you sure the file you edited is the correct one? The best way to check is to edit the {SCOpenGraph image=...} tag to look like:
TEST{SCOpenGraph image=...}TEST
JFBConnect should strip out the tag, but will leave "TESTTEST" behind. If that isn't showing on the page, it means you're not editing the proper file. In that case, check to find the right file to edit, including any template overrides you may have for Virtuemart.

2) Let's get the post working first, and then we can diagnose permissions issues. Without an image, Facebook gives much less weight to Likes/Shares so that it's more likely those won't show on your Timeline. With an image set, it may start showing up more often in your timeline.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 6 days ago - 10 years 6 days ago #43461 by Cydonian
Thanks for your reply, Alex. I did what you said, I placed
TEST{SCOpenGraph image=...}TEST
in /templates/ot_swizcake/html/com_virtuemart/productdetails/default.php file (template override file). And I could see it here as TESTTEST :
www.kemalustawaffless.com/urunlerimiz/waffle-detayi
So it seems I edit the correct file. Then I placed
{SCOpenGraph image=<?php echo IMAGEURL.'product/'.$productArray['product_thumb_image']; ?>}
in the same file, instead of
TEST{SCOpenGraph image=...}TEST
But when I enter this URL to facebook debug tool, it gives this error:
Errors That Must Be Fixed => Object Invalid Value. Object at URL 'www.kemalustawaffless.com/urunlerimiz/waffle-detayi?showall=1' of type 'article' is invalid because the given value 'IMAGEURLproduct/' for property 'og:image:url' could not be parsed as type 'url'.
The product on this URL has 3 images, can that be a problem??
Last edit: 10 years 6 days ago by Cydonian.
The topic has been locked.
Support Specialist
10 years 6 days ago #43468 by alzander
That's great information. It means the tag is working, but the path to the image is incorrect.

Can you try updating your tag to the following:
{SCOpenGraph image=http://YOURSITE.com/<?php echo $this->product->images[0]->file_url;?>}
It looks like Virtuemart may have changed how the image should be loaded, and that is likely why the path above doesn't work. Test that, and let me know if the og:image tag is set properly. Also, let us know what version of Virtuemart you're using so that we know what version that update does (or doesn't) work with.

We'll update our 3rd party integration page appropriately.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 5 days ago #43489 by Cydonian
I added the code
{SCOpenGraph image=http://YOURSITE.com/<?php echo $this->product->images[0]->file_url;?>}
in in /templates/ot_swizcake/html/com_virtuemart/productdetails/default.php file (template override file) and then I tested the URL on facebook debug tool.
Facebook debug tool says:
Open Graph Warnings That Should Be Fixed =>
a) og:image should be larger. Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'www.kemalustawaffless.com/images/stories...affle320_360x360.jpg' will be used instead.
b) Mismatch og:url and canonical url. og:url tag in the header is not the same URL as rel='canonical' link in the html.
So,
Facebook debug tool sees the correct image's (waffle2_360x360.jpg) thumbnail (I think it is 50x50 or 80x50), not the image itself and it says "Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'www.kemalustawaffless.com/images/stories...affle320_360x360.jpg' will be used instead."
So when a user likes the product by clicking "FB like button", it shows the wrong image in pop-up window (waffle320_360x360.jpg) but when I login to facebook and change permissions of that post to "public" and "show on timeline", it displays half of the correct image :rolleyes:
I really don't like virtuemart's latest image management UI, it is very complex and hard to understand.
Anyway, I included 3 screenshots explaning what is going on with virtuemart product image issue.
I am using joomla v2.5.19 and virtuemart v2.0.24c on my web site.
Waiting for your opinions, thanks!

File Attachment:


File Attachment:


File Attachment:
The topic has been locked.
Support Specialist
10 years 5 days ago #43511 by alzander
For the og:image warning, that's a somewhat common, incorrect, error on their part. We're not sure why they don't detect image dimensions properly in all cases. The important thing is that it shows in the Timeline correctly.

In the popup, it's likely using the 'wrong' image because their detection is being done through Javascript. For whatever reason, they think the 'right' image is too small and pull the biggest image that they see. I'm not sure how this can be corrected on your end. It may fix itself in a few days after Facebook has thoroughly seen the correct og:image tag working in Timeline posts, but I can't guarantee that.

b) Mismatch og:url and canonical url. og:url tag in the header is not the same URL as rel='canonical' link in the html.

For some reason JFBConnect thinks the proper URL for the page is with the ?showall=1 query string. I'm not sure why that is, and we'll have to look into it. The good news is that it shouldn't be affecting your output as both of those are the exact same page.

I hope that helps explain, but if you have any other questions, just let me know.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 4 days ago - 10 years 4 days ago #43537 by Cydonian
Thanks Alex. At the moment, it posts the correct image to facebook user wall but image on user's profile wall/timeline looks like "not complete", it looks like half of the correct image, please check my 3rd screenshot in my previous message.

Another problem I have mentioned in one of my previous messages is that it posts virtuemart product to facebook but it isn't displayed in user's "profile wall/timeline", I think there is a problem with permissions. After I clicked "FB Like button" on my web site, I logged into my facebook profile and I had to change post's permissions from "only me" to "public". How can I fix that?
Last edit: 10 years 4 days ago by Cydonian.
The topic has been locked.
Support Specialist
10 years 4 days ago #43540 by alzander
There isn't a way to force Facebook to show the full photo. They will crop things as they see fit for the view. They recommend using images with a 1.9:1 aspect ratio, which should show fully in most views. Your image is 600x400, which is a 1.5:1 ratio.

The good news is that the image shows like the below image when I go to my own news feed:
File Attachment:

Also, when I clicked the Like button on your site, the proper image showed, so that issue seems to be gone as well.

Regarding the permissions, they seem setup correctly for me. You can view my profile below, which shows the Like. I did not change any settings for that post:
www.facebook.com/alex.sourcecoast

My guess is that your Facebook privacy settings are configured in a way to make most content "Me Only" or "Friends Only" by default. In that case, that's the proper behavior. Let me know if you're still seeing different behavior, we'll gladly help however we can.

Thanks,
Alex
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 2.5 Support (CLOSED)
  7. Facebook Like button on virtuemart product details page problems
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS