Jump to content

Archived

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

Jayman11

HOW TO: Facebook "Like" Button in OSCommerce

Recommended Posts

hi there, again,

 

just noticed, that there is a problem with some IE versions. somehow some IE user are redirected to a blank page with a "?fb_xd_fragment..." string at the end of the address.

 

google told me, that this is a now bug that is not solved yet:

 

http://bugs.developers.facebook.com/show_bug.cgi?id=9777

 

since such blank pages will aren't really user friendly i'll give the iframe a try!

 

greetz

Share this post


Link to post
Share on other sites

hi there,

 

to prevent session ids in the links posted on facebook just add the following line to the spiders.txt

 

facebookexternalhit

 

greetz

 

hey piou, thx for your hint,

but thats not working for me, put in "facebookexternalhit" to includes/spiders.txt but oscid is still given over to facebook :/

 

Isnt there some way to edit

      href="<?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?>"

to exclude the session id in some way?

Share this post


Link to post
Share on other sites
but thats not working for me, put in "facebookexternalhit" to includes/spiders.txt but oscid is still given over to facebook :/

 

hey papalapap, for me the spiders.txt works fine! How do you check whether the facebookbot gets an ID? Do the other bots get an ID? Maybe your spiders.txt is not working properly.

 

greetz

Share this post


Link to post
Share on other sites

hey papalapap, for me the spiders.txt works fine! How do you check whether the facebookbot gets an ID? Do the other bots get an ID? Maybe your spiders.txt is not working properly.

 

greetz

 

 

Uhmn, i dont know realy, i´ve "Prevent Spider Sessions" on true in configuration, not shure if that have something to do with this.

What i test is, click the Like Button, look up on my facebook pinboard, and get/see a URL with the oscID :/

Share this post


Link to post
Share on other sites

Hi all! I tried everything in this post and nothing could make thebutton show up on IE

I finally restorted to this (and it works)

I have enclosed the call to the fb script in <DIV> tags in includes/column_right.php

 

<div class="moduletable">

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:fb="http://www.facebook.com/2008/fbml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>www.Nhuy.dk</title>

</head>

<body>

<fb:like

href="<?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?>"

layout="button_count"

show_faces="true"

width="<?php echo BOX_WIDTH-30; ?>"

action="like"

font="trebuchet ms"

colorscheme="light">

</fb:like>

</body>

</html>

</div>

 

 

Now the button shows up in all browsers.. :-)

 

/Aarto

Buddha figurer, smykker, bambus vaser, thai figurer

Share this post


Link to post
Share on other sites

have you tried the following website:

http://developers.facebook.com/

 

plenty code and very easy to integrate to oscommerce or any other websites.


Please read this line: Do you want to find all the answers to your questions? click here. As for contribution database it's located here!

8 people out of 10 don't bother to read installation manuals. I can recommend: if you can't read the installation manual, don't bother to install any contribution yourself.

Before installing contribution or editing/updating/deleting any files, do the full backup, it will save to you & everyone here on the forum time to fix your issues.

Any issues with oscommerce, I am here to help you.

Share this post


Link to post
Share on other sites

First thank you very much, by sharing with us your project, i was looking for this for awhile, can't wait to try this...

 

You are doing awesome, if possible this should be made as a contribution aswell, many many congratulations

 

more interesting for contrib... i have app id , insert on code in footer but i not show the iframe...

Share this post


Link to post
Share on other sites

Hi all! I tried everything in this post and nothing could make thebutton show up on IE

I finally restorted to this (and it works)

I have enclosed the call to the fb script in <DIV> tags in includes/column_right.php

 

<div class="moduletable">

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:fb="http://www.facebook.com/2008/fbml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>www.Nhuy.dk</title>

</head>

<body>

<fb:like

href="<?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?>"

layout="button_count"

show_faces="true"

width="<?php echo BOX_WIDTH-30; ?>"

action="like"

font="trebuchet ms"

colorscheme="light">

</fb:like>

</body>

</html>

</div>

 

 

Now the button shows up in all browsers.. :-)

 

