Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
SOLVED - How to dynamically get product image URL and page title outside of main page content? 
 
Brig01
Jr. Member
 
Total Posts:  12
Joined:  2010-02-23
 

Hello

I’m working on integrating the new Facebook like button into my product pages. The actual button is no problem integrating but I want to add my product image to the button functionality.

To include an image and title you need to create a meta tag on the page with the URL to the image like this:

<meta property="og:image" content="url-to-image" />
<
meta property="og:title" content="title-of-page" />

I’ve tried to add the the following in the head area of my 2columns-right.phtml file:

<meta property="og:image" content="<?php echo $_product->getSmallImagelink(); ?>" />

Also tried:

<?php echo $this->helper('catalog/image')->init($_product'small_image')->resize(100100); ?>

But this prevents the page from loading past this line. I’m assuming that it doesn’t know what $_product is before further down on the page.

Could anyone help me with how to get magento variables like the product image and page title outside of the main page content?

 
Magento Community Magento Community
Magento Community
Magento Community
 
tzyganu
Mentor
 
Avatar
Total Posts:  2205
Joined:  2009-11-18
Bucharest, Romania
 

This should work if you modify t a little

<?php echo $this->helper('catalog/image')->init($_product'small_image')->resize(100100); ?>
Instead of $this->helper() use Mage::helper()
and instead of $_product use Mage::registry(’current_product’).
The variable $_product is not visible outside the block you got this code from
you can do something like this:
<?php if (Mage::registry('current_product')) : ?>
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(100,100);?>" />
<
meta property="og:title" content="<?php echo Mage::registry('current_product')->getMetaTitle()?>" /> 
<?php endif;?>

Good luck,
Marius.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brig01
Jr. Member
 
Total Posts:  12
Joined:  2010-02-23
 

Thank you so much! That works perfectly!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brig01
Jr. Member
 
Total Posts:  12
Joined:  2010-02-23
 

This is the result on my test shop. Working really well. Just need to style up the button text.

See attached images.
magento.jpg shows the button on the site.

fb.jpg shows the resulting post on facebook after clicking the button.

Thanks again tzyganu!

Image Attachments
fb.jpgmagento.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
seanstewart
Jr. Member
 
Avatar
Total Posts:  11
Joined:  2009-10-23
 

I got the image to work using tzyganu’s code but not the title. Any idea how to get the product name?

 
Magento Community Magento Community
Magento Community
Magento Community
 
tzyganu
Mentor
 
Avatar
Total Posts:  2205
Joined:  2009-11-18
Bucharest, Romania
 

Instead getMetaTitle()use getName()

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brig01
Jr. Member
 
Total Posts:  12
Joined:  2010-02-23
 

I found that you don’t actually need to use the title. Facebook will pick up the title automatically anyway.

Here’s my code if it’s any help Sean.

I’ve put this in view.phtml where you want the button to show up:

<div class="fblike-product">
    <
fb:like href="<?php echo Mage::helper('core/url')->getCurrentUrl();?>" layout="standard" show_faces="false" width="330" action="like" font="trebuchet ms" colorscheme="dark"></fb:like>
</
div> <!-- end .fblike-product -->

The following calls the Facebook Javascript SDK. Put this just before the closing body tag:

<!-- FACEBOOK JS SDK -->
<
div id="fb-root"></div>
<
script>
  
window.fbAsyncInit = function() {
    FB
.init({appId'your-app-id'statustruecookietruexfbmltrue});
  
};
  (function() 
{
    
var document.createElement('script'); e.async true;
    
e.src document.location.protocol +
      
'//connect.facebook.net/en_US/all.js';
    
document.getElementById('fb-root').appendChild(e);
  
}());
</script>
<!-- END FACEBOOK JS SDK -->

In head.phtml put this between the head tags:

<meta property="og:site_name" content="Johannes Engstrom Photography"/>
<
meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(100,100);?>"/>

I hard coded the site name as I wanted the same on all pages.

Hope this might help someone!

 
Magento Community Magento Community
Magento Community
Magento Community
 
edz8386
Jr. Member
 
Total Posts:  1
Joined:  2010-05-03
 

Thank you tzyganu!!! Your method worked great on my site!

 
Magento Community Magento Community
Magento Community
Magento Community
 
diazwatson
Member
 
Avatar
Total Posts:  35
Joined:  2010-04-23
Spain
 

Hi Guys

I am using similar method to set a like button to my products and most of it work fine but I cannot get the images to show on Facebook
Actually using the Facobook url linter I get grey images.

Any Idea

Thanks in advanced

Image Attachments
facebook-like.jpgfacebook-like2.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Leo27
Sr. Member
 
Total Posts:  127
Joined:  2008-10-08
 

Hello,
thanks for the code tzyganu, works perfetly, althow I’m not getting any images.

