Facebook Connect App for localhost domain.

I am sure there are lots of guys out there are basking in the Facebook Connect API these days. I saw quite a few people trying out the Facebook Connect with a http://localhost domain on their machine and having difficulties getting it work correctly. I got it right after a couple of tries, so I thought of sharing that simple app to display a Connect button on your site.

Here is the xd_receiver.htm file. I have placed it under C:\inetpub\wwwroot. Although I believe you can place it under a specific web application root too. In Facebook, I have http://localhost as the Connect Url for my application.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript">
</script>
</body>
</html>


Here is the htm file which actually displays the facebook button.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<div id="comments_post"> <h3>Leave a comment:</h3>
<form method="POST">
<div id="user"> Name: <input name="name" size="27"><br />
<fb:login-button></fb:login-button>
</div>
<textarea name="comment" rows="5" cols="30"></textarea>
<br />
<input type="submit" value="Submit Comment">
</form>
</div>
<script type="text/javascript">
FB.init("29af44916c9284d774abfdf84ba2da486", "http://localhost/xd_receiver.htm");
</script>
</body>
</html>


Observe that the script reference for the FeatureLoader.js.php has to be before you use any FB functions, also the xd_receiver.htm path should be the one where you have kept that file under your IIS. I have tried the same kind of settings for displaying a facebook connect button on a ASP.NET usercontrol too.


Let me know if this blows for you.

Happy Programming!

6 Comments:

Niksa Jakovljevic said...

Hello there,


I set up Facebook Connect on my localhost, even it isn't visible from the outside. That was standard procedure, just entered connect url as http://localhost:8080 (because my local Tomcat runs on port 8080) and that's it.

I put xd_receiver.html in folder under web app root (like facebook) but It can be anywhere you want.
My test file (test.jsp) was in the same folder as xd_receiver.html so Fb.init was :

FB.init("appKey", "xd_receiver.htm");


Cheers,

Niksa Jakovljevic
Webcom Inc.

Abhang Rane said...

Hey Niksa,
Its good that you got that settings working. But probably when I got into this, atleast working with an ASP.NET usercontrol did not work for me. Not sure if Facebook team has updated anything from there end.
Thanks for sharing your experience though :).

Eric L. said...

I've been working on this for a day now, and I FINALLY have a connection. omg it has been so painful. Thanks for posting this.

Abhang Rane said...

No probs Eric.

@Metacowboy said...

Just get threw your helpful hints , but some how it don't connect .
As these post is already from early 2009 could it be that its broken method ?
runing a MAMPO Local server that use 8888 as port
http://localhost:8888/appdir/
teayed to place the xd-reciver file in fairs location like root and appear but with no success
Is there some update about the topic ?

Any way thanks for the post it brought me one step further with the connect url :-)

Sam said...

Hello, I liked your post. Still anyone finds any difficulty in installing FACEBOOK CONNECT to their website, we can help them in doing so. For INTEGRATING FB CONNECT to your website, contact us on http://www.ezdia.com/ma/facebook-connect-integration.php?utm_source=blogcom

Post a Comment