Whatever I’m writing this post to inform my friends and blog readers about my activity in 2011

1. I had been doing web application development job (part time) via oDesk for a US client. I worked almost 1 year for him. I used CodeIgniter framework, MySQL workbench, SpringLoops, and Twilio Communication Service API to integrate voice and sms in his project. We worked in a team and my role was managing the project and team, implementing API, make the web app structure, design database and deploy on server.
2. I joined in a Berkely based US company as a Sr. Software Engineer where my role was to manage and develop iOS application. But I left the job after 3 months. Its really tough to do job late at night, because there is a 12 hours difference between Bangladesh and US. So their morning is night in here.
3. In 2011, I was fully concentrated on Objective C, XCode and iOS applications development. That year was very successful for me. I learned many things of iOS game and application development. I learned Tile based game development, box2d physics engine based game development and all about cocos2d framework based 2D game development. My wife all time supported me by designing graphics for my games and apps and providing continuous support. I published some major updates of some of my apps. The success is all of my free iOS apps downloaded more than 1 Million times via all iTunes Store. And people updated my free apps more than 1.5 Million times. And the average feedback of my apps is 4.0 out of 5.0.The success was not come in a day. Sometimes I worked more than 16 hours in a day. And sometime I didn’t work any time
4. I also fully moved to github for all of my public code hosting.
5. I updated my bike from Bajaj Discover to Yamaha Fazer during the middle of the year 2011.
6. I was thinking to join for higher study, and thinking to move Malaysia for my MSc. I attended IELTS Academic Module exam and achieved Band 6.5 score(listning 6.5, Reading 6.5, Speaking 6.5 and Writing 5.5). I was little surprised for my writing score and I realized that my academic writing is not good, so I’ve to improve it more :S
7. Near the end of the year I updated my camera from Nikon D5000 to Canon 5D Mark II.
8. And I’m consulting with a professor in Malayisa and looking for opportunity to join any university to study MSc by Research.

I believe to spend time happily. And I all time try do that. And I’m very thankful to Allah (God) that he helped me by giving success.

In 2012, I still want to move Malaysia to complete my MSc by Research. Please pray for me. Additionally I’ll try to write more technical post in my blog. I’ve also some plan to develop some new iOS applications and games beside my part time Web application development job. I wish all of you a:

Happy New Year

2012

What’s the problem if a person like to share pre-populated text as his status message. I don’t know why they took the decision!!

So if you need to update user’s status using facebook iOS SDK you can do the following way:

Instead of using the below code

[facebook dialog:@"feed"
	 andParams:params
	 andDelegate:self];

Use the following solution

 [facebook requestWithGraphPath:@"me/feed"
        andParams:params
        andHttpMethod:@"POST"
        andDelegate:self];

Case:

1. We want to develop a facebook connect base website/application
2. We want to test everything in our laptop or local pc not on the remote server
3. Suppose we don’t have a dedicated IP address or any domain

I assume that you’re using mac (as I do), if you’re using linux or windows then you’ve to learn how to create virtual host in your local pc.

Solution:

Step 1:

To learn how to develop facebook connect base application checkout the following tutorial

1. PHP SDK 3.0 & Graph API base Facebook Connect Tutorial
2. New JavaScript SDK & OAuth 2.0 based FBConnect Tutorial

Step 2:

Create a virtual host in your pc. I’m using MAMP Pro its super easy for mac to create virtual host using this tool. I created a virtual host named fblatestphotos.com in my local pc. You’ve to also set the local folder where you’ll store file for this host. After successfully setup everything you’ve to click apply then the apache server will restart. Now I can browse http://fblatestphotos.com:8888/ successfully in my pc.

If you use other operating system or different tool please google and explore how to create virtual host in your local pc.

Step 3:

Now create a facebook application or use your old facebook application and change the setting. In the Site URL field set the local virtual hosting address, in my case it is http://fblatestphotos.com:8888/

Step 4:

Now follow step 1 and download any of the source code from the tutorials of Step 1, move the code in the local folder that you’re using as the virtual host folder. Then update the App ID and/or App Secret in the config file of the source code.

If you do everything successfully then you should able to test the application successfully in your local pc. And it saves lots of time as you’ll test locally. Additionally if you don’t have dedicated IP or domain you don’t have to worry as you could test application locally now. Hope it helps.

One thing I want to mention these codes are accepted but not the best optimized code. These codes were written by me during my student life so you can’t expect that also.

In my sharing code repository all the file names are the problem number from the University of Valladolid site. In valladolid site author statistics is down, you can’t see anyone’s statistics but fortunately i saved my statistics in 2007 and here it is.

To solve the situation you’ve to add open graph meta data in your site. Some days ago I manually added this in my blog’s theme, but later I decided to make a wordpress plugin so that it become easier to use and share with others.

My plugin features:

