Facebook Product Image

[piperman 0]

Hi to All,

I've search but cannot find a solution, so any help would be great.

 

I have added a Facebook share button into the middle of my product_info.php page

and it sits nicely where is is.

The issue is when facebook takes in the link, it does not display the product image, but takes thumbs from the footer and columns left and right.

I cannot get it to show the image of the actual product I'm trying to share......

 

there is a meta tag that facebook suggest i include but i cant get it to work....

 

<meta property="og:image" content="thumbnail_image" />

 

I'd guess that

 

<?php echo tep_href_link(DIR_WS_IMAGES . $product_info['products_image'])

 

needs to be included here somehow, but i just don't have the know-how....

Anyone got any suggestions?

Ta.

Piperman

[npn2531 37]

Post the code you are using to display the FB button with a couple (just a couple) of lines from product_info.php above and below where you are placing that code. Also post the link from FB where you got the metatag.

[piperman 0]

Ok Thanks in adnce for any help or suggestions

 

here is the product_info.php facebook code (bold is what i got from facebook)

 

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

</noscript>

</td>

</tr>

<a name="fb_share"></a>

<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"

type="text/javascript">

</script>

</table>

<?php

}

?>

<?php

$products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");

$products_attributes = tep_db_fetch_array($products_attributes_query);

if ($products_attributes['total'] > 0)

 

 

this adds a nice facebook share button , but only shows the thumbs from the footer and columns left and right...

 

Here is the facebook like to where i got it from

http://developers.facebook.com/docs/share

 

Thanks guys....

[npn2531 37]

It is not picking up the product image because there is no code in the facebook snippet to pick it up. FB is simply picking up images like it would pick up images off any website.

For example this code will post carry over your link and a title or some text to that FB share page with a share button, but I don't know how you would do the images. I would imagine there is a way.

<a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.mywebsite.com%2F&t=My%20Website"><img src="http://www.mywebsite.com/images/share_button.png" border="0" hspace="0" vspace="0" width="64" height="24" ></a>

[Xpajun 119]

I take it you are using osC 2.2 as 2.3 has both "FB share" and "FB like" built in and the share, I know, picks up the image as well as description

[npn2531 37]

If you are using 2.2 use this contribution, it works quite well and will carry over the image:

http://addons.oscommerce.com/info/5261

[piperman 0]

Thanks for all the help.

Yes i an using 2.2 and I also would imagine there is a way.

Facebook picks up the Product name and the Website name from the title meta tags in the header,

but not the product image. Tried the social bookmarks contribution as you suggested but it didnt pick up the images either...

 

Surely there is something like

 

<meta property="og:image" content="<?php echo tep_href_link(DIR_WS_IMAGES . $product_info['products_image'])" />

 

that we can make work??

Regards guys and Thanks again.

[npn2531 37]

I have just installed and checked that contribution, and it the share button will pick up that image, but not exactly. go to www dot niora dot com find a product and click the FB button.

 

Actually what it is doing is like you say picking up the title and metadescription, but also 4 thumbnails, the first one of which is the correct image. However, the other three images are from the 'also purchased' module at the bottom of the page and are not related to the text. So I suspect it is picking up all the images on the page and in my fortunate case the correct image is the first one FB runs across.

 

FB is kinda of incredible. I posted a link on my FB page to a website, a blog, I have no connection to, where some folks were commenting on a product I sell. And viola, on my 'like' box on my oscommmerce website, one of those comments shows up perfectly formatted. Maybe the way to fix your issue is to play with the html on product_info.php until the product image is the first one picked up.

[piperman 0]

Hired a freelancer who got this working for me.

 

<meta property="og:title" content="<?php echo $product_name['products_name']; ?>" />

<meta property="og:description" content="YOUR_MESSAGE_HERE" />

<meta property="og:image" content="<?php print $domain .'/'. DIR_WS_HTTP_CATALOG . DIR_WS_IMAGES . $_img ?>" />

 

 

This goes in just after the <title> tag, which is within the <head>

 

Running 2.2a and with magiczoom installed for my images.

 

This is what worked for me,

Backup as it caused a few small issues initially.....

 

Thanks for all the advice and help as always....

Piperman.

[npn2531 37]

Thanks! I will try this.

[Jumpfree 0]

Thanks Piperman...

 

doesn't work for me...

 

I've lightbox for images and nothing to do...

 

Myabe I can hire yoy freelance guy...

 

Anyway thanks again

[Guest]

Any idea how to do it for 2.3.1?

 

Cheers

[derben 0]

