Jump to content

Archived

This topic is now archived and is closed to further replies.

piperman

Facebook Product Image

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

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....

Share this post


Link to post
Share on other sites

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>


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

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


My store is currently running Phoenix 1.0.3.0

I'm currently working on 1.0.7.2 and hope to get it live before 1.0.8.0 arrives (maybe 🙄 )

I used to have a list of add-ons here but I've found that with the ones that supporters of Phoenix get any other add-ons are not really neccessary

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.


Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Any idea how to do it for 2.3.1?

 

Cheers


-Peder Beckman-

Kool Kat Jazz Records

Share this post


Link to post
Share on other sites

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']))); ?>" />


-Colin

www.ColinGlover.com

Share this post


Link to post
Share on other sites

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


-Peder Beckman-

Kool Kat Jazz Records

Share this post


Link to post
Share on other sites

On some products I get following?

 

 

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

 

And of course no image


-Peder Beckman-

Kool Kat Jazz Records

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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" />

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

×