HOW TO: Facebook "Like" Button in OSCommerce

Jayman11 · April 29, 2010

This was cake after doing a little research online. Adding the "Like" button to your oscommerce site is simple using their java version instead of that iframe stuff.

Here you go:

Step 1: Get yourself an Application ID from here.

Step 2: Add this code to your header, footer, or wherever you want the like button to show, put it as the first line above the <?php :

<fb:like
     href="<?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?>"
     layout="standard"
     show_faces="true"
     width="<?php echo BOX_WIDTH-30; ?>"
     action="like"
     font="trebuchet ms"
     colorscheme="light"></fb:like>

Step 3: Add this code to the bottom of either /includes/footer.php (pre rc3) or includes/template_bottom.php (rc3), making sure to substitute "your app id" with your actual app id:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
 FB.init({appId: 'your app id', 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>

And that is it! I put the button in my column_right.php and changed the button style from "standard" to "button_count" so that it didn't have all the wording that seemed to stretch the site out funny on certain screen resolutions.

Oh yeah, the only thing I couldn't figure out was how to get the button to center in the column_right.php. If anyone knows let me know. I think I'm just having a brain fart from being so excited over this working! LOL

Thanks to Gary for this code on Club osCommerce!!

Jayman11 · April 30, 2010

ok found an issue.....for some reason it won't show the button in IE but works fine in every other browser. What am I missing here???? Anyone?? This is driving me nuts! LOL

forummaker · April 30, 2010

ok found an issue.....for some reason it won't show the button in IE but works fine in every other browser. What am I missing here???? Anyone?? This is driving me nuts! LOL

I know IE is such a pain!

I had to change this on many of my files....

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

It helped with a code I was using in my footer.php file

Try adding that code to one of your pages.... ie. conditions.php.... just to test first.

Find

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

Replace with

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Hope that helps.

Also.. can you provide a pick or link to check out your work?

Edit: Oh.. also had to change this in the files as well... that code change the way description and text was displayed in IE... it centered everything.

So.. I had to change the following as well.

Again... try in condition.php file first.

Find

<td class="main">

Replace with

<td class="main" align="left">

007inda · April 30, 2010

this looks really intresting & helpfull as so many facebookers out there!

THank you for sharing, will have a go with this over the weekend & let you know how I get on.

May 1, 2010

ok found an issue.....for some reason it won't show the button in IE but works fine in every other browser. What am I missing here???? Anyone?? This is driving me nuts! LOL

This works for me using IE :

Francys · May 3, 2010

This was cake after doing a little research online. Adding the "Like" button to your oscommerce site is simple using their java version instead of that iframe stuff.

Here you go:

Step 1: Get yourself an Application ID from here.

Step 2: Add this code to your header, footer, or wherever you want the like button to show, put it as the first line above the <?php :
<fb:like
     href="<?php echo HTTP_SERVER . $_SERVER['REQUEST_URI']; ?>"
     layout="standard"
     show_faces="true"
     width="<?php echo BOX_WIDTH-30; ?>"
     action="like"
     font="trebuchet ms"
     colorscheme="light"></fb:like> 
Step 3: Add this code to the bottom of either /includes/footer.php (pre rc3) or includes/template_bottom.php (rc3), making sure to substitute "your app id" with your actual app id:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
 FB.init({appId: 'your app id', 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> 
And that is it! I put the button in my column_right.php and changed the button style from "standard" to "button_count" so that it didn't have all the wording that seemed to stretch the site out funny on certain screen resolutions.

Oh yeah, the only thing I couldn't figure out was how to get the button to center in the column_right.php. If anyone knows let me know. I think I'm just having a brain fart from being so excited over this working! LOL

Thanks to Gary for this code on Club osCommerce!!

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

Jayman11 · May 3, 2010

This works for me using IE :

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

Where do you think best place to put this piece of code is?

♥mdtaylorlrim · May 3, 2010

You can kill 11 birds with one stone by installing the Header Tags SEO. It includes page title tags plus 10 social networking bookmarks on every page.

But, that is just one option...

Francys · May 3, 2010

Hi,

If i have KissMT & Canonical Headers, USU 5, do i still need the Header Tags? (i have social bookmarks addon also) all are working, except that when adding to socials images aren't going through... all the rest works very well (i.e description tags, and title tags that are automatically generated).

I'm pleased with those, but what would Header Tags do, and does it complement/substitute the former.

I would like my meta tags all automatically generated with no duplicates, which KissMT can acomplish.

Thanks in advance

Francys

Jayman11 · May 3, 2010

You can kill 11 birds with one stone by installing the Header Tags SEO. It includes page title tags plus 10 social networking bookmarks on every page.

But, that is just one option...

Thanks, my idea was to just have the facebook, the rest to me are just a waste. If I can get this to work in IE properly I will be satisfied. By putting it in the column_right.php above my shopping cart it is right in between login and shopping cart which is center of where just about everyone looks anyway. Plus having it in that one file should save the energy of having to add it to individual pages since that column is always shown. I really hate IE! Google - fine, Firefox - fine, opera - fine, IE - no worky. LOL

May 3, 2010

Where do you think best place to put this piece of code is?

I'm using STS and template, and I have put this in my template.

You could try in your catalog/index.php

Fire up your site and click View Source. It should be in the top after <!doctype.....

Jayman11 · May 3, 2010

I'm using STS and template, and I have put this in my template.

You could try in your catalog/index.php

Fire up your site and click View Source. It should be in the top after <!doctype.....

Hmmm tried that manually with not luck in my index which I thought would do it too. Where do you have your "like" button located on your site?

May 3, 2010

Hmmm tried that manually with not luck in my index which I thought would do it too. Where do you have your "like" button located on your site?

I have it in catalog/product_info.php

Do you have a link to your site?

Jayman11 · May 3, 2010

interesting, adding those codes you guys suggested doesnt make it work but it does do something different, it makes IE give an error code to me regarding an unrecognized character.

May 3, 2010

interesting, adding those codes you guys suggested doesnt make it work but it does do something different, it makes IE give an error code to me regarding an unrecognized character.

Change this in your index.php :

with this:

longhorn1999 · May 6, 2010

Change this in your index.php :

<html dir="LTR" lang="en">

with this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

If I wanted to put the Like button in a column instead of just on the main page (index.php), do you know what edit needs to be made for the button to show up in IE? I'm having the same issue where it's working in Firefox but as usual IE causes problems...

Jayman11 · May 10, 2010

Come on...anyone figure this last piece of the puzzle out? Lol, it's driving me NUTS!!!!!

Krisz1 · May 11, 2010

Can we add this to just one column (let's say information box) instead into each and every product?

Or, a facebook box within index.php, to show up once every time you return to the home site...

My idea is that people like the "store", not just a specific product.

Jayman11 · May 13, 2010

Can we add this to just one column (let's say information box) instead into each and every product?

Or, a facebook box within index.php, to show up once every time you return to the home site...

My idea is that people like the "store", not just a specific product.

Not sure on that, I know you can do it by using the addthis button, which what I have switched to until I figure out some code issues. It works great with addhtis right now in IE and other browsers. I have it in my column_right and when someone clicks like which on the index/front page then it likes that, if they are on a product page and hit it, it likes that product and registers each like individually each time so works how it should basically.

MeawtuzA · May 15, 2010

Thank yoou very much :thumbsup:

Francys · May 16, 2010

Thank yoou very much :thumbsup:

i wouldn't use addthis button in a oscommerce shop, since it's a third party application and some information can be collected by them.

i think the best is to use like they have these forums.

June 3, 2010

Hello,

is it possible to add this on each product description site ? (product_info.php)

Can anyone explain me what i need to do if i want that ?

Which codes need to be added ? and where.. ?

Thanks.

June 6, 2010

Any one ?

Francys · June 14, 2010

Any one ?

The best is to install this add on that posts the products details for social bookmarks:

Contrib Osc_socializer

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

http://www.oscommerce.com/forums/index.php?showtopic=307038

Cheers

Francys

piou · July 20, 2010

hi there,

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

facebookexternalhit

greetz

HOW TO: Facebook "Like" Button in OSCommerce

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived