Papermashup

Subscribe


Tweets


"RT @Eva_Shaughnessy: #finedining @romomobilecafes restaurant this evening with #NewHair #winning #SaturdayNight #GirlsNightOut http://t.co/…"

@ashleyford 3 weeks ago

"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 1 month ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Getting started with Facebook Connect & News Feed

AshleyAshley

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

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 13
  • suc khoe
    Posted on

    suc khoe suc khoe

    Reply Author

    Bai viet kha thu vi


  • robertoferre
    Posted on

    robertoferre robertoferre

    Reply Author

    This webpage won’t render properly on my iphone4 – you may want to try and fix that


  • Pallavi
    Posted on

    Pallavi Pallavi

    Reply Author

    very nice n useful tutorial..!!Thanks..!!


  • Ivan Cipee Milovanović
    Posted on

    Ivan Cipee Milovanović Ivan Cipee Milovanović

    Reply Author

    Great article.


  • Web Designer Philippines
    Posted on

    Web Designer Philippines Web Designer Philippines

    Reply Author

    Nice tutorials.. thank you… this is what i need…


  • Kusut Fei
    Posted on

    Kusut Fei Kusut Fei

    Reply Author

    nice


  • Giovanny Luis
    Posted on

    Giovanny Luis Giovanny Luis

    Reply Author

    Hi!
    good tutorial 😀


  • Bryan
    Posted on

    Bryan Bryan

    Reply Author

    Great article.

    Can you explain the use of jquery in this example. What was your reason for using it?

    Thanks,

    Bryan


  • Dan Nascimbeni
    Posted on

    Dan Nascimbeni Dan Nascimbeni

    Reply Author

    This is great. Did you get a chance to test this in different browsers? Everything looks good in FireFox 3.5.3. Safari 4.0.3 shows an image not found placeholder above the Facebook connect button. IE 7 shows the same image not found placeholder, and doesn’t show the Facebook connect button at all.

    FYI


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @dan i’ve just installed the facebook connect wordpress plugin as im launching a new site design in the next few days, which may be interfering with the demo as its linked to the same account. All being well it should be sorted out soon with the site and demo functioning properly.


  • eshanne
    Posted on

    eshanne eshanne

    Reply Author

    kewl.. thanx mate.. maybe i’ll need this for my next project..

    But sometimes people didn’t want to do this, it’s not about a messsage but an apps in FB do you have any plugins that can run and play inside our blog using the FB Apps?

    Please tell me if you have one, thanx..