The new Facebook app creation flow is really confusing.

For developers, to add a app as a tab to another page, you  need to user the following URL:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

next parameter should be your canvas page url.

Here you can see an option to add this app to your page.

As you all know recent changes in privacy issues made Facebook to change their basic API and added some security concerns. From my best practise, most of the old applications are safe, but you will be in trouble when you create new application. By default you cannot access user’s photos, profile pictures , albums etc. If you continue with old REST API, you may face this problem. You will get an empty array or json string when you call photos.getAlbums function.

If you test these functions from Facebook Console Tool:

http://developers.facebook.com/docs/reference/rest/photos.getAlbums

It returns real value when you select old applications and returns empty string [] if you select your newly created Facebook app.

To get all those support, you need to use new Graph API

But if you follow the same steps mentioned in that official document, you will still get this empty string problem. Because, in the basic authentication call, there is no permission type is mentioned. You can only see a basic message with Allow or Deny button.

According to that document, as the part of authentication, you need to call this url with your client id and redirect url and it returns an access_token after a #

https://graph.facebook.com/oauth/authorize?
    client_id=...&
    redirect_uri=http://www.example.com/oauth_redirect

You need to use this access_token to request all other functions, eg:

https://graph.facebook.com/me?access_token=...

This call will work for most of the requests except photos or albums. So the mistake in these calls are the permission.

Here is the correction:

https://graph.facebook.com/oauth/authorize?
    client_id=...&
    redirect_uri=http://www.example.com/oauth_redirect&perms=publish_stream,user_photos

Here we pass perms parameter to set different permission and if you use the access_token after this request , you can access user photos and albums. You can see another permission popup with album and photo access.

Here is the list of such extended permissions in Facebook.

This is the problem when you use new Javascript SDK for graph API, or when you try to integrate these API in PHP or PERL or any other Server side scripting language from the scratch.

If you use new Facebook PHP Graph SDK , you cannot get these problems, but there is still another hidden problem if you continue testing code by the example provided by them.

It is my next POST . See you at there

Thanks

Sajith

Like the old REST API, you don’t need to add 2-3 files for Facebook PHP SDK. The new graph api comes in a single file which is located at http://github.com/facebook/php-sdk/

Copy the facebook.php file in to your webroot and include this file in your php code.

require_once(‘facebook.php’);

To work fully functional, you need CURL and JSON installed in your server. To check this use phpinfo() function.

To make sure, these missing is the main problem, add  exit(‘Curl error’); just above the line   throw new Exception(‘Facebook needs the CURL PHP extension.’); in facebook.php file.

Same for JSON.

The Linux way of installing CURL is :

sudo apt-get install curl libcurl3 libcurl3-dev php5-curl

To install JSON in your linux machine, follow these steps:

1. pecl install json
2. Add json.ini file in /etc/php.d/
3. edit json.ini (in VI) and add this line: xtension=json.so
4. Save the file and restart appache (/etc/init.d/httpd restart)  or apache2 restart depends on your linux OS

See the example.php file in php-sdk from Github, if you call getSession function, you only get a NULL string if you are not logged in proper way. So I recommend to redirect into login page if there is no session available.

Here is the change:

if (! $facebook->getSession()) {

header(‘Location: ‘.$facebook->getLoginUrl());

}

Then try the rest of the part as per example.php , it will work

Good Luck

Sajith

I got this huge collection from this website. I am just rewriting that post here.

1) Facybox

Website here

2) Facebox

http://famspam.com/facebox

3) FCBKComplete

Go to webstie

4) Facebook style registration

Go to website

5) Gmail/Facebook style jQuery chat

Go to website

6) Facebook style comment using jQuery

Go to website

7) Facebook style auto complete

Go to website

Facebook style picture edit

Go to website

This is a quick note for myself to remember some tricks while we develop a Facebook application.

If you are a beginner in Facebook application development, go here first.

If  you an expert in Facebook development, go here.

The steps in creating a facebook app.

1) Register an application in facebook

2) Add Canvas URL

3) Add Canvas Callback url

4) Test the canvas is working or not

To execute FBML inside your code (for iframe), you must add FBConnect URL

You need to set xd_receiver.htm in your webroot folder

Download facebook php api

If you are using iframe, remember to use facebook-canvas url for links and forms , not your local url.

If you are using canvas mode, you cannot use body tag in your html. You dont need to keep the basic html layout

like head, title, body etc

An example page in the canvas_callback looks like this:

<?php

require_once(‘facebook.php’);

//ini_set (‘display_errors’, 1);

$appapikey = ’0d7c64e9a387eXXXXXXXXXXXXXXXXXXX’;

$appsecret = ’9fc9eef6dXXXXXXXXXXXXXXXXXXXXXXX’;

$facebook = new Facebook($appapikey, $appsecret);

?>

Sometimes , in IE and Safari, infinite redirect loop will happen. It is due to session problem

add the below code to solve this!

<?php

