VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Templating FAQs => Topic started by: Zekule on April 30, 2012, 14:29:52 PM

Title: Virtuemart 2 & Open Graph - Facebook share
Post by: Zekule on April 30, 2012, 14:29:52 PM
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...
Title: Re: Virtuemart 2 & Open Graph - Facebook share
Post by: Zekule on April 30, 2012, 14:47:56 PM
I found the solution and I will asap create a plugin for Virtuemart 2.0.X & OpenGraph.
Title: Re: Virtuemart 2 & Open Graph - Facebook share
Post by: Zekule on May 03, 2012, 08:28:56 AM
<?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.
Title: Re: Virtuemart 2 & Open Graph - Facebook share
Post by: Georgios Kolomvos on May 14, 2012, 19:25:09 PM
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" .

$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:

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.
Title: Re: Virtuemart 2 & Open Graph - Facebook share
Post by: rupesh on May 21, 2012, 17:58:56 PM
Quote from: gkolomvos on May 14, 2012, 19:25:09 PM
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" .

$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:

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
Title: Re: Virtuemart 2 & Open Graph - Facebook share
Post by: Georgios Kolomvos on May 21, 2012, 18:05:55 PM
Quote from: rupesh on May 21, 2012, 17:58:56 PM
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
Title: Re: Virtuemart 2 & Open Graph - Facebook share
Post by: rupesh on May 24, 2012, 11:55:06 AM
Quote from: gkolomvos on May 21, 2012, 18:05:55 PM
Quote from: rupesh on May 21, 2012, 17:58:56 PM
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?
Title: Re: Virtuemart 2 & Open Graph - Facebook share
Post by: Maxim Pishnyak on May 29, 2012, 11:11:31 AM
Why image calls is not the same from our community coders?
Quote from: Zekule on May 03, 2012, 08:28:56 AM
...
$og_image =  JRoute::_('http://www.yoursite.com/'.$this->product->images[0]->file_url);
...
$doc->setMetaData( 'og:image', $og_image );
...
?>
Quote from: legal on October 11, 2011, 21:17:35 PM
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?
Title: populating open graph meta tags
Post by: x0pa on August 02, 2013, 22:56:12 PM
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
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');



in view.html.php


$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.'"/>');
Title: Re: populating open graph meta tags
Post by: Maxim Pishnyak on August 02, 2013, 23:42:30 PM
Check FAQs in this forum section.
Title: Re: populating open graph meta tags
Post by: x0pa on August 06, 2013, 21:22:59 PM
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
Title: Re: populating open graph meta tags
Post by: x0pa on August 06, 2013, 22:02:01 PM
got it!

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