Virtuemart does not have a 1-click integration with JFBConnect, like some other extensions. To add the social login buttons to your Virtuemart pages, you will need to add the {JFBCLogin} easy-tag to the appropriate page. First, create a template override of the page where you want the login buttons. For instance, if you'd like to add the buttons to the VM cart, then add the following in your file:
<h2>Login with your Social Accounts</h2>
{JFBCLogin}
If you're adding it in a PHP block, it would look like the following:
echo '<h2>Login with your Social Accounts</h2>{JFBCLogin}';
When using JFBConnect to add Like buttons to your Virtuemart pages, you may notice that when a user Like's your products, a non-product image from the page may show in the user's wall. To fix this, you should use the Open Graph tags to let Facebook know what image should be used for wall posts. Adding the Open Graph tag can be done by modifying the flypage template file for the product page with the following code:
For our testing with Virtuemart 3.x, we created a template override for /components/com_virtuemart/views/productdetails/tmpl/default.php to add the description tag.
<?php if (!empty($this->product->product_desc)) { ?>
{SCOpenGraph description=<?php echo $this->product->product_desc; ?>}
<?php } ?>
To add the image tag, we created a template override for /components/com_virtuemart/views/productdetails/tmpl/default_images.php, inside an existing block of code that defines $image.
if (!empty($this->product->images)) {
$image = $this->product->images[0];
?>
{SCOpenGraph image=<?php echo JURI::root().$image->file_url;?>}
<div class="main-image">
<?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); ?>
<div class="clear"></div>
</div>
<?php
}
?>
Please note that the Open Graph easy-tags should be added just like normal HTML (outside of any PHP blocks). It can be added anywhere in the file, position does not matter.
{SCOpenGraph image=<?php echo IMAGEURL.'product/'.$productArray['product_thumb_image']; ?>}
For our testing with Virtuemart 2.x, we added the code above to the /components/com_virtuemart/themes/default/templates/product_details/flypage.tpl.php file. If you want to add a description for the preview, you can add a corresponding SCOpenGraph tag also.