1. Automatically set facebook open graph meta data in your wordpress site
2. Open graph meta data will be dynamic based on post or page
3. In the admin panel you can provide AppId
4. In the admin panel you can provide facebook user id (admins)
5. You can set a default image that will be used when there is no image associated with a post or page
6. In the plugin admin page, you’ll see detailed specification to setup facebook app.

Plugin setting page

You will see detailed tutorial about how to set facebook application and retrieve the information in the plugin setting page.

If you activate this plugin you’ll see when people share or like your wordpress post or page, that will show nicely on their facebook walls. Thus user’s friends will be inspired to click the link.

After successfully installed the plugin and changed the html tag by yourself, if you view the source code of your blog page/post from browser you’ll notice the following things:
HTML tag is changed

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" dir="ltr" lang="en-US">

Open graph meta data added

<!-- Facebook Open Graph -->
<meta property="fb:app_id" content="XXXXXXXXXXX" />
<meta property="fb:admins" content="YYYYYYYYYYY" />
<meta property="og:url" content="http://thinkdiff.net/facebook/sharekit-must-have-ios-app-share-library/"/>
<meta property="og:site_name" content="Thinkdiff.net" />
<meta property="og:description" content="geeky stuff, facebook, twitter, linkedin, php, mysql, web development, tips and more" />

<meta property="og:type" content="website" />
<meta property="og:image" content="http://thinkdiff.net/image/thinkdiff.net_splash.jpg" />

Where XXX… and YYY… should be your app id and admin user id.

Hope this helps

We are using CodeIgniter’s built in session library and that is different than normal PHP’s session. We found that for each visit of the user, the server can’t track the session and regenerating new session id each time. Very weird situation for us. As we coded all over based on CodeIginter’s session library’s function so its not optimal solution for us to remove the codes and use PHP’s native session. Because in that case there is high possibility to generate new bugs. After lots of searching in the net at last we found a wrapper class for CodeIgniter.

This wrapper class is named Native session . It uses the same functions name like CodeIgniter’s Session class, but it used PHP’s native session on the back end. As our project is running on Dedicated Server so we are not worried about the session security. We replaced CodeIgniter’s Session class by this Native session  class and it solved our problem.

So if you’re facing this type of session related problem by using CodeIgniter’s Session library, you can use the  Native session library to fix the problem. Hope it helps.

In this tutorial I’ll explain:

1. Facebook Authentication Process
2. Facebook new JavaScript Usage
3. Facebook Connect Authentication
4. How to get extended permission to get more informations
5. How to use graph api
6. How to show stream publish prompt and share prompt
7. How to publish post in user’s wall using graph api
8. How to get additional information by FQL Query
9. How to set status using old legacy api (REST api) calling
10. How to show ajax loader when interactive with facebook

Before proceeding:

1.    Facebook Authentication Process

This is how facebook authorization process will work. We will follow this process in code.

2.    Facebook new JavaScript Usage

So in the figure you are seeing how authentication will work in your site. Now we will implement that. Firstly you’ve to setup a facebook application to get the application id. You can setup application from here. Or if you have already setup a facebook application then just copy the application id and replace with xxxxxxxxxxx. Remember oauth: true is new addition in this latest javascript sdk that enables your site for OAuth 2.0 authentication.

window.fbAsyncInit = function() {
        FB.init({ appId: 'Your_APP_ID',
            status: true,
            cookie: true,
            xfbml: true,
            oauth: true});

        showLoader(true);

        function updateButton(response) {
            button       =   document.getElementById('fb-auth');
            userInfo     =   document.getElementById('user-info');

            if (response.authResponse) {
                //user is already logged in and connected
                FB.api('/me', function(info) {
                    login(response, info);
                });

                button.onclick = function() {
                    FB.logout(function(response) {
                        logout(response);
                    });
                };
            } else {
                //user is not connected to your app or logged out
                button.innerHTML = 'Login';
                button.onclick = function() {
                    showLoader(true);
                    FB.login(function(response) {
                        if (response.authResponse) {
                            FB.api('/me', function(info) {
                                login(response, info);
                            });
                        } else {
                            //user cancelled login or did not grant authorization
                            showLoader(false);
                        }
                    }, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
                }
            }
        }

        // run once with current status and whenever the status changes
        FB.getLoginStatus(updateButton);
        FB.Event.subscribe('auth.statusChange', updateButton);
    };
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol
            + '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());

This is the most efficient way to load the javascript SDK in your web site. And in this way the sdk will load asynchronously so it does not block loading other elements of your page. Details of FB.init method.

And your html tag should be

<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">

3.    Facebook Connect Authentication

On the first part of the code you will see 2 Facebook api functions called

FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);

After loading the facebook javascript library, this method getLoginStatus() called and checked the user authentication status and it will send the response to updateButton() method.