/Aarto

Buddha figurer, smykker, bambus vaser, thai figurer

Hello Aarto,

 

I am also trying to include the like button. I did not want to use my card to get an app id, so i tried your solution. Nothing I did would put a button on my site. Can you post the code for your FB box and be more specific about where to paste the other code in column_right?

 

Tim

Share this post


Link to post
Share on other sites

Hello Aarto,

 

I am also trying to include the like button. I did not want to use my card to get an app id, so i tried your solution. Nothing I did would put a button on my site. Can you post the code for your FB box and be more specific about where to paste the other code in column_right?

 

Tim

Looking closer at the site from Aarto, there is no like button only a FB button. So I finally created an app ID and was presented with this code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:fb="http://www.facebook.com/2008/fbml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>Site name</title>
 </head>
 <body>
   <h1>Site name</h1>
   <p><fb:login-button autologoutlink="true"></fb:login-button></p>
   <p><fb:like></fb:like></p>

   <div id="fb-root"></div>
   <script>
     window.fbAsyncInit = function() {
       FB.init({appId: 'MY APP ID NUMBER', status: true, cookie: true,
                xfbml: true});
     };
     (function() {
       var e = document.createElement('script');
       e.type = 'text/javascript';
       e.src = document.location.protocol +
         '//connect.facebook.net/en_US/all.js';
       e.async = true;
       document.getElementById('fb-root').appendChild(e);
     }());
   </script>
 </body>
</html>

 

I took out my actual site name and app id for this posting. This is all the code I needed. I can put this wherever I want and the like button appears. Maybe things have changed since this thread first started....

 

Does anyone know how to alter this code to remove the faces or change the button layout? If you get code from this page:

http://developers.facebook.com/docs/reference/plugins/like

There are places to alter the behavior, but I do not see these features in the code I used. I changed status to false and saw no difference. I changed xfbml to false and all but the site name went away. To be honest, I do not even know why it works when all the posts go on about 2 different pieces of code need to be added.

 

Tim

Share this post


Link to post
Share on other sites

Hello Aarto,

 

I am also trying to include the like button. I did not want to use my card to get an app id, so i tried your solution. Nothing I did would put a button on my site. Can you post the code for your FB box and be more specific about where to paste the other code in column_right?

 

Tim

 

Well.. it worked fine but i removed it after a warning.. Turns out it's really dangerous from SEO perspective to repeat the <header> tags in a single web page and it could have been interpreted by Google as cheating and could have causes the site to be penalized.. So i'm back to not having a like button again... Sorry.

 

/Aarto

http://www.nhuy.dk/shop

Share this post


Link to post
Share on other sites

I was having problems getting this to work because i had the script in the footer, which doesnt seem to work, here's what worked for me:

 

Open catalog/index.php and catalog/product_info.php and find:

 

<html <?php echo HTML_PARAMS; ?>>

 

Change to:

 

<html <?php echo HTML_PARAMS; ?> xmlns:fb="http://www.facebook.com/2008/fbml">

 

Open catalog/product_info.php

 

Paste the following code wherever you want the Like button to appear such as between any <td> </td> tags:

 

<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 Number', 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> 

 

Works in IE and Firefox.

Share this post


Link to post
Share on other sites

I am having two problems with this:

 

