Facebook 'Like' with OSC

[MARSHALL2008]

Has anyone looked at the new facebook like feature? I've just been looking at the iframe version which works fine for a static url but is there a way to make the url dynamic so I can add the like button to all my products in my store or by default when a new product is uploaded etc.

 

Anyone else looked at this yet?

[Francys]

It's very interesting this option, if anyone knows or has work ongoing about it share your ideas, we apreciate and thanks.

[MARSHALL2008]

Ok been looking at this some more and it's pretty easy to do.

 

To add Facebook 'like' to all your products, first make sure you have a dynamic title bar of some kind, I've install the

"dynamic_title_bar" contrib (only takes 5mins), this is show that when the like puts up on people facebook walls the 'like' has a relevant title

 

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

 

Next in your product_info.php add the following somewhere near the top of the file (this section of code just to puts your url into a variable)

 

 

<?php

function curPageURL() {

$pageURL = 'http';

if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}

$pageURL .= "://";

if ($_SERVER["SERVER_PORT"] != "80") {

$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];

} else {

$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];

}

return $pageURL;

}

?>

 

 

Lastly add this iframe into your product_info.php file so it's where you want it to be displayed on the page

 

 

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo curPageURL(); ?>&layout=standard&show_faces=false&width=350&action=like&font=arial&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:350px; height:25px"></iframe>

 

All done

[♥mdtaylorlrim]

 

 

Lastly add this iframe into your product_info.php file so it's where you want it to be displayed on the page

 

Except that iframe code if often identified with hacker code. I wouldn't want a bunch of osC sites mistakenly identified by a search engine as a malicious web site when they're not.

 

Just something to consider.

[longhorn1999]

Except that iframe code if often identified with hacker code. I wouldn't want a bunch of osC sites mistakenly identified by a search engine as a malicious web site when they're not.

 

Just something to consider.

 

If not with iframes, does anyone have any suggestions as to where this code would be best positioned? I'm not quite sure, but does it make sense to have a Like button somewhere in your header?

[Francys]

Except that iframe code if often identified with hacker code. I wouldn't want a bunch of osC sites mistakenly identified by a search engine as a malicious web site when they're not.

 

Just something to consider.

 

Very good point hence, if anyone else has another dif suggestion please say, thanks advance.

[Francys]

Searching awhile in forums, and still haven't got this reply:

 

How to send to Facebook the product image (product_info.php), so far what i can is send the title of the page and product description (easy and automaticaly since KissMT & Canonical makes all your meta tags and H1 work wonderfully, except the image tag).

 

What i recon is we need somehow to make something like this in header for the image source:

 

<link rel="image_src"

type="image/jpeg"

href="http://www.MYSITE.com/icon-facebook.gif" />

 

and to make it dinamyc:

 

<?php echo '<link rel="image_src"

type="image/jpeg"

href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" />'; ?>

 

i'm missing something here, how can i put this image - header tag, so social bookmarks etc can recognise the product image (im configuring in products_info.php)

 

everything else runs smoothly.

[Jayman11]

I'm interested in doing this too but not the iframe. I did find this for java, thinking this could just be added in the code just about anywhere...maybe the header or the main index so that they can do the whole site? :

 

The JavaScript version

The slightly more complicated JavaScript version of the button utilizes two other bits of Facebook technology: the XFBML fb:like tag and Facebook’s JavaScript SDK.

 

view sourceprint?1 <fb:like href="Your URL" layout="standard" show-faces="true" width="450" action="like" colorscheme="light" /> 

 

You get all the same personalization features as the i-frame version, so each logged in Facebook user who visits your site sees which of their friends have clicked the “Like” button, and a link to your site gets shared across their social graph. Also like the i-frame version, you can tweak the parameters however you want.

 

But the JavaScript version offers some extras. In the code above, you can also see there’s a show-faces flag that will show the profile pictures of your friends who have clicked on the Like button.

 

The JavaScript version also gives your visitors the chance to add a comment to the link when they click on the Like button.

 

If a user is not logged in to Facebook when they visit your site, you can authenticate them automatically using OAuth 2.0, which Facebook now supports.

[Jayman11]

ok i found a little more info...apparently you have to have the Facebook java SDK loaded for that previous script to run. I don't know how this works, or where it should go. I want this to work off of my main page, like on my index file.

 

Looks like this needs to be loaded in the site somewhere first? Maybe in the header?

 

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

 

Then this looks like it can be placed anywhere you want the "Like" button:

 

<fb:like href="Your URL" layout="standard" show-faces="true" width="450" action="like" colorscheme="light" />

[Jayman11]

YAY!!! I figured out how to do this finally! Works perfect! I'm going to make a new topic with all the code and whatnot.

[piou]

YAY!!! I figured out how to do this finally! Works perfect! I'm going to make a new topic with all the code and whatnot.

 

Hi Jayman11,

 

is the new topic ready?

 

thanks

[Francys]

YAY!!! I figured out how to do this finally! Works perfect! I'm going to make a new topic with all the code and whatnot.

 

PLEASE PLEASE SHAREEEE!!!!! INFORM MEEEEEE i want it toooooo :)

 

come one paste the link mate many many thanks

[Jayman11]

lol....use the search function. :) here you go though: Like

[lostblur]

i did a little mod to Jayman11's code found here

 

In this case, you can specify both the FB 'like' box (the one that says "... person likes this. Be the first of your friends") as well as the 'comments' box directly underneath each of your product.

 

Step 1: Get yourself an Application ID from here.

 

Step 2: 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> 

 

Step 3: Add the following piece of code at the description part of your product. I'm using the WYSIWYG contrib for adding products description effortlessly and most imptly, this contrib allows u to insert descriptions either in the form of full text aka WYSISYG or in html style codes. Edit the product description in codes aka the "< >" button and add the following codes at the bottom.

 

"LIKE Box"

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

 

"Comments Box"

<fb:comments
     numposts="8"
     width="500"></fb:comments>

 

Other parameters for the comments box can be found here

if i'm not wrong, adding the comments box alone will give you the 'like' box as well.

 

In essence, the codes use both the FaceBook Javascript SDK and XFBML instead of the iFrame codes

i sincerely hope this helps. =) A sample of what i've done can be found here

[jhaustein]

hi - my prob is that if i use this code - i get a wrong picture

 

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