FB.Event.subscribe() this method registered the auth.statusChange with facebook. That means if user successfully login or authorized your app or logout or cancel login process, it will trace that and call updateButton() method with the response. In this updateButton() method you’ll see the code of authentication that follows the first figure. In the full source code you’ll see 2 additional methods

    function login(response, info){
        if (response.authResponse) {
            var accessToken                                =   response.authResponse.accessToken;

            userInfo.innerHTML                             = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name
                + "<br /> Your Access Token: " + accessToken;
            button.innerHTML                               = 'Logout';
            showLoader(false);
            document.getElementById('other').style.display = "block";
        }
    }

    function logout(response){
        userInfo.innerHTML                             =   "";
        document.getElementById('debug').innerHTML     =   "";
        document.getElementById('other').style.display =   "none";
        showLoader(false);
    }

Those are called when user successfully login and authorized your app and when user logout.

4.    How to get extended permission to get more informations

On the first part of the code you’ll see the code that will run when user click login.

//user is not connected to your app or logged out
    button.innerHTML = 'Login';
    button.onclick = function() {
        showLoader(true);
        FB.login(function(response) {
            if (response.authResponse) {
                FB.api('/me', function(info) {
                    login(response, info);
                });
            } else {
                //user cancelled login or did not grant authorization
                showLoader(false);
            }
        }, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
    }

In this part you’ll see scope where you can provide extended permission parameters name. Don’t provide all permissions, only think which information you may need for your site. Here is details about permissions.

{scope:'email,user_birthday,status_update,publish_stream,user_about_me'}

5.    How to use graph api

In the new javascript sdk, the authentication code is only changed, everything else remains same. To fully understand graph api visit the link . Now i’ll show you, how to use graph api using javascript sdk. There is a method FB.api . Using this method you can call graph api.

FB.api('/me', function(response) {
  alert(response.name);
});

By calling this method it will show logged in user name. For another example check 7 number point.

6.    How to show stream publish prompt and share prompt

There is another javascript sdk method named FB.ui. Using the code you can prompt user for stream publish or share your page.

function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
        showLoader(true);
        FB.ui(
        {
            method: 'stream.publish',
            message: '',
            attachment: {
                name: name,
                caption: '',
                description: (description),
                href: hrefLink
            },
            action_links: [
                { text: hrefTitle, href: hrefLink }
            ],
            user_prompt_message: userPrompt
        },
        function(response) {
            showLoader(false);
        });

    }

    function share(){
        showLoader(true);
        var share = {
            method: 'stream.share',
            u: 'http://thinkdiff.net/'
        };

        FB.ui(share, function(response) {
            showLoader(false);
            console.log(response);
        });
    }

You’ve to provide parameters when you call streamPublish() method.

    function showStream(){
        FB.api('/me', function(response) {
            //console.log(response.id);
            streamPublish(response.name, 'I like the articles of Thinkdiff.net', 'hrefTitle', 'http://thinkdiff.net', "Share thinkdiff.net");
        });
    }

7.    How to publish post in user’s wall using graph api

In my demo you’ll see another customized method named graphStreamPublish(). This is also a graph api example.

function graphStreamPublish(){
        showLoader(true);

        FB.api('/me/feed', 'post',
        {
            message     : "I love thinkdiff.net for facebook app development tutorials",
            link        : 'http://ithinkdiff.net',
            picture     : 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
            name        : 'iOS Apps & Games',
            description : 'Checkout iOS apps and games from iThinkdiff.net. I found some of them are just awesome!'

        },
        function(response) {
            showLoader(false);

            if (!response || response.error) {
                alert('Error occured');
            } else {
                alert('Post ID: ' + response.id);
            }
        });
    }

This method uses FB.api() and does a HTTP POST request to http://graph.facebook.com/me/feed url with some parameters to publish a feed on user’s wall.

8.    How to get additional information by FQL Query

Facebook Query Language  enables you to use a SQL-style interface to query the data exposed by the Graph API. It provides for some advanced features not available in the Graph API, including batching multiple queries into a single call. Checkout the tables to know which data of facebook user you can retrieve. In the demo’s source code you’ll see

function fqlQuery(){
        showLoader(true);

        FB.api('/me', function(response) {
            showLoader(false);

            //http://developers.facebook.com/docs/reference/fql/user/
            var query       =  FB.Data.query('select name, profile_url, sex, pic_small from user where uid={0}', response.id);
            query.wait(function(rows) {
                document.getElementById('debug').innerHTML =
                    'FQL Information: '+  "<br />" +
                    'Your name: '      +  rows[0].name                                                            + "<br />" +
                    'Your Sex: '       +  (rows[0].sex!= undefined ? rows[0].sex : "")                            + "<br />" +
                    'Your Profile: '   +  "<a href='" + rows[0].profile_url + "'>" + rows[0].profile_url + "</a>" + "<br />" +
                    '<img src="'       +  rows[0].pic_small + '" alt="" />' + "<br />";
            });
        });
    }