$prefix = ($_REQUEST['fb_sig_user']) ? ‘fb_sig’ : $appapikey;

if( isset($_REQUEST[$prefix.'_session_key']) ){

session_name( $_REQUEST[$prefix.'_session_key'] );

session_start();

$_SESSION['fb_user']        = $_REQUEST[$prefix.'_user'];

$_SESSION['fb_session_key'] = $_REQUEST[$prefix.'_session_key'];

$_SESSION['fb_expires']     = $_REQUEST[$prefix.'_expires'];

$_SESSION['fb_in_canvas']   = $_REQUEST[$prefix.'_in_canvas'];

$_SESSION['fb_time']        = $_REQUEST[$prefix.'_time'];

$_SESSION['fb_profile_update_time'] = $_REQUEST[$prefix.'_profile_update_time'];

$_SESSION['fb_api_key']     = $_REQUEST[$prefix.'_api_key'];

} else {

// Just so there *is* a session for times when there is no fb session

session_start();

}

?>

If you use iframe, remember to use this funcion as well

<?php

$facebook->require_frame();

?>

Also use the following function if you need authentication

$user_id = $facebook->require_login();

Don’t forget to add this in html tag (for iframe users)

<html xmlns=“http://www.w3.org/1999/xhtml” xmlns:fb=“http://www.facebook.com/2008/fbml”>

For facebook client side api (Javascript), include this line

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

For example, if you need to open a add to bookmark dialog on button click, use:

onclick=”FB.Connect.showBookmarkDialog();”

Add this line very bottom of the page, to avoid javascript error in some browsers (IE6 or 7 not sure)

<div id=“FB_HiddenIFrameContainer” style=“display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;”></div>

Sometimes, your application inside iframe shows scroll bar. It is due to dynamically increasing height or width of the content

use the below script at the bottom of the page.

<script type=“text/javascript”>

window.onload = function() {

FB_RequireFeatures(["XFBML", "Connect"], function() {

FB.init(“0d7c64e9a387XXXXXXXXXXXX”, ‘xd_receiver.htm’);

FB.CanvasClient.startTimerToSizeToContent();

FB.CanvasClient.syncUrl();

});

};

</script>

Look  inside the facebook api php file to know more about the functions. For example to get friends info

<?php

$friends = $facebook->api_client->friends_get(”,$user_id);

$friends_info = $facebook->api_client->users_getInfo(implode(‘,’, $friends), ‘first_name,last_name,pic_square ‘ );

?>

For ajax call inside your iframe, to avoid redirect loop, pass the full server query url along with your file.

<?=$_SERVER['QUERY_STRING']?>

eg:

$(‘#browse_ajax’).load(‘<?=$root_path?>browse_ajax.php?<?=$_SERVER['QUERY_STRING']?>’);

When you pass Query string, remember to replace your parameters passing via get method. Otherwise

you cannot pass yourown custom values

<?php

function get_query_string()

{

$serverQuery = $_SERVER['QUERY_STRING'];

$serverQuery=  str_replace(‘page=’, ‘page_=’, $serverQuery);

$serverQuery = str_replace(‘fan=’, ‘fan_=’, $serverQuery);

$serverQuery = str_replace(‘uid=’, ‘uid_=’, $serverQuery);

return $serverQuery;

}

?>

<?php

Use the below function for publish to wall option:

function publishWall()

{

var message = ‘type your message here’;

var attachment = { ‘name’: ‘your text here’, ‘href’: ‘http://urlhere.com/’, ‘description’: ‘Your message here’, ‘media’: [{ 'type': 'image', 'src': 'urlhere.com', 'href': 'urlhere.com'}] };

var action_links = [{'text':'More like this', 'href':'urlhere.com'}];

FB.Connect.streamPublish(message, attachment, action_links);

}

?>

If your organization / office blocked your favorite website, dont worry, we have a solution.

If you have your own website / server and ssh access to it, you can browse any website through that. All what you need is putty.exe (in windows).

See below the steps for that:

You need putty for this purpose. Download putty.exe from http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

(Read my previous post on putty here )

1) Open putty.exe

2) Enter your server’s ip address and ssh port. (Default is 22 )

3) In the Category tree (left), expand Connection , expans SSH and select Tunnels

4) Enter any source port (eg: 8888 or 7777 – avoid port less than 1000)

5) Select the dynamic radio button

6) Press Ok and login into your server via ssh.

Now your ssh with tunnel is ready.

Goto your browser .

If you are using moziila, take tools (from menu) > Options.

Advanced > Network options > Settings.

Select Manual Proxy settings.

Leave all the places blank . Enter Socks Host as 127.0.0.1 and port as we set earlier in putty’s tunnel settings (say 8888)

Press OK and browse. You are now browsing via your own server. Thus you bypassed your local system or LAN network. Thus you can access any websites which are blocked from your organization.

If you are using IE, follow the same instructions for proxy settings.

Now enjoy browsing with your favorite sites. cool na !!!

For any queris, mail me : admin@sajithmr.com