Any idea what is the problem?

 
Magento Community Magento Community
Magento Community
Magento Community
 
diazwatson
Member
 
Avatar
Total Posts:  35
Joined:  2010-04-23
Spain
 

At the end I resolved by following the steps in this post.

http://goo.gl/b3s2X

Hope it helpes.

 
Magento Community Magento Community
Magento Community
Magento Community
 
graphic_dev
Member
 
Total Posts:  52
Joined:  2010-08-29
 

This works great!

TIP:Resize the image to a size that has been used before. I resize to 213x213 px since that is the size of the image that I use in grid view. I checked and it does in fact use the same cached image.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sammynewton
Jr. Member
 
Total Posts:  1
Joined:  2008-12-04
 

Works like a charm!

Thank you tzyganu. You just saved me a lot o work.

 
Magento Community Magento Community
Magento Community
Magento Community
 
ScottG
Member
 
Total Posts:  45
Joined:  2011-07-13
 

Thanks for these posts, it was exactly what I was looking for:

To sum up:

This works perfectly for me and will ensure facebook grabs the right image and title for the product.
It goes in /template/page/2columns-left.phtml or whichever you are using: just before the </head> tag.

<?php if (Mage::registry('current_product')) : ?>
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(100,100);?>" />
<
meta property="og:title" content="<?php echo Mage::registry('current_product')->getName();?>" /> 
<?php endif;?>

I’m not sure if it’s because this thread is outdated but the code for facebook is different and this code works well:
This will pop up the box to allow the customer to enter their own comment before posting,
This is for your template/catalog/product/view.phtml :

<div class="fb-like" data-href="<?php echo Mage::helper('core/url')->getCurrentUrl();?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="segoe ui" ></div>

I have put this at the bottom of the view.phtml , maybe not the best place but it works :

<script type="text/javascript">
//<![CDATA[
(function(dsid{
  
var jsfjs d.getElementsByTagName(s)[0];
  if (
d.getElementById(id)) {return;}
  js 
d.createElement(s); js.id id;
  
js.src "//connect.facebook.net/en_GB/all.js#xfbml=1";
  
fjs.parentNode.insertBefore(jsfjs);
}(document'script''facebook-jssdk'));
//]]>
</script>

And I added this to the style.css because I wanted to display only the ‘like’ button without the counter next to it:

.fb_edge_widget_with_comment iframe { width:47px !important}
span
.fb_edge_comment_widget.fb_iframe_widget iframe { width:401px !important}

After trying 3 different plugins from the connect store, none of which worked correctly, I found this thread and it saved me, thanks to all the above posters helping me fix this.

 
Magento Community Magento Community
Magento Community
Magento Community
 
squizeers
Member
 
Total Posts:  38
Joined:  2010-06-27
 

I am using magento 1.5 and I tried to use all the above options to have facebook like button but none of them showed up in the site. It shows only when I use the iframe version. Anyone knows why is that?

 
Magento Community Magento Community
Magento Community
Magento Community
 
ArisDario
Jr. Member
 
Avatar
Total Posts:  19
Joined:  2011-12-02
 

Hi, this solved for me, i have 1.5 version.
But, please tell me, Why facebook button load very slow?

ScottG - 20 October 2011 01:58 PM

Thanks for these posts, it was exactly what I was looking for:

To sum up:

This works perfectly for me and will ensure facebook grabs the right image and title for the product.
It goes in /template/page/2columns-left.phtml or whichever you are using: just before the </head> tag.

<?php if (Mage::registry('current_product')) : ?>
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(100,100);?>" />
<
meta property="og:title" content="<?php echo Mage::registry('current_product')->getName();?>" /> 
<?php endif;?>


I’m not sure if it’s because this thread is outdated but the code for facebook is different and this code works well:
This will pop up the box to allow the customer to enter their own comment before posting,
This is for your template/catalog/product/view.phtml :

<div class="fb-like" data-href="<?php echo Mage::helper('core/url')->getCurrentUrl();?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="segoe ui" ></div>

I have put this at the bottom of the view.phtml , maybe not the best place but it works :
<script type="text/javascript">
//<![CDATA[
(function(dsid{
  
var jsfjs d.getElementsByTagName(s)[0];
  if (
d.getElementById(id)) {return;}
  js 
d.createElement(s); js.id id;
  
js.src "//connect.facebook.net/en_GB/all.js#xfbml=1";
  
fjs.parentNode.insertBefore(jsfjs);
}(document'script''facebook-jssdk'));
//]]>
</script>

And I added this to the style.css because I wanted to display only the ‘like’ button without the counter next to it:
.fb_edge_widget_with_comment iframe { width:47px !important}
span
.fb_edge_comment_widget.fb_iframe_widget iframe { width:401px !important}

After trying 3 different plugins from the connect store, none of which worked correctly, I found this thread and it saved me, thanks to all the above posters helping me fix this.
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2