1; i cant seem to get the Like box under my product describtion. it is either in the top of my page, or in the bottom (depinding on where i put it in the .PHP file.

 

2; when pressing the botton, it gives out an error, and the reason is, the the URL it generates is wrong.

 

instead of http://Fatima.dk/shop/catalog/product_info.php?products_id=1396 it says "http://HTTP_SERVER/shop/catalog/product_info.php?products_id=1396"

 

When asked of the site URL in the Facebook develp. thing, i wrote http://www.fatima.dk/

 

was this wrong?.

 

- Jack

Share this post


Link to post
Share on other sites

Nevermind! - Fixed Both Problems!

 

Now, a new one have presented it self.

 

When Pressing on a Like botton, the like info on my FB page, Says:

 

Jack Likes "Store name" on fatima.dk.

 

How do i make it say Jack Likes "Product Name" on fatima.dk.

Share this post


Link to post
Share on other sites

The iframe version of the FB::like comes as standard in the soon-to-be-release 2.3 version of osCommerce.

I have this ver on hard drive to see what I can do with it. Below is image showing where the text at bottom of the box is being cut off. I've looked under modules and in the languages files in search of where this can be fixed, but keep coming to dead end. I have tried to increase the padding for the infoboxcontens, but to no prevail. Any clues?

 

Thank you.

Share this post


Link to post
Share on other sites

If your adding the js to the left or right columns at the bottom or top you can just use the <script></script> so long as its not enclosed in php and it will work just fine I would think.

 

also the <script> tag is wrong it should be <script type="text/javascript" .....></script>


Eric

 

Keep up on osCommerce changes and updates at

Github | Understand osCommerce a little further at OsCommerce Documentation | Copy and paste your error message in Google add "in osCommerce" at the end to get relevant answers to most issues.

Share this post


Link to post
Share on other sites

I have this ver on hard drive to see what I can do with it. Below is image showing where the text at bottom of the box is being cut off. I've looked under modules and in the languages files in search of where this can be fixed, but keep coming to dead end. I have tried to increase the padding for the infoboxcontens, but to no prevail. Any clues?

 

Thank you.

 

 

Soryy, I forgot to attach the image:

 

scoialbm.jpg

I am wondering if this might be a image and maybe then, it has something to with size of the image. But do not see anywhere in the social FB like bookmark where it mentions this.

 

Thank you.

Share this post


Link to post
Share on other sites

Im wanting to add this to my store also. Can this be added to numerous pages on the store for different products?

 

Not sure how to do this since the web developer that did my site is no longer around.

Please help.

Thanks

Share this post


Link to post
Share on other sites

All examples shown in all 3 pages doesn't worked for me after yeatserday. Before it worked with errors in IE, but seems facebook chaged something and this method not work anymore.

So I decided to try the newest iFrame solution by facebook.

It works in any browser but show correct URL only when it is:

http://mysite.com/catalog/product_info.php?products_id=1

If the address is

http://mysite.com/catalog/product_info.php?cPath=1_11_111&products_id=1

facebook show it in this way:

http://mysite.com/catalog/product_info.php?cPath=1_11_111

the product ID missing :'(

 

Seems this generating the URL <?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?> is not correct.

Do you guys know a correct command which will transform

product_info.php?cPath=1_11_111&products_id=1

to

product_info.php?products_id=1 to can facebook accept it properly?

Share this post


Link to post
Share on other sites

Problem solved with correct URL, Big thanks to Sam's contribution "Sam's Remove & Prevent duplicate content with the canonical tag": http://addons.oscommerce.com/info/7163

 

So here are the steps to install the Like button iFrame version:

Add, at the very bottom, before the last ?> in catalog/includes/functions/html_output.php this code:

 

// remove duplicate content with canonical tag by Spooks 12/2009
function CanonicalLink( $xhtml = false , $ssl = 'SSL' ) {
global $request_type;
$rem_index = false; // Set to true to additionally remove index.php from the uri
$close_tag = ( false === $xhtml ? ' >' : ' />' ); $spage = '';
$domain = ( $request_type == 'SSL' && $ssl == 'SSL' ? HTTPS_SERVER : HTTP_SERVER ); // gets the base URI

// Find the file basename safely = PHP_SELF is unreliable - SCRIPT_NAME can show path to phpcgi
if ( array_key_exists( 'SCRIPT_NAME', $_SERVER ) 
		&& ( substr( basename( $_SERVER['SCRIPT_NAME'] ), -4, 4 ) == '.php' ) ) {
		$basefile = basename( $_SERVER['SCRIPT_NAME'] );
} elseif ( array_key_exists( 'PHP_SELF', $_SERVER )
		&& ( substr( basename( $_SERVER['PHP_SELF'] ), -4, 4 ) == '.php' ) ) {
		$basefile = basename( $_SERVER['PHP_SELF'] );
} else {
// No base file so we have to return nothing
return false;
}
// Don't produce canonicals for SSL pages that bots shouldn't see
$ignore_array = array( 'account', 'address', 'checkout', 'login', 'password', 'logoff' );
// partial match to ssl filenames
foreach ( $ignore_array as $value ) {
	$spage .= '(' . $value . ')|';
}
$spage = rtrim($spage,'|');	
if (preg_match("/$spage/", $basefile)) return false;

// REQUEST_URI usually doesn't exist on Windows servers ( sometimes ORIG_PATH_INFO doesn't either )
if ( array_key_exists( 'REQUEST_URI', $_SERVER ) ) {
		$request_uri = $_SERVER['REQUEST_URI'];
} elseif( array_key_exists( 'ORIG_PATH_INFO', $_SERVER ) ) {
		$request_uri = $_SERVER['ORIG_PATH_INFO'];
} else {
// we need to fail here as we have no REQUEST_URI and return no canonical link html
return false;
}	
$remove_array = array( 'currency','language','main_page','page','sort','ref','affiliate_banner_id','max');	
// Add to this array any additional params you need to remove in the same format as the existing

$page_remove_array = array(FILENAME_PRODUCT_INFO => array('manufacturers_id', 'cPath'),
		          FILENAME_DEFAULT	     => array() );

// remove page specific params, should be in same format as previous, given is manufacturers_id & cPath 
// have to be removed in product_info.php only

if (is_array($page_remove_array[$basefile])) $remove_array = array_merge($remove_array, $page_remove_array[$basefile]);

foreach ( $remove_array as $value ) {
		$search[] = '/&*' . $value . '[=\/]+[\w%..\+]*\/?/i';
}
$search[] = ('/&*osCsid.*/'); $search[] = ('/\?\z/');	
if ($rem_index) $search[] = ('/index.php\/*/');	
$request_uri = preg_replace('/\?&/', '?', preg_replace($search, '', $request_uri )); 	

echo $domain . $request_uri . PHP_EOL; // this one I modified
} 
///

 

Place where you want to show Like button in product_info.php this code:

 

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php CanonicalLink( $xhtml = false, 'SSL' ) ?>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

 

Thats all, works in every browser and browser version

 

:thumbsup:

Share this post


Link to post
Share on other sites

Has anybody managed to get this to work with STS?

 

Putting the code in the footer works when STS is turned off but not when it is turned on.

 

I am using the product_info template and want the Like box to appear for each different product.

 

Any ideas how this would be achieved?

Share this post


Link to post
Share on other sites

aaahhh - what a waste!

 

Guys, simply go to your product_info.php file (parent folder) and try adding the following:

 

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

 

This will quirey the server for the product URL and in turn use the full url as the link on FB to your site.

The 'like' box within your product page will also use a 1+1+1 etc method, as more people like the product the box will add each.

 

I recommend the code be added in/around that of the product part number section. Looks good and seems to fit well.

 

Dont see any need to change any of the other code, and this has been tested in Win Enviro's - running IE, Firefox as well as Linux OS running Chrome and Firefox, also works on the Galaxy Sgoogle browser!

 

Enjoy!

:thumbsup:

Share this post


Link to post
Share on other sites

aaahhh - what a waste!

 

Guys, simply go to your product_info.php file (parent folder) and try adding the following:

 

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

 

This will quirey the server for the product URL and in turn use the full url as the link on FB to your site.

The 'like' box within your product page will also use a 1+1+1 etc method, as more people like the product the box will add each.

 

I recommend the code be added in/around that of the product part number section. Looks good and seems to fit well.

 

Dont see any need to change any of the other code, and this has been tested in Win Enviro's - running IE, Firefox as well as Linux OS running Chrome and Firefox, also works on the Galaxy Sgoogle browser!

 

Enjoy!

:thumbsup:

 

this worked perfectly with the exception of IE8. is it working for anyone else in IE8? working perfectly in Firefox, Safari, Opera a Chrome.

Share this post


Link to post
Share on other sites

×