Any idea how to do it for 2.3.1?

 

Cheers

 

This is what I use.. seems to work most of the time.

 

template_top.php

line 25 - below <head>

 

<?php
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'"); 
$product_info = tep_db_fetch_array($product_info_query);
?>
<meta property="og:image" content="<?php print 'http://' . $_SERVER['SERVER_NAME'] . DIR_WS_HTTP_CATALOG . DIR_WS_IMAGES . $product_info['products_image']; ?>" />
<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:description" content="<?php echo preg_replace('/[^a-zA-Z0-9\s]/','',preg_replace('/\s+/',' ',preg_replace("/<br>/", "",$product_info['products_description']))); ?>" />

[Guest]

This is what I use.. seems to work most of the time.

 

template_top.php

line 25 - below <head>

 

<?php
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'"); 
$product_info = tep_db_fetch_array($product_info_query);
?>
<meta property="og:image" content="<?php print 'http://' . $_SERVER['SERVER_NAME'] . DIR_WS_HTTP_CATALOG . DIR_WS_IMAGES . $product_info['products_image']; ?>" />
<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:description" content="<?php echo preg_replace('/[^a-zA-Z0-9\s]/','',preg_replace('/\s+/',' ',preg_replace("/<br>/", "",$product_info['products_description']))); ?>" />

Working, very cool

 

Thxs

[Guest]

On some products I get following?

 

 

(No Title)
http://http%3A%2F%2Fwww.koolkatjazz.com%...

 

And of course no image

[JoePyler 0]

Because I'm using a little bit lay-outing with html code in the products description I had to change a little in this code. I needed to strip those html tags:

<meta property="og:image" content="<?php print 'http://' . $_SERVER['SERVER_NAME'] . DIR_WS_HTTP_CATALOG . DIR_WS_IMAGES . $product_info['products_image']; ?>" />
<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:description" content="<?php echo preg_replace('/[^a-zA-Z0-9\s]/','',preg_replace('/\s+/',' ',preg_replace("/<br>/", "",strip_tags($product_info['products_description'])))); ?>" />

I placed the code in the head section of the product_info page and of course the following code on the place where I liked to see the Like button.

<script src="http://connect.facebook.net/nl_BE/all.js#xfbml=1"></script><fb:like href="<?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?>" show_faces="false" align="right" width="350"></fb:like>

 

And all this works in the RC2.2rc2a version :rolleyes:

[ThereseEngström 0]

Hi!

 

I wonder if someone have a solution on this problem? I run an Oscommerce 2.3.1 and have install the social bookmarks module which is include in this version. But when I share my product on Facebook I see that FB are looking for the product image but can´t find it... I have tried different solution but it doesn´t work. Would be pleased if someone could help me with this.

 

Sorry for my bad english ;-)

 

Therese

[JoePyler 0]

I enterd this code in the head section:

<meta property="og:image" content="<?php print 'http://' . $_SERVER['SERVER_NAME'] . DIR_WS_HTTP_CATALOG . DIR_WS_IMAGES . $product_info['products_image']; ?>" />
<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:description" content="<?php echo preg_replace('/[^a-zA-Z0-9\s]/','',preg_replace('/\s+/',' ',preg_replace("/<br>/", "",strip_tags($product_info['products_description'])))); ?>" />

 

And this on the spot were I wished to see the button.

<script src="http://connect.facebook.net/nl_BE/all.js#xfbml=1"></script><fb:like href="<?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?>" show_faces="false" align="right" width="350"></fb:like>

[sonictrip.net 1]

The code that Derben had above is working for me on MS2.2 Linux servers. Put the following in product_info.php, don't forget the SQL query at the top so that $product_info works properly in the metatags:

 

<?php
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'"); 
$product_info = tep_db_fetch_array($product_info_query);
?>
<meta property="fb:app_id" content="app_id_here" />
<meta property="og:site_name" content="<?php echo STORE_NAME;?>" />
<meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;?>" >
<meta property="og:image" content="<?php print 'http://' . $_SERVER['SERVER_NAME'] . DIR_WS_HTTP_CATALOG . DIR_WS_IMAGES . $product_info['products_image']; ?>" />
<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:description" content="<?php echo preg_replace('/[^a-zA-Z0-9\s]/','',preg_replace('/\s+/',' ',preg_replace("/<br>/", "",strip_tags($product_info['products_description'])))); ?>" />
<meta property="og:type" content="product" />

 

