Virtuemart 2 & Open Graph - Facebook share

[Zekule]

Does anyone got lucky with Virtuemart 2 and Open Graph?

I have inserted Facebook Like, Tweet and Google+ on the Product Details page but when I press "Like" it shows some other picture. I need to show the product picture...

I have inserted the meta tags in the product details page and it reads the picture but returns error because if need to read the whole path of the website.

The code inserted in Product Page is:

<?php

$og_type = 'article';
$og_url = $this->product->images[0]->file_url_thumb;
$og_image = $file_url;

$doc = JFactory::getDocument();
$doc->setMetaData( 'og:type', $og_type );
$doc->setMetaData( 'og:url', $og_url );
$doc->setMetaData( 'og:image', $og_image );

?>

It reads: images/products/products_name.jpg

Need to be: http://www.my-domain.com/images/products/products_name.jpg in order Facebook to show the product picture.

Checked on: https://developers.facebook.com/tools/debug

Anyone can help resolving this issue?

Thanks in advance...

[Zekule]

I found the solution and I will asap create a plugin for Virtuemart 2.0.X & OpenGraph.

[Zekule]

<?php

$og_type = 'article';
$og_url = $this->product->product_url;
$og_image =  JRoute::_('http://www.yoursite.com/'.$this->product->images[0]->file_url);
$og_desc = $this->product->product_s_desc;
$og_title = $this->product->product_name;


$doc = JFactory::getDocument();
$doc->setMetaData( 'og:type', $og_type );
$doc->setMetaData( 'og:url', $og_url );
$doc->setMetaData( 'og:image', $og_image );
$doc->setMetaData( 'og:description', $og_desc );
$doc->setMetaData( 'og:title', $og_title );

?>

Insert this code in the product details page template in the beggining to have a nice open graph tags for Facebook.

[Georgios Kolomvos]