9. How to set status using old legacy api (REST api) calling

You can still use the old legacy api. In my demo you’ll see a text box, write something and click ‘Status Set Using Legacy Api Call’ You’ll see your facebook status will update.

function setStatus(){
        showLoader(true);

        status1 = document.getElementById('status').value;
        FB.api(
        {
            method: 'status.set',
            status: status1
        },
        function(response) {
            if (response == 0){
                alert('Your facebook status not updated. Give Status Update Permission.');
            }
            else{
                alert('Your facebook status updated');
            }
            showLoader(false);
        }
    );
}

10. How to show ajax loader when interactive with facebook

In the source code you will see a method showLoader(), and you’ll see several places of the source code this method is called.

 function showLoader(status){
        if (status)
            document.getElementById('loader').style.display = 'block';
        else
            document.getElementById('loader').style.display = 'none';
    }

Full Source Code of this project. Or direct download from github

<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>New JavaScript SDK & OAuth 2.0 based FBConnect Tutorial | Thinkdiff.net</title>
        <!--
            @author: Mahmud Ahsan (http://mahmud.thinkdiff.net)
        -->
    </head>
    <body>
        <div id="fb-root"></div>
        <script type="text/javascript">
            var button;
            var userInfo;

            window.fbAsyncInit = function() {
                FB.init({ appId: 'YOUR_APP_ID',
                    status: true,
                    cookie: true,
                    xfbml: true,
                    oauth: true});

               showLoader(true);

               function updateButton(response) {
                    button       =   document.getElementById('fb-auth');
                    userInfo     =   document.getElementById('user-info');

                    if (response.authResponse) {
                        //user is already logged in and connected
                        FB.api('/me', function(info) {
                            login(response, info);
                        });

                        button.onclick = function() {
                            FB.logout(function(response) {
                                logout(response);
                            });
                        };
                    } else {
                        //user is not connected to your app or logged out
                        button.innerHTML = 'Login';
                        button.onclick = function() {
                            showLoader(true);
                            FB.login(function(response) {
                                if (response.authResponse) {
                                    FB.api('/me', function(info) {
                                        login(response, info);
                                    });
                                } else {
                                    //user cancelled login or did not grant authorization
                                    showLoader(false);
                                }
                            }, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
                        }
                    }
                }

                // run once with current status and whenever the status changes
                FB.getLoginStatus(updateButton);
                FB.Event.subscribe('auth.statusChange', updateButton);
            };
            (function() {
                var e = document.createElement('script'); e.async = true;
                e.src = document.location.protocol
                    + '//connect.facebook.net/en_US/all.js';
                document.getElementById('fb-root').appendChild(e);
            }());

            function login(response, info){
                if (response.authResponse) {
                    var accessToken                                 =   response.authResponse.accessToken;

                    userInfo.innerHTML                             = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name
                                                                     + "<br /> Your Access Token: " + accessToken;
                    button.innerHTML                               = 'Logout';
                    showLoader(false);
                    document.getElementById('other').style.display = "block";
                }
            }

            function logout(response){
                userInfo.innerHTML                             =   "";
                document.getElementById('debug').innerHTML     =   "";
                document.getElementById('other').style.display =   "none";
                showLoader(false);
            }

            //stream publish method
            function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
                showLoader(true);
                FB.ui(
                {
                    method: 'stream.publish',
                    message: '',
                    attachment: {
                        name: name,
                        caption: '',
                        description: (description),
                        href: hrefLink
                    },
                    action_links: [
                        { text: hrefTitle, href: hrefLink }
                    ],
                    user_prompt_message: userPrompt
                },
                function(response) {
                    showLoader(false);
                });

            }
            function showStream(){
                FB.api('/me', function(response) {
                    //console.log(response.id);
                    streamPublish(response.name, 'I like the articles of Thinkdiff.net', 'hrefTitle', 'http://thinkdiff.net', "Share thinkdiff.net");
                });
            }

            function share(){
                showLoader(true);
                var share = {
                    method: 'stream.share',
                    u: 'http://thinkdiff.net/'
                };

                FB.ui(share, function(response) {
                    showLoader(false);
                    console.log(response);
                });
            }

            function graphStreamPublish(){
                showLoader(true);

                FB.api('/me/feed', 'post',
                    {
                        message     : "I love thinkdiff.net for facebook app development tutorials",
                        link        : 'http://ithinkdiff.net',
                        picture     : 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
                        name        : 'iOS Apps & Games',
                        description : 'Checkout iOS apps and games from iThinkdiff.net. I found some of them are just awesome!'

                },
                function(response) {
                    showLoader(false);

                    if (!response || response.error) {
                        alert('Error occured');
                    } else {
                        alert('Post ID: ' + response.id);
                    }
                });
            }

            function fqlQuery(){
                showLoader(true);

                FB.api('/me', function(response) {
                    showLoader(false);

                    //http://developers.facebook.com/docs/reference/fql/user/
                    var query       =  FB.Data.query('select name, profile_url, sex, pic_small from user where uid={0}', response.id);
                    query.wait(function(rows) {
                       document.getElementById('debug').innerHTML =
                         'FQL Information: '+  "<br />" +
                         'Your name: '      +  rows[0].name                                                            + "<br />" +
                         'Your Sex: '       +  (rows[0].sex!= undefined ? rows[0].sex : "")                            + "<br />" +
                         'Your Profile: '   +  "<a href='" + rows[0].profile_url + "'>" + rows[0].profile_url + "</a>" + "<br />" +
                         '<img src="'       +  rows[0].pic_small + '" alt="" />' + "<br />";
                     });
                });
            }

            function setStatus(){
                showLoader(true);

                status1 = document.getElementById('status').value;
                FB.api(
                  {
                    method: 'status.set',
                    status: status1
                  },
                  function(response) {
                    if (response == 0){
                        alert('Your facebook status not updated. Give Status Update Permission.');
                    }
                    else{
                        alert('Your facebook status updated');
                    }
                    showLoader(false);
                  }
                );
            }

            function showLoader(status){
                if (status)
                    document.getElementById('loader').style.display = 'block';
                else
                    document.getElementById('loader').style.display = 'none';
            }

        </script>

        <h3>New JavaScript SDK & OAuth 2.0 based FBConnect Tutorial | Thinkdiff.net</h3>
        <button id="fb-auth">Login</button>
        <div id="loader" style="display:none">
            <img src="ajax-loader.gif" alt="loading" />
        </div>
        <br />
        <div id="user-info"></div>
        <br />
        <div id="debug"></div>

        <div id="other" style="display:none">
            <a href="#" onclick="showStream(); return false;">Publish Wall Post</a> |
            <a href="#" onclick="share(); return false;">Share With Your Friends</a> |
            <a href="#" onclick="graphStreamPublish(); return false;">Publish Stream Using Graph API</a> |
            <a href="#" onclick="fqlQuery(); return false;">FQL Query Example</a>

            <br />
            <textarea id="status" cols="50" rows="5">Write your status here and click 'Status Set Using Legacy Api Call'</textarea>
            <br />
            <a href="#" onclick="setStatus(); return false;">Status Set Using Legacy Api Call</a>
        </div>
    </body>
</html>

Additionally if you use PHP SDK 3.0 or this new way of javascript sdk to authenticate your site you can enable oAuth Migration in the application setting.

Hope it will help you to understand new javascript sdk.

I think every programmer should learn different languages and work in different platforms. You can ask me why? If you work on PHP backend development for 5 years, you will become an experienced guy and will earn better income.

So why you’ll invest your time for other language and other platform?
Because it will give you a good taste of programming and you’ll enjoy yourself. I’m not telling you to leave PHP development and move to other platform, I’m just telling you to make some extra time from your regular job and work in different platform or technology.

In my student life I learned and worked on the following languages:

C, C++

These were the first languages I learned in my student life. C is called the mother of all language. After learning C in the 2nd semester I learned C++. And I fall in love to the beauty of this language. I always submit ACM problem solutions using C++ and STL library of C++.

Java 2

In 5th semester I took this course in my study and I fall in love Java language also. I found many similarities between C++ and Java and most of the people told me that Java 2 actually copied OOP features from C++.

I was a fan of Java language in my student life, I still love Java but for last 3 years I didn’t work on any project of Java. I love Java so much that I read every page of “Java 2- The complete reference by Herbert Schildt and also “Java 2 How to program by Deitel & Deitel” in my student life . I also read 3~4 books about j2me in my student life. In 2007 I created my own site FTechdb.com to sell my developed j2me mobile phone applications and I earned a good revenue from there. In 2008 when I completed my B.Sc of Computer Science  & Engineering, nobody gave me a job for java. Even no once called me to interview for their company as a java developer.

2 of my popular j2me applications:

1. Smart Mobile Dictionary
2. Super FX-Ball  (clone of popular dx ball game)

C#

In my last semester 2007 my friend and me took a university project that we developed using C# language with related API. That was a SMS based desktop application. When we learned C# we found its completely copied the feature of Java with little twist. But whatever it gave us different taste of programming.

About my professional career:

PHP, MySQL, JavaScript, HTML, CSS

My professional career started as a web developer in 2008, my salary was 8000 BDT that means around 100 USD per month. I was not happy about that salary but I had no choice, because no one gave me better job. I interviewed some well known software company in Dhaka like “Tiger IT BD” but I was refused. Whatever, I took that small salary job and I was feeling a pressure to earn more. Why? Because I need good income to marry my lover. So I became very serious and was learning PHP, MySQL, JavaScript, HTML, CSS, CodeIgniter framework, jQuery library everything related to Web. And finally I took decision to participate Zend Certification exam, so I prepared myself and passed the exam May 5th, 2008 and became a Zend Certified Engineer.

I was 5th ZCE and youngest at that time in Bangladesh, so it impacts a recognizable value in my career, and I got a very good job with better salary in a Bangladeshi Company named Trippert Labs, Inc. I am also grateful to Hasin Hayder brother because he made this happen and gave me the opportunity to work with him. In late 2008 he joined another company named i2we, inc. and in December 2008 I also joined there by the reference of Hasin Hayder brother. And I worked with Hasin bro more than 2 years in i2we, inc. He is highly expert, experienced and real guru of web technology. I learned many things from him. By the way I married my lover in the middle of 2009

Help others to get help from God

I’m a muslim and I believe in Allah (HE IS God the one the most unique). I started my blog in the beginning of 2009 by the inspire of Hasin brother. My blog become very familiar for facebook related tutorials. Why? Because I work on facebook applications more than 2 years and I share my knowledge with others. So that people can follow my solution to solve their problem. I’m not regular in my writing but I wish to write regularly and now a days I’m not actively working on facebook. But still I try to share my knowledge with others.

Now what different ?

From 2009 I was involved part time freelancing via my blog and freelance sites. And I’ve a high profile in oDesk. My clients are happy because I’m honest and dedicated to work on their project. Never think client’s project as different rather think that project is your. Only then you can do best work and your client will become happy.

In late 2010, one day Trivuz bro showed me why Mac is better than windows. I suddenly felt I should use mac and develop iOS applications as I already inspired about iPhone. So I purchased MacBook Pro and iPod Touch and later iPad.

Objective C

At first I became afraid to see this language syntax. But I was studying and after some weeks I learned that language very well. Objective C is a beautiful language based on C. If you’re really a good programmer and know OOP well its a matter of time to expert on this language. By the way “nothing goes unpaid”. My j2me applications development experience helped me on iPhone applications development, C++ experience is helping me to work with Box2D physics engine to make 2D game.

I developed several applications using XCode, Objective C and also now I’m fascinated about 2D game development using Objective C based Cocos2D framework. My wife is helping me on the graphics design part of the iOS applications.  You’ll see all of my iOS applications and games from here iThinkdiff.net

3 of my popular iOS applications and 2 game:

1. Bengali Dictionary
2. Arabic Dictionary
3. Translator Free
4. Assumption (not so popular, it was my 2nd game)
5. Cubilus (my latest game)

What else?

I quit my regular job from i2we, inc. in December 2010. I still working as a part time freelancer  and currently working in a  startup web project, I’m the architect and lead developer of that project. Currently my hourly rate is around 23~30 USD per hour for web development. In rest of the time I work on my personal iOS applications. So I haven’t quit my web development job, I’m just making extra time to take different taste of programming on different platforms.

I’ve a plan to apply for immigrations in Australia, Canada or any well known country in near future. So I’m looking for job/sponsorship before I apply.

And I like my bike, I’m learning guitar by video tutorials and also I’ve some fascination about photography. I’m enjoying my life with my family, my friends and you (my blog readers). Thanks for reading my blog posts. You (blog readers) are my friend and you made my blog useful.

In this version of my code, I avoided javascript authentication, because that is cookie based and php sdk 3.0 has some conflicts with the old system. Facebook will also update the javascript sdk soon, so later you can use the login/logout system of javascript api with php sdk. But for now you should use fully php base authentication.

In this post you’ll learn:

1. How to integrate Facebook Connect in your website
2. How to generate Facebook Login / Logout URL
3. How to get extended permissions from users
4. How to call graph api
5. How to run FQL Query
6. Publish Wall Post using PHP
7. Publish Wall Post using Facebook Javascript API
8. Invite friends using Facebook Javascript API
9. No Facebook Javascript only use PHP SDK

Before proceeding:

For iFrame Base Facebook app checkout this tutorial

1. How to integrate Facebook Connect in your website

You have to create a facebook app and provide callback url. Checkout some screenshots of this article. If you unzip my downloaded code you’ll see these files (fig) where fbmain.php and index.php is coded by me. Then just copy the appid and secret key and paste them in the fbmain.php . I put all authentication and graph api code in fbmain.php and index.php is used for showing them, but remember index.php is the main file that you mention in your callback url . And this file includes fbmain.php at top.

//facebook application
    $fbconfig['appid' ]     = "";
    $fbconfig['secret']     = "";
    $fbconfig['baseurl']    = "";// "http://thinkdiff.net/demo/newfbconnect1/php/sdk3/index.php";

2. How to generate Facebook Login / Logout URL

In fbmain.php you’ll see

$loginUrl   = $facebook->getLoginUrl(
            array(
                'scope'         => 'email,offline_access,publish_stream,user_birthday,user_location,user_work_history,user_about_me,user_hometown',
                'redirect_uri'  => $fbconfig['baseurl']
            )
    );

    $logoutUrl  = $facebook->getLogoutUrl();

and in template.php you’ll see this code. This code shows user the login and logout url.

 <?php if (!$user) { ?>
        You've to login using FB Login Button to see api calling result.
        <a href="<?=$loginUrl?>">Facebook Login</a>
    <?php } else { ?>
        <a href="<?=$logoutUrl?>">Facebook Logout</a>
    <?php } ?>

To learn about authentication and $user please follow this tutorial

3. How to get extended permissions from users

You’ve to provide the extended permission at the time when you generate login url. And this is ‘scope’ where you’ll provide the extended permissions as a comma separated list.

$loginUrl   = $facebook->getLoginUrl(
            array(
                'scope'         => 'email,offline_access,publish_stream,user_birthday,user_location,user_work_history,user_about_me,user_hometown',
                'redirect_uri'  => $fbconfig['baseurl']
            )
    );

To know more about extended permissions visit facebook official documentation

4. How to call graph api

Its very simple. You’ll see below code in fbmain.php

       //get user basic description using graph api
        $userInfo           = $facebook->api("/$user");

        //Retriving movies those are user like using graph api
        try{
            $movies = $facebook->api("/$user/movies");
        }
        catch(Exception $o){
            d($o);
        }

To know more about graph api visit facebook official documentation

5. How to run FQL Query

In fbmain.php you’ll see below code

try{
            $fql    =   "select name, hometown_location, sex, pic_square from user where uid=" . $user;
            $param  =   array(
                'method'    => 'fql.query',
                'query'     => $fql,
                'callback'  => ''
            );
            $fqlResult   =   $facebook->api($param);
        }
        catch(Exception $o){
            d($o);
        }

To know more about FQL checkout facebook official documentation

6. Publish Wall Post using PHP

In fbmain.php you’ll see below code, if $_GET['publish'] is set then using php sdk and graph api the post will publish in user’s profile. You can write this code in separate php file and call via ajax to publish, in my example I use normal way to publish with no ajax. In the demo you’ll see Publish Post using PHP so click this link to publish in your wall.

if (isset($_GET['publish'])){
            try {
                $publishStream = $facebook->api("/$user/feed", 'post', array(
                    'message' => "I love thinkdiff.net for facebook app development tutorials.  ",
                    'link'    => 'http://ithinkdiff.net',
                    'picture' => 'http://thinkdiff.net/ithinkdiff.png',
                    'name'    => 'iOS Apps & Games',
                    'description'=> 'Checkout iOS apps and games from iThinkdiff.net. I found some of them are just awesome!'
                    )
                );
                //as $_GET['publish'] is set so remove it by redirecting user to the base url
            } catch (FacebookApiException $e) {
                d($e);
            }
        }

7. Publish Wall Post using Facebook Javascript API

In index.php you’ll see a javascript function

function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
                FB.ui({ method : 'feed',
                        message: userPrompt,
                        link   :  hrefLink,
                        caption:  hrefTitle,
                        picture: 'http://thinkdiff.net/ithinkdiff.png'
               });
               //http://developers.facebook.com/docs/reference/dialogs/feed/

            }

