Tutorial: How to get Facebook Like working on your Virtuemart site

[kevinwood]

Having received some requests for a tutorial on how to use VM Open Graph to get the Facebook Like button working in Virtuemart, I have written one.  I hope you find it helpful.

Please visit it here:
http://www.bigskyphotography.ca/design/tutorial-facebook-like-virtuemart/

If you have any comments or questions about this tutorial, please post them below.

Thank you.

[thanoss43]

Hi Kevin,

Thanks for your tutorial and your pluggins.

I have a problem with joomfish.

I am in English Language and i press like for a product. I have 1 like.

Then I change the language to Greek and go to the same product. I have 0 likes. I called some friends and told them to "like" a specific product, using the English language of my site. Now I have 7 likes for the product when in English language and 0 when viewing the same products in Greek.

Do you have any suggestions?

Thanks

[kevinwood]

Can you post a link to your site?

[kevinwood]

Okay, I learn something new every day, which is excellent.  Joomfish, and presumably most other multi-language support extensions, changes the base URL to reflect different languages.  So in your example your base URL for English will be:
www.mysite/en/index.php...
and your base URL for Greek will be:
www.mysite/el/index.php...

I have to think about this some more to determine what the best solution is.

In the meanwhile, I recommend not using the Add Canonical plugin.  Instead, you could use the og:url tag to point to a single language.  This will cause your English Likes to show up on the Greek URLs and vice-versa.  

I have attached a modified version of the plugin that will add the og:url tag which will point all of your Greek pages to the English version.  If you prefer it the other way around just reverse the languages on lines 155 and 156.

This version can also be used by anyone else looking for multi-language support with minimal changes.  

Anyway, let me know if you have any problems with this.


[edit: attachment removed.  functionality is now included in the plugin]

[thisispipe]

Kevin,

Your post is useful to me, however after I click "like", a red error occur stating that the facebook could not reach my page.

I read a related post, in order to set up XFBML version, do we need to add something that called Javascript SDK to our pages?

[kevinwood]

Is your site accessible from the Internet?  Facebook needs to be able to be able to access the page that has the like button on it.

If you are sure that this is not the problem, please post a link to your site so that I can take a look.

[thisispipe]

Yes, I'm certain that my website can be accessed from the internet. It would be great if you can look at my page as now I still could not find the problem. Please note that the website is not in English but you should be able to find the Facebook button easily.

http://mytowelhouse.com/index.php?page=shop.product_details&product_id=21&flypage=flypage.pbv.v1.tpl&pop=0&option=com_virtuemart&Itemid=58

[kevinwood]

I think that the problem appears to be that the Add Canonical plugin is pointing to a different browse page template (flypage.tpl) than the one you are actually using (flypage.pbv.v1.tpl), and the template pointed to doesn't have the Like button on it.

The way that the Add Canonical plugin determines which browse page template to include in its URL is by looking for the first published category that the product is in and selecting the template associated with it.  Please take a look at your categories that contain this product and see if "flypage.tpl" is set for any of them and if so, try changing them to "flypage.pbv.v1.tpl" instead and let me know if that works.

[thisispipe]

Thanks for your quick response.

From what you have suggested, I looked at two spots I could think of(please see screen-shot attachment).
1. At a specific setting of each product category
2. Global setting, at a tab "Site"

The FB button still shows a red error after clicking. Any more suggestion to this problem Kevin?

Thanks again

[attachment cleanup by admin]

[kevinwood]

Your page source still shows the canonical link pointing to flypage.tpl:

Code: [Select]

<link href="http://mytowelhouse.com/index.php?page=shop.product_details&product_id=21&flypage=flypage.tpl&option=com_virtuemart&Itemid=58" rel="canonical"  />

Check the product page in VM configuration and see what other categories the product belongs to, and check which template those categories are set to use.

[m.davide82]

Everything ok with VM, but now I have another problem...

I'm using it for all the articles.. and the plugin doesn't take the right image but another one in the site.

How can I take the first image on the article?
How can I insert the link tag in each article?


Thanks a lot in advance,

David

[nflmerch]

thanks kevinwood, good tutorial. It worked right away, but it seems to load very slow.  for example:
http://nflmerch.com/index.php?page=shop.product_details&category_id=18&flypage=flypage.tpl&product_id=2032&option=com_virtuemart&Itemid=160
Does it do that for everyone else or just me?

[kevinwood]

Seems fine to me.  I have noticed that there is occasionally a noticeable delay between the majority of the page loading and then the actual Like button appearing, but it is not a significant delay.

[nflmerch]

I'm getting sometimes a 10 second delay on newly browsed pages. When I refresh the same page it must be cached because then it appears right away. I don't believe it's my connection because i have a high speed T1, but I should test it outside the local network. It's good to know that the facebook like is not inherantly slow. I also thought it was perhaps the new IE9 browser, but google chrome does the same thing for me.

[kevinwood]

You do have quite a lot of products on your site.  Can you determine whether it is the facebook code or the plugins that are causing the delay?  Try disabling the two plugins one at a time and viewing new pages and see which element is slowing you down.