VirtueMart 2 > Templating FAQs

Virtuemart 2 & Open Graph - Facebook share

(1/2) > >>

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.

gkolomvos:
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: ---$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.'"/>');

--- End code ---
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: ---defined('_JEXEC') or die('Restricted access');

--- End code ---

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:

--- Quote from: gkolomvos on May 14, 2012, 11:25:09 AM ---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: ---$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.'"/>');

--- End code ---
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: ---defined('_JEXEC') or die('Restricted access');

--- End code ---

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.

--- End quote ---

 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

Navigation

[0] Message Index

[#] Next page