If you call this method, you’ll see a popup windows, that will prompt you to publish in your wall. In this case you don’t need any php.

8. Invite friends using Facebook Javascript API

Same as above in index.php you’ll see a javascript function. Just call this function to see a Request dialog.

function newInvite(){
                 var receiverUserIds = FB.ui({
                        method : 'apprequests',
                        message: 'Come on man checkout my applications. visit http://ithinkdiff.net',
                 },
                 function(receiverUserIds) {
                          console.log("IDS : " + receiverUserIds.request_ids);
                        }
                 );
                 //http://developers.facebook.com/docs/reference/dialogs/requests/
            }

9. No Facebook Javascript only use PHP SDK

If you don’t want to use any facebook javascript api, then remove all the javascript code from index.php and also remove below part

<div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
     <script type="text/javascript">
       FB.init({
         appId  : '<?=$fbconfig['appid']?>',
         status : true, // check login status
         cookie : true, // enable cookies to allow the server to access the session
         xfbml  : true  // parse XFBML
       });

     </script>

If you remove the above part facebook javascript will not work.

Hope this tutorial will help you to understand PHP SDK 3.0 and its usage properly.

At first I want to tell you that, this post is the updated version of my popular post Graph API & IFrame Base Facebook Application Development . So if you never saw that tutorial I request you to visit that and learn the basic things specially facebook application setup. Also on that post I mentioned some important things regarding iframe, so in this post I’ll not mention them again.

