Author Topic: Virtuemart 2 & Open Graph - Facebook share  (Read 16897 times)

Zekule

  • Beginner
  • *
  • Posts: 16
Virtuemart 2 & Open Graph - Facebook share
« 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...

Zekule

  • Beginner
  • *
  • Posts: 16
Re: Virtuemart 2 & Open Graph - Facebook share
« Reply #1 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.

Zekule

  • Beginner
  • *
  • Posts: 16
Re: Virtuemart 2 & Open Graph - Facebook share
« Reply #2 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.

gkolomvos

  • Beginner
  • *
  • Posts: 45
Re: Virtuemart 2 & Open Graph - Facebook share
« Reply #3 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" .
Code: [Select]
$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]
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.
Georgios Kolomvos
Patras, Greece

rupesh

  • Jr. Member
  • **
  • Posts: 113
Re: Virtuemart 2 & Open Graph - Facebook share
« Reply #4 on: May 21, 2012, 17:58:56 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" .
Code: [Select]
$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]
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

gkolomvos

  • Beginner
  • *
  • Posts: 45
Re: Virtuemart 2 & Open Graph - Facebook share
« Reply #5 on: May 21, 2012, 18:05:55 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
Georgios Kolomvos
Patras, Greece

rupesh

  • Jr. Member
  • **
  • Posts: 113
Re: Virtuemart 2 & Open Graph - Facebook share
« Reply #6 on: May 24, 2012, 11:55:06 am »
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

  • Virtuemart 2 is quite bugfree now
  • Global Moderator
  • Sr. Member
  • *
  • Posts: 2657
  • Virtuemart 2 is quite bugfree now
    • Virtuemart Ukraine division
Re: Virtuemart 2 & Open Graph - Facebook share
« Reply #7 on: May 29, 2012, 11:11:31 am »
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?
Virtuemart 2 is quite bugfree now. You can support Community by voting for Project on the JED
http://extensions.joomla.org/extensions/e-commerce/shopping-cart/129/review
Join us in
https://www.facebook.com/virtuemart
https://twitter.com/virtuemart

x0pa

  • Beginner
  • *
  • Posts: 3
populating open graph meta tags
« Reply #8 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
Code: [Select]
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');


in view.html.php

Code: [Select]
$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

  • Virtuemart 2 is quite bugfree now
  • Global Moderator
  • Sr. Member
  • *
  • Posts: 2657
  • Virtuemart 2 is quite bugfree now
    • Virtuemart Ukraine division
Re: populating open graph meta tags
« Reply #9 on: August 02, 2013, 23:42:30 pm »
Check FAQs in this forum section.
Virtuemart 2 is quite bugfree now. You can support Community by voting for Project on the JED
http://extensions.joomla.org/extensions/e-commerce/shopping-cart/129/review
Join us in
https://www.facebook.com/virtuemart
https://twitter.com/virtuemart

x0pa

  • Beginner
  • *
  • Posts: 3
Re: populating open graph meta tags
« Reply #10 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

x0pa

  • Beginner
  • *
  • Posts: 3
Re: populating open graph meta tags
« Reply #11 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.'"/>');