Then wherever you want the Like button to appear, put this code:

 

		  <fb:like
     href="<?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?>"
     layout="standard"
     show_faces="false"
     width="300"
     action="like"
     font="trebuchet ms"
     colorscheme="light"></fb:like> 
  <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
 FB.init({appId: 'app_id_here', status: true, cookie: true, xfbml: true});
 FB.Event.subscribe('auth.sessionchange', function(response) {
   if (response.session) {
     // A user has logged in, and a new cookie has been saved
   } else {
     // The user has logged out, and the cookie has been cleared
   }
 });
</script>

 

The above code works for MS2.2 on Linux servers and some Windows servers, im having a problem with one Windows server though, and it's to do with this line not retrieving the correct URL from a Windows server:

 

<meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;?>" >

 

Any idea how to rewrite this to work on a Windows server?

[Teun van Wely 0]

The code that Derben had above is working for me on MS2.2 Linux servers. Put the following in product_info.php, don't forget the SQL query at the top so that $product_info works properly in the metatags:

 

<?php
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'"); 
$product_info = tep_db_fetch_array($product_info_query);
?>
<meta property="fb:app_id" content="app_id_here" />
<meta property="og:site_name" content="<?php echo STORE_NAME;?>" />
<meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;?>" >
<meta property="og:image" content="<?php print 'http://' . $_SERVER['SERVER_NAME'] . DIR_WS_HTTP_CATALOG . DIR_WS_IMAGES . $product_info['products_image']; ?>" />
<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:description" content="<?php echo preg_replace('/[^a-zA-Z0-9\s]/','',preg_replace('/\s+/',' ',preg_replace("/<br>/", "",strip_tags($product_info['products_description'])))); ?>" />
<meta property="og:type" content="product" />

 

Then wherever you want the Like button to appear, put this code:

 

		  <fb:like
     href="<?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?>"
     layout="standard"
     show_faces="false"
     width="300"
     action="like"
     font="trebuchet ms"
     colorscheme="light"></fb:like> 
  <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
 FB.init({appId: 'app_id_here', status: true, cookie: true, xfbml: true});
 FB.Event.subscribe('auth.sessionchange', function(response) {
   if (response.session) {
     // A user has logged in, and a new cookie has been saved
   } else {
     // The user has logged out, and the cookie has been cleared
   }
 });
</script>

 

The above code works for MS2.2 on Linux servers and some Windows servers, im having a problem with one Windows server though, and it's to do with this line not retrieving the correct URL from a Windows server:

 

<meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;?>" >

 

Any idea how to rewrite this to work on a Windows server?

 

 

This last fix worked fine for my Oscommerce 2.3.1 installed in the root but it didn't show the pic when it was installed in a folder. So I changed the code a bit. For version 2.3.1 put this code in the head and the facebook link will work properly with product name, description and 1 thumbnail regardless of where you installed the catalog:

 

<?php
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'"); 
$product_info = tep_db_fetch_array($product_info_query);
?>
<meta property="fb:app_id" content="app_id_here" />
<meta property="og:site_name" content="<?php echo STORE_NAME;?>" />
<meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;?>" >
<meta property="og:image" content="<?php print HTTP_SERVER . DIR_WS_HTTP_CATALOG . DIR_WS_IMAGES . $product_info['products_image']; ?>" />
<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:description" content="<?php echo preg_replace('/[^a-zA-Z0-9\s]/','',preg_replace('/\s+/',' ',preg_replace("/<br>/", "",strip_tags($product_info['products_description'])))); ?>" />
<meta property="og:type" content="product" />

[jhaustein 0]

hi

 

i put the code but prob is that in fb is the wrong picture

 

how can i fix it

[eprom 0]

Because I'm using a little bit lay-outing with html code in the products description I had to change a little in this code. I needed to strip those html tags:

<meta property="og:image" content="<?php print 'http://' . $_SERVER['SERVER_NAME'] . DIR_WS_HTTP_CATALOG . DIR_WS_IMAGES . $product_info['products_image']; ?>" />
<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:description" content="<?php echo preg_replace('/[^a-zA-Z0-9\s]/','',preg_replace('/\s+/',' ',preg_replace("/<br>/", "",strip_tags($product_info['products_description'])))); ?>" />

I placed the code in the head section of the product_info page and of course the following code on the place where I liked to see the Like button.

<script src="http://connect.facebook.net/nl_BE/all.js#xfbml=1"></script><fb:like href="<?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?>" show_faces="false" align="right" width="350"></fb:like>

 

And all this works in the RC2.2rc2a version :rolleyes:

This works, but I keep getting an fb: app_id error?

How can I fix that?