Use your left/right keys to browse tutorials
Getting started with Facebook Connect & News Feed

Getting started with Facebook Connect & News Feed

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on July 10, 2009

Facebook connect has been one of those things that I’ve been tinkering with for a while now. I started by downloading the example Facebook connect application from Facebook. and gradually found my way around using it. Im using the same authentication methods as Noah Hendrix’s did over at Nettuts, but extending this method to include updating a users newsfeed.

So to get started you need to head over to Facebook and create a new application

Below are the steps to setting up an application on Facebook.

Firstly navigate to the Facebook developer homepage to register your application

app1


Choose a name for your app and agree to the Terms

app2


Your application key along with your secret is displayed on the next page

app3


Click connect in the menu to add the URL to which your application will be hosted

app4


You now need to put your API key in here.

app5



The complete Facebook connect demo code is below. Lets take a look at it. In this example we’re simply authenticating a facebook user with javascript and posting their comment to the users news feed using the API. We also need to include a cross domain receiver file which allows us to transfer data between our domain and Facebook platform. If the user is authenticated we pull in their name, avatar, and profile url, and hide the name input field and facebook connect login button. Now when the user submits a comment (after the javascript alert which is there for demo purposes) they are given the option to post the comment to their newsfeed. Check out the video from the facebook connect developers below which explains how to setup the json code to dynamically update their newsfeed.

Facebook Connect and Newsfeeds Video




Final Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Facebook demo</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    
    <script>
    function auth_fb() {

  var viewer  = FB.Facebook.apiClient.fql_query(
  
      'SELECT name, pic_square_with_logo ,profile_url FROM user WHERE uid='+FB.Facebook.apiClient.get_session().uid,
      
      function(results) {
        load_data(      results[0].name,
                        results[0].pic_square_with_logo,
                        results[0].profile_url,
                        'FB.Connect.logoutAndRedirect("./index.html");return false;')
      });
}

function load_data(name, image, url, logout) {


  $('#userbox').html( "<a href='"+url+"'>"
                    + "<img alt='"+name+"' src='"+image+"' /></a>"
                    + "<div id='ubname'><a href='"+url+"'>" + name + " logged in with Facebook Connect</a></div> "
                    + "<a href='./index.html' onclick='" + logout + "'>logout</a>" ).show();
   $('div#submit').html( "<input type='submit' id='sub' onClick='fb_reg(); return false;' value='Post Comment' />");
  
  
  $('#name').val(name);
  $('#url').val(url);
  $('#image').val(image);
  $('#userinfo').hide();


}
    
    
    </script>
    
</head>

<body>


          <form id="comment-form">
            <div id="userbox" style="display:none;"></div>
            
            <div id="userinfo">
            
              <div class="login"><fb:login-button size="large" background="white" length="long" onlogin="auth_fb();"></fb:login-button></div>
              
              Name: <br/><input id="name" name="name" type="text" />
              <input id="url" name="url" type="hidden" />
              <input id="image" name="image" type="hidden" />
              
            </div>
            <div class="clear"></div>
            <div class="comment-cont">
              Comment:<br />
              <textarea name="comment" cols="40" id="comment-text"></textarea>
            </div>
            <br/>
            <div id="submit"><input type="submit" id="sub" onclick="nor_reg(); return false;" value="Post Comment" /></div>
          </form>





    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
    <script type="text/javascript">
	


function nor_reg(){
	
	if($('#comment-text').val() == ""){
  alert("All fields are required");
}else{
	
	 alert("post the data to the database");
	
	}}



function fb_reg(){	

if($('#comment-text').val() == ""){
  alert("All fields are required");
}else{

var text = $("#comment-text").val();
var data = {"comment": text};

FB.Connect.showFeedDialog(102888283195, data);


 alert("post the data to the database");

}
}

	 FB.init("YOUR_API_KEY_GOES_HERE", "xd_receiver.html", {"ifUserConnected" : auth_fb});
    </script>
    


</body>
</html>

demodownload



More tutorials from Papermashup
Comments
13 discussions around Getting started with Facebook Connect & News Feed
Older Comments
  1. Pingback: facebook connect using FB.Connect.showFeedDialog without fb:login-button | Gravity Layouts

  2. suc khoe says:

    Bai viet kha thu vi

Older Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.