Facebook Hello World

by Admin 16. October 2011 12:03

I am starting to learn to develop a facebook application, and I thought it would be wise, to blog about all the little things I came round for setting this up.

First big issue, HTTPS, since october 1st, 2011, Facebook required you to have a https hosted page. So setting this up was a hassle. You can find it cheap and free on the internet, but I went for the decent solution, and got HTTPS access from my hosting. Once this was setup, I could start writing an Hello World app.

Facebook apps can be set up in 2 ways:

  • one is making a website, and integrating with several facebook api's, like users, feeds, like buttons, ...
  • the second one, and the one that I choose, is that you write a website, and it get's "hosted" inside and iFrame (The Canvas) on the facebook page.

This methode is very nice, you can find recources on the internet about it.

So if you are on this site, I assume you have some knowledge about how to setup a website and hosting. So I am going to skip over that and, get into the "Hello World" sample. And here it is

<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" charset="utf=8"></script>
<script>
	FB.init({appId: 254826021222861,status:true, cookie:true, xfbml: true});
</script>
<h1>My Social Club</h1>
<div id="quote">
	<span id="facebook_stuff">
		<div id="profile_pic">
			<fb:profile-pic uid="1289340415">
			</fb:profile-pic>
		</div>
		<div id="profile_name">
			<fb:name uid="1289340415" useyou="false">
			</fb:name>
		</div>
	</span>
	Hello and welcome ...
</div>
</body>
</html>

As you can see, a simple http page.

  • On top is reference to the facebook API.
  • Than an initialisation routine (appid, you get this when configuring your facebook app). As you can see we set the parameter "fxbml: true", than you can use the facebook markup language, like
    • fb:profile-pic
    • fb:name
    • ...
  • to find out your profile id, you can use this app: http://apps.facebook.com/what-is-my-user-id
  • so than is your profile picture, using the xfbml markup (full reference: http://fbdevwiki.com/wiki/Category:FBML
  • than it is your name
  • some random text

So that is all to it, do this and you've got an app on facebook, displaying your profile picture and name and Hello World...

Here is the official facebook developers page : http://developers.facebook.com/

Tags:

Facebook

Widget Google Reader Faves not found.

The 'link' start tag on line 20 position 6 does not match the end tag of 'head'. Line 21, position 5.X

Month List