Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Problem with Facebook like button


Mort-lemur

Recommended Posts

Hi,

 

Im trying to get into the facebook way of promoting products, but I am having a couple of problems with the scripts as follows:

 

1....When I "Like" a product, it is posted to facebook, but without an image

 

2....When I go to facebook and click on the link, I get taken to the IP trap Banned page of my site

 

The scripts Im using in product_info.php are as follows:

 

<?//facebook like button?>
<div class="fb-like" data-href="http://www.mysite.co.uk<? echo $_SERVER['PHP_SELF']."?products_id=".$product_info['products_id']    ; ?>" data-send="true" data-width="450" data-show-faces="false"></div>

 

with the following in my index.php :

 

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

Any help greatfully appreciated

 

Many Thanks

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Link to comment
Share on other sites

Ok Ive been chsnging the code as per the Facebook developer instructions - but no change, posts to facebook, without a picture and when the facebook link is clicked it takes you to my "Banned" page.

 

If anyone would like to see what I mean, drop me a pm and I will give you the URL, then just try to "Like" any of the products.

 

Thanks

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Link to comment
Share on other sites

Mort - here is what I did recently and its working for me... in product_info.php:

 

put this code at the top of the file, right below the product check query

 

// BOF FB buttons
 $product_image_query = tep_db_query("select products_image from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$_GET['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
 $product_images = tep_db_fetch_array($product_image_query);
// EOF FB Buttons 

 

then change your <html > line so it reads like:

 

<html <?php echo HTML_PARAMS; ?> xmlns:fb="http://ogp.me/ns/fb#">

 

 

then place this code into the <head>, above <base href=>

 

<?php /* BOF FB Buttons */ ?>
<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:type" content="product" />
<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_images['products_image']; ?>" />
<meta property="og:site_name" content="<?php echo STORE_NAME;?>" />
<meta property="fb:admins" content="xxxxxxxxxxxxxxx" />
<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'])))); ?>" />
<?php /* EOF FB Buttons */ ?>

 

Be sure to place your FB/Admin ID where the xxxxxxxxxxxxxx is.

 

Put your button code where you want it: Add your domain...change any true/falses that you want.

 

<div><fb:like href="http://www.YOURDOMAIN.com<?php echo $_SERVER['PHP_SELF']."?products_id=".$product_info['products_id']; ?>" send="true" width="285" show-faces="false"></fb:like></div>

 

The FB code generator is here

 

Then at the bottom of the file, below <!-- body_eof //-->, place:

 

<!--BOF FB buttons -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--EOF FB buttons -->

 

That shoudl do it. Other that a bit of a javascript overlay glitch with IE, its working great. Let me know if that helps.

-Dave

Link to comment
Share on other sites

  • 2 months later...

Thanks Roaddoctor, this is the best way to implement the like button for every product.

 

However, something else has risen. I don't know if anyone's noticed but when someone clicks for the first time the "like" button on a product page, the pop-up appears blank, only the url of the product is displayed. But the product appears ok on the user's timeline in facebook.

 

If another user (or me unliking first and then re-like) the product, now the product appears ok in the pop-up box and posted ok in the timeline again. I used the linter (https://developers.facebook.com/tools/debug) on a product before liking it and the product page was scraped with no errors. After that when I liked the product for the first time, the pop-up appeared full of information with the product picture, description etc.

 

That means that the oscommerce product pages are created on the fly and facebook does not scrape them at that moment, making the like pop-up appear blank. If, however, they are scraped in some way (either through the debug page, or have been liked at least once) they appear ok.

 

My question is simple. Since we add products all the time, is there some way that the product pages are autoscrapped so that when someone clicks the like button, the page has already been parsed by facebook and the pop-up appears full of information? It is simply impossible to sit at the debug page (linter) and scrape all the product pages on by one!

Link to comment
Share on other sites

@@Roaddoctor

 

I have followed your instructions with minor changes to make it fit in with the 2.3.2 files and it works except for one hopefully minor issue.

 

When you click the 'like' button the dialogue window opens but then closes pretty much straight away and the 'like' button is replaced with the word link 'confirm'.

 

See attached image.

 

This could be something to do with the product image but then again it might be something completely different urgh

 

Any ideas???

 

Thanks

 

Mark

Link to comment
Share on other sites

@@Roaddoctor

 

From what I have read it looks as though its a facebook spam protection measure.

 

It maybe happening because I am running wamp on my pc and facebook maybe see that as spam.

 

I will wait until I have uploaded to a domain and see if it changes.

 

Mark

Link to comment
Share on other sites

The reason you are seeing "Confirm" is because facebook implements spam protection. However this only happens when you insert &appid=<your-app-id> after the line:

 

(the below line is part of the Javascript SDK and goes to template_top.php)

 

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appid=xxxxxxxxxx"; (where xxxxxxxxxx your appid)

 

 

The proper way to implement the "like" button is to include the above line but stupidly enough if you are logged in whith your username and press "like" in a product page multiple times and then "unlike" it for testing purposes, facebook thinks you are a spammer. It checks your username (since you are logged in, in another tab of your browser) and your application id and if your username has done that a lot of times, you get banned and have to "confirm". As I said it is quite stupid since you are the admin and you test it, but it is facebook's only way to protect this page from you pressing 1000 likes and promoting your page of the roof.

 

What I've done to get rid of the problem is to throw away the &appid=xxxx part and everything works again! As I say however in my previous post, every product page has to go through the debug page of facebook so as to be scraped first and hence the contents of the product to be displayed in the like popup box. If someone has a solution for that please share...

Link to comment
Share on other sites

Never mind, found the solution myself. To whoever is interested...

 

If you can't get the like pop-up box contents to appear for every single product page is because facebook needs to scrape the page contents first. But the oscommerce product pages are dynamic (they are created on the fly) so we have to instruct facebook to scrape the page at the moment it is created. To do that we use in the template_top.php:

 

$.post("https://graph.facebook.com", {
   id: "<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $HTTP_GET_VARS['products_id'], 'NONSSL', false)?>",
   scrape: true
});

 

The above code can be inserted right after the Javascript SDK so the whole thing needs to be:

 

<!-- facebook script //-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.async=true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

$.post("https://graph.facebook.com", {
   id: "<?php echo tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $HTTP_GET_VARS['products_id'], 'NONSSL', false)?>",
   scrape: true
});
</script>
<!-- end of facebook script //-->

 

When you enter a product page, please give it 10 seconds or so, because the facebook linter is contacted in the background and is scraping the page.

 

We are forcing scraping in this way, works flawlessly in my page... B)

Link to comment
Share on other sites

  • 3 weeks later...
  • 4 weeks later...

Trying to get this to work. I got the buttons to show up but when I click like the box that pops up only has the url, no images or description or title. if I paste my url into facebook it uses the picture from the new products box and no other images. no title or text either. I'm getting really fed up with it. Here is my header

<?php
/*
 $Id$
 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com
 Copyright (c) 2012 osCommerce
 Released under the GNU General Public License
*/
 $oscTemplate->buildBlocks();
 if (!$oscTemplate->hasBlocks('boxes_column_left')) {
   $oscTemplate->setGridContentWidth($oscTemplate->getGridContentWidth() + $oscTemplate->getGridColumnWidth());
 }
 if (!$oscTemplate->hasBlocks('boxes_column_right')) {
   $oscTemplate->setGridContentWidth($oscTemplate->getGridContentWidth() + $oscTemplate->getGridColumnWidth());
 }

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php echo HTML_PARAMS; ?> xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<?php
// BOF FB buttons
 $product_image_query = tep_db_query("select products_image from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$_GET['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
 $product_images = tep_db_fetch_array($product_image_query);
// EOF FB Buttons
?>
<?php /* BOF FB Buttons */ ?>
<meta property="og:title" content="<?php echo $product_info['products_name']; ?>" />
<meta property="og:type" content="product" />
<meta property="og:url" content="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;?>" >
<meta property="og:image" content="<?php print 'http://epicdecals.com/store/images/' . $product_images['products_image']; ?>" />
<meta property="og:site_name" content="<?php echo STORE_NAME;?>" />
<meta property="fb:admins" content="100000898588278" />
<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'])))); ?>" />
<?php /* EOF FB Buttons */ ?>

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.22.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.22.min.js"></script>
<!-- Including SWFObject from Google -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
// fix jQuery 1.8.0 and jQuery UI 1.8.22 bug with dialog buttons; http://bugs.jqueryui.com/ticket/8484
if ( $.attrFn ) { $.attrFn.text = true; }
</script>
<?php
 if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {
?>
<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);
</script>
<?php
 }
?>
<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<?php echo $oscTemplate->getBlocks('header_tags'); ?>
<?php ///////////imgchanger product_info.php ?>
<script type="text/javascript">
window.onload=function()
{
imgnum=3, //Number of your images. This should match on your comboboxes options.
imgchangelnk=document.getElementById('imgchangelnk'), //id of the image link
imgchange=document.getElementById('imgchange'), //id of your image that will be changing
combobox=document.getElementById('colorselection'); // id of your combobox.

combobox.onchange=function()
{
 var s = new String(imgchange.src);
 imgchangelnk.href=s.split("_")[0] + '_' + combobox.options[combobox.selectedIndex].text.replace(' ', '') +'.jpg';
 imgchange.src=s.split("_")[0] + '_' + combobox.options[combobox.selectedIndex].text.replace(' ', '') +'.jpg';

}
}
</script>

<script type="text/javascript">
    /*var params = {
		    allowscriptaccess: "always",
		    menu: "false"
	    };
	    var flashvars = {};
	    var attributes = {};
	    if (swfobject.hasFlashPlayerVersion("9")) {
		    // SWFObject will load "animation.swf" into tag with id of "containerWrapper"
		    swfobject.embedSWF("http://www.zugno.com/coderscooler/samples/swfobject-sample/animation.swf", "containerWrapper", 300, 100, "9.0.0", false, flashvars, params, attributes);
	    }*/
</script>
<?php ////////////////end imgchanger product_info.php ?>
</head>

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...