So in this updated post we will learn:

1. How to update facebook php sdk 3.0 library
2. Authentication
3. How to give extended permissions
4. How to call graph api
5. How to publish stream using facebook’s latest dialog system
6. How to request/invite your friends and track them

Before proceeding:

1. How to update facebook php sdk 3.0 library

First download Facebook’s php sdk and from the /src directory copy facebook.php, base_facebook.php and fb_ca_chain_bundle.crt to your project dir. Then download my codes from here, in this zip file you also get the php sdk libraries. Now click below image to know about the files functionality.

2. Authentication

In fbmain.php line number 23->77 you’ll see below code.

• At first we include the facebook.php library.
• Then we created a $facebook object
• Then we check if there is a valid session for user by  $user = $facebook->getUser();
• Then we generate login url with extended permission
• At line number 62 we call graph api $user_profile = $facebook->api(‘/me’);    to check if session is valid or not. If we get result then user’s session is valid otherwise we set $user = null that means expired or timeout session.
• If no valid $user found at line number 71 we redirect user to login/authentication page for our application.

$user            =   null; //facebook user uid
    try{
        include_once "facebook.php";
    }
    catch(Exception $o){
        echo '<pre>';
        print_r($o);
        echo '</pre>';
    }
    // Create our Application instance.
    $facebook = new Facebook(array(
      'appId'  => $fbconfig['appid'],
      'secret' => $fbconfig['secret'],
      'cookie' => true,
    ));

    //Facebook Authentication part
    $user       = $facebook->getUser();
    $loginUrl   = $facebook->getLoginUrl(
            array(
                'scope'         => 'email,publish_stream,user_birthday,user_location,user_work_history,user_about_me,user_hometown'
            )
    );

    if ($user) {
      try {
        // Proceed knowing you have a logged in user who's authenticated.
        $user_profile = $facebook->api('/me');
      } catch (FacebookApiException $e) {
        //you should use error_log($e); instead of printing the info on browser
        d($e);  // d is a debug function defined at the end of this file
        $user = null;
      }
    }

    if (!$user) {
        echo "<script type='text/javascript'>top.location.href = '$loginUrl';</script>";
        exit;
    }

