Last night I spend a couple hours playing with the Facebook new Graph JavaScript API, and could not fall to sleep afterward how excited I was about the potential of this new service. I have started a few social networking sites, and seeing them all loosing to Facebook has been troubling me for a while. Now that Facebook has gotten so big, I know I cannot but join it. Yet it seems that through the ability to tap into its services that actually can open a whole new world of social networking, while making development easier. In addition, what comes to my advantage is that I am JavaScript developer, and don't have a problem creating full apps only in JavaScript. I feel like a I am at sweet spot, knowing enough about social networking and being master at the "new language" of social networking: JavaScript.
Anyway, let's dive in the code. I will show you here how to do a simple hello world JavaScript app using the Facebook Graph API.
First, you have to have a domain, and get it approved as a Facebook application, and get the application ID, which matches the domain (otherwise your app will not work) I know this sounds simple but I wasted at least an hour trying to get this running on a local host :)
Next, load the Graph API JavaScript. (you can put it on the bottom of the page), and let's also add our jQuery reference.
<script src="js/jquery.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
Now, the HTML part: include an Graph API tag for the login button. Note that the bottom has some important properties, that will determine how much can your app access the Facebook data. For now, let's just allow read and publish to the news stream.
<fb:login-button perms="read_stream,publish_stream">
Grant Permissions to make more examples work
</fb:login-button>
Let's test this now, click on the login button, which should prompt you to allow this application into your Facebook account. You may have to go back to your app settings (on the Facebook website) to add redirect URL, to let the app know where to go after the login. (I was getting some error before I did that.
Now, let's see if we can pull some data:
FB.api('/me', function(response) {
console.log("user id: " + response.id);
});
If that works, let's try to post some data to the wall. Add this below your login button (or wherever in the doc you have your HTML)
<div id="content"></div>
<form>
<textarea name="text" id="comment"></textarea>
<a href="#" id="submit_comment">submit</a>
</form>
And add this JavaScript:
$("#submit_comment").click(function(){
FB.api('/me/feed', 'post', { message: $("#comment").val() }, function(response) {
if (!response || response.error) {
alert('Error occured');
}
else {
console.log('Message was posted! (post id: ' + response.id + ")");
}
});
return false;
});
If all works, you should be able to post right to your wall from here.
What makes me most excited, is the viral traffic potential of hooking my social networking websites into the. All the content that a user posts on a website gets posted on their wall, and all their Facebook friends will see this. I use to rely mostly on SEO in the past for promoting my apps, but this has so much more potential! Social networking companies are scared of Facebook, but I see this as a great opportunity. Yes this is a bit paradigm shift, but I believe now it's definitely in my favor.
Q_the_Novice
6/24/2010 7:41 AM
This is awesome, thanks for sharing.