Make your Facebook App : part 2 13

Make sure you have read our Previous tutorial . In this tutorial we will learn how to upload photo on user’s profile, send app invitation and about user permission. We will use facebook php sdk 3.0 for app development.

copy facebook.php, base_facebook.php and fb_ca_chain_bundle.crt from downloaded source to your project directory.

Download Source               App Demo

mandatory files in your project

Step 1:

we don’t  have to touch base_facebook.php and facebook.php.  Open fbmain.php file. In the first two lines you have to enter your app id and app secret key. Thereafter  enter the base url which will be url of your project folder. If I am building app in fb/fb_app folder, then base url would resemble the below code.  Appbaseurl  would be apps.facebook.com/your_app_namespace.  If your name space is test_app then appbaseurl  would look like in code.


$fbconfig['appid' ] = "408461052529777";

$fbconfig['secret'] = "7e0**********************359";

$fbconfig['baseUrl']    =   "  ";// "http://mydomain.com/fb/fb_app";

$fbconfig['appBaseUrl'] =   "  ";// "http://apps.facebook.com/your_app_namespace";

Step 2:

Now jump to line 50 . these line of code would be required for user’s permission. Facebook ask for permissions for every action like for photo upload, for status update etc. our first app will require permissions for photo upload . for more detail check developer permissions page.


$loginUrl   = $facebook->getLoginUrl(
array(
'scope'     => 'publish_stream,read_stream,user_status,user_photos'
)
);

Step 3:  

Now open index.php file.  First line includes fbmain.php . this line is necessary cause it have facebook objects are defined in it. Next few lines will include css files (not necessary). Line no 90 and 91 include html code for publish button and send invitation button.

Next we write some ajax code with help for jquery. Code will bind click event listener with both buttons.

When user click on publish button a post request would be sent to upload.php .


$.ajax({

type: "POST",

url: "upload.php"

success: function(msg){

$("#ur_pic_uploaded").append("Thanks for support ");

},

error: function(msg){

alert(msg);

}

});

});

When user clicks send invitation newInvite() function would be called. Mention your app id and the message which you want to sent to users with your invitation.


function newInvite(){

FB.init({

appId:'408461052529777', cookie:true,

status:true, xfbml:true

});

FB.ui({

method : 'apprequests',

message: 'check out my first app https://apps.facebook.com/testingfirstfbapp/',

})

}

Step 4:

Open upload.php . check following line. You have to include this line ,otherwise you will be going to have error (or not) from facebook.


$facebook->setFileUploadSupport(true);

Edit your message which will be displayed with your image on your profile. On line no 5 in place temp/logo.jpg enter location of image generated by your app on your server.


$args = array(

'message' => 'check my first app @  https://apps.facebook.com/testingfirstfbapp/',

'image'   => '@' . realpath("temp/logo.png")

);
$facebook->api('/me/photos', 'post', $args);

remember to include following javascript files in code . first one is for facebook javascript support for sending invitations. Second file is for jquery support.

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

In the Next tutorial we will discuss how to tag friends in photo.

That’s all for your first app. launch your first app with fingers crossed. drop comments if you got any errors or query .

  • http://www.facebook.com/profile.php?id=100003960203278 Sanjay Nagar

    nice tutorial

  • bhalendu sharma

    hey … wat if i have to tag multiple users to pic

  • admin

    @google-6396dfc0fa39f9f6e2e2baf60cfb3ca7:disqus  i’ll post tutorial on tagging soon

  • Pingback: make your facebook app with tagging users | techgigs technology blog,latest technology updates,daily how-to,tips and tricks

  • Pingback: facebook query language tutorial | techgigs technology blog,latest technology updates,daily how-to

  • James

    Hi – I have created an app using this code… it works well but then it stops working and I get this error:

    [error] => Array
    (
    [message] => An active access token must be used to query information about the current user.
    [type] => OAuthException
    => 2500
    )

    Any ideas?

    • http://techgigs.in/ pawan maurya

      @acaa94d7145fe45e27dfb6c003551ff3:disqus it looks like access token is expired. Access tokens work for short time time only. Try to authorize app again and comment if you still got error

      • James

        Thanks for your reply. I have tried to create a totally new application and still getting this error.

        Also getting this error from your actual demo app… really strange… Can you confirm that your app is still functioning?

        Thanks

        James

        • http://techgigs.in/ pawan maurya

          demo app is working fine from here

          • James

            ok thanks… i’ve tried it from another computer with a different FB account and still can’t get it working… really odd.

            Thanks for your help anyway.

          • http://techgigs.in/ pawan maurya

            Well, i can’t find a reasonable answer for behavior of app. Please post solution if you find any… i’ll try here meanwhile

  • Pingback: Sook Asner

  • Rahul Jain

    hey i got this error lease help
    An error occurred during a connection to linkprovider.in.

    SSL received a record that exceeded the maximum permissible length.

    (Error code: ssl_error_rx_record_too_long)

Join The Geek Side

Recommend on Google