Make your Facebook App : part 2 12

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 .