After user successfully authenticated our application facebook will redirect user to our callback url that we provided in the developer application setting. Facebook additionally pass a parameter named code=XXXX . But as this is a iframe application that runs inside facebook so we used a special code at line number 16->19. This code checks if there is GET parameter code is defined or not, if its defined then it redirects user to the facebook app url.

if (isset($_GET['code'])){
        header("Location: " . $fbconfig['appBaseUrl']);
        exit;
    }

3. How to give extended permissions

When you’ll generate the login url you’ve to provide extended permissions here. Previously the parameter named was ‘req_perms’ and now its ‘scope’.

 $loginUrl   = $facebook->getLoginUrl(
            array(
                'scope'         => 'email,publish_stream,user_birthday,user_location,user_work_history,user_about_me,user_hometown'
            )
    );

Checkout extended permission list from here.

4. How to call graph api

In fbmain.php line number 76, you’ll see how I called the graph api. Here $user is facebook user’s UID. To know more about graph api visit this page

//get user basic description
    $userInfo           = $facebook->api("/$user");

5. How to publish stream using facebook’s latest dialog system

In template.php line number 50->54 you’ll see the facebook’s javascript function. To know more about feed please visit here.

FB.ui({ method : 'feed',
                        message: userPrompt,
                        link   :  hrefLink,
                        caption:  hrefTitle
                      });