Great job Zekule, thank you very much.
This is a great way to add Open Graph meta tags to the flypage of Virtuemart, to specify the image used by Facebook like, share, send, etc buttons
I have made some little improvements to your code though, so that it will not be necessary to hard code the domain name of your site and also i added the og::site_name meta tag.
Also I wanted the generated html code to be valid (http://validator.w3.org/) so i had to use addCustomTag() instead of setMetaData() to generate "meta property" instead of "meta name" .

Code Select Expand


$og_type = 'article';
$og_url = JURI::current();
$og_image =  JRoute::_(JURI::base().$this->product->images[0]->file_url);
$og_desc = $this->product->product_s_desc;
$og_title = $this->product->product_name;

$app =& JFactory::getApplication();
$og_sitename = $app->getCfg('sitename');

$doc = JFactory::getDocument();
$doc->addCustomTag('<meta property="og:type" content="article"/>');
$doc->addCustomTag('<meta property="og:url" content="'.$og_url.'"/>');
$doc->addCustomTag('<meta property="og:site_name" content="'.$og_sitename.'"/>');
$doc->addCustomTag('<meta property="og:image" content="'.$og_image.'"/>');
$doc->addCustomTag('<meta property="og:description" content="'.$og_desc.'"/>');
$doc->addCustomTag('<meta property="og:title" content="'.$og_title.'"/>');

This piece of code has to be inserted at the first lines of file "components/com_virtuemart/views/productdetails/tmpl/default.php" just after the line:

Code Select Expand


defined('_JEXEC') or die('Restricted access');

It would be even better if you copy this file at your template directory (folder: templates/my_Joomla_template/html/com_virtuemart/productdetails/) so that it will not be modified by any Virtuemart upgrades.

[rupesh]

Great job Zekule, thank you very much.
This is a great way to add Open Graph meta tags to the flypage of Virtuemart, to specify the image used by Facebook like, share, send, etc buttons
I have made some little improvements to your code though, so that it will not be necessary to hard code the domain name of your site and also i added the og::site_name meta tag.
Also I wanted the generated html code to be valid (http://validator.w3.org/) so i had to use addCustomTag() instead of setMetaData() to generate "meta property" instead of "meta name" .

Code Select Expand


$og_type = 'article';
$og_url = JURI::current();
$og_image =  JRoute::_(JURI::base().$this->product->images[0]->file_url);
$og_desc = $this->product->product_s_desc;
$og_title = $this->product->product_name;

$app =& JFactory::getApplication();
$og_sitename = $app->getCfg('sitename');

$doc = JFactory::getDocument();
$doc->addCustomTag('<meta property="og:type" content="article"/>');
$doc->addCustomTag('<meta property="og:url" content="'.$og_url.'"/>');
$doc->addCustomTag('<meta property="og:site_name" content="'.$og_sitename.'"/>');
$doc->addCustomTag('<meta property="og:image" content="'.$og_image.'"/>');
$doc->addCustomTag('<meta property="og:description" content="'.$og_desc.'"/>');
$doc->addCustomTag('<meta property="og:title" content="'.$og_title.'"/>');

This piece of code has to be inserted at the first lines of file "components/com_virtuemart/views/productdetails/tmpl/default.php" just after the line:

Code Select Expand


defined('_JEXEC') or die('Restricted access');

It would be even better if you copy this file at your template directory (folder: templates/my_Joomla_template/html/com_virtuemart/productdetails/) so that it will not be modified by any Virtuemart upgrades.

I have inserted your code in my productdetail default.php   but it doesnt show any facebook like or google or twitter on my product page

can you help me?

Thanks for consideration
rupesh

[Georgios Kolomvos]

I have inserted your code in my productdetail default.php   but it doesnt show any facebook like or google or twitter on my product page
can you help me?

This code is not meant to add any facebook buttons to your product details page.
It is only to insert the open graph meta tags, so that facebook will know what image, description, etc, to use if someone "likes" it.

If you want to have social buttons in your pages you have to use Joomla extensions like:
http://extensions.joomla.org/extensions/social-web/social-share/social-multi-share/7998
http://extensions.joomla.org/extensions/social-web/social-share/social-multi-share/8117
etc

[rupesh]

I have inserted your code in my productdetail default.php   but it doesnt show any facebook like or google or twitter on my product page
can you help me?

This code is not meant to add any facebook buttons to your product details page.
It is only to insert the open graph meta tags, so that facebook will know what image, description, etc, to use if someone "likes" it.

If you want to have social buttons in your pages you have to use Joomla extensions like:
http://extensions.joomla.org/extensions/social-web/social-share/social-multi-share/7998
http://extensions.joomla.org/extensions/social-web/social-share/social-multi-share/8117
etc

i have seen them but can you tell me how to integrate it on product detail page so that if we like particular product then that product with image is displayed to user profile?

[Maxim Pishnyak]

Why image calls is not the same from our community coders?

...
$og_image =  JRoute::_('http://www.yoursite.com/'.$this->product->images[0]->file_url);
...
$doc->setMetaData( 'og:image', $og_image );
...
?>

Thanks for help.

This is the code which give you URL of product thumb:
<?php echo $this->product->images[0]->file_url_thumb; ?>

What the difference between url_thumb and just url?

[x0pa]

Hey guys,

So i want to populate OG meta tags on the product page, i found some code and im trying to get it to work but cant any help would be much appreciated

btw im adding this code after

Code Select Expand

// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');



in view.html.php

Code Select Expand


$og_title = $this->product->product_name;
$og_price_amount = $product_price;
$og_url = JURI::current();
$og_desc = $this->product->product_s_desc;
$og_image =  JRoute::_(JURI::base().$this->product->images[0]->file_url);

$app =& JFactory::getApplication();

$doc = JFactory::getDocument();
$doc->addCustomTag('<meta property="og:type" content="product"/>');
$doc->addCustomTag('<meta property="og:title" content="'.$og_title.'"/>');
$doc->addCustomTag('<meta property="og:price:amount" content="'.$og_price_amount.'"/>');
$doc->addCustomTag('<meta property="og:price:currency" content="'CDN'"/>');
$doc->addCustomTag('<meta property="og:site_name" content="'SITENAME'"/>');
$doc->addCustomTag('<meta property="og:url" content="'.$og_url.'"/>');
$doc->addCustomTag('<meta property="og:description" content="'.$og_desc.'"/>');
$doc->addCustomTag('<meta property="og:image" content="'.$og_image.'"/>');

[Maxim Pishnyak]

Check FAQs in this forum section.

[x0pa]

the forum looks locked so i cant ask any questions?

im trying to get the price to show up in the meta tag but when i try things like $og_price_amount = $this->product->prices['costPrice'];
it does not output the price

[x0pa]

got it!

$og_price_amount = $this->product->prices['salesPrice'];
$document->addCustomTag('<meta property="og:price:amount" content="'.$og_price_amount.'"/>');