6. How to request/invite your friends and track them

So you want your user will invite his friends to use this application, and also you want to track to whom your user sends request. Also you want to check if that user is come from via request or not. In demo application click Send Request/Send Invitation to check the request dialog. In template.php line number 88 you’ll see this function.

function newInvite(){
                 var receiverUserIds = FB.ui({
                        method : 'apprequests',
                        message: 'come on man checkout my application. visit http://thinkdiff.net',
                 },
                 function(receiverUserIds) {
                          console.log("IDS : " + receiverUserIds.request_ids);
                        }
                 );
                 //http://developers.facebook.com/docs/reference/dialogs/requests/
            }

This function show a invite dialog and if user selects friends and sends invite, then in the response you’ll get all of user’s friends UIDs as a comma separated string. So if you use Firebug in Firefox, you’ll see console.log(“IDS : ” + receiverUserIds.request_ids); will print IDS: XXXX in the console of firebug. So if you want to track the friends IDS who received invitation, then parse receiverUserIds and save them in your mysql database.

If a user authenticate your application from invitation then his URL would be

http://apps.facebook.com/[app_name]/?request_ids=012345678910

So in fbmain.php line number 23->26 you’ll see below code. I just blank them you’ve to write additional code for tracking user.

if (isset($_GET['request_ids'])){
        //user comes from invitation
        //track them if you need
    }

I hope this tutorial will help you for developing facebook application.