Today we will tackle a very interesting way to integrate your Facebook account with your WordPress account, without the need to register separately on WordPress. You might ask as to why we need to do it. We see Facebook integration a lot these days, and there are multiple plugins available on WordPress like Simple Facebook Connect, which do the same. However, they add another step, i.e, you need to register on WordPress once, even after you connect from Facebook. I personally feel that this hampers the user experience a little bit, and I want to circumvent this situation by using the Facebook details to register a user on WordPress. At a later stage, we can use these details to log him in.

For the purpose of this tutorial, we will be using the Facebook JS SDK, in conjunction with the AJAX support in WordPress. We will be using Action Hooks provided by WordPress to do everything in our code. So, let’s take a look at what needs to be done.

Initializing the Facebook JS SDK

The first logical step to integrate Facebook is to initialize the Facebook JS SDK. You will need to create a Facebook app first, and when you get the API key from your application page, you can use those to asynchronously initialize the Facebook API. For this tutorial, we will be using native AJAX, but the WordPress

So, you can write the following in your header, or wherever you plan to put the login button.

First, we need to initialize FB JS SDK in our page.

<div id="fb-root"></div>
<script>
        window.fbAsyncInit = function() {
            FB.init({
                appId  : 'YOUR_APP_ID',
                status : true,
                cookie : true
            });   
        };
        (function() {
            var e = document.createElement('script');
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        }());

</script>

Here, we would need an empty container for FB to integrate its SDK into.

Making the AJAX call

The next step would to create a link which will trigger the process.

<a href="#" id="fbLogin">Login with Facebook</a>

Now, we will see the logic of the trigger itself. There can be 2 scenarios here.

• The user is already logged into Facebook, and has authorized the app.
• The user is either not logged into Facebook, or has not authorized the app, or both.

We will handle both cases in our code. The flow of the code is as follows.

• Get the current login status from Facebook using 

  FB.getLoginStatus()

• If the response comes with status other than connected, call

  FB.login()

    with permissions for email. This email will be used for WP registration.
• Once the user logs in, replace the original response with the new response, and trigger the click again.
• Call

  FB.api()

    for the user, and prepare the data to be sent for registration/login.
• Make the AJAX call, and if it succeeds, refresh the page.

Here’s how the code would look.

<script>
        $('#fbLogin').click(function() {
            FB.getLoginStatus(function(response){
                if(response.status !== 'connected') {
                    //console.log(response.authResponse);
                    FB.login(function(fbresponse) {
                        //console.log(response.authResponse);              
                        if(fbresponse.status=="connected") {
                            response = fbresponse;
                            $('#fbLogin').click();
                        }
                    }, {scope: 'email'});
                }
                if(!response.authResponse) {
                    return;
                }
                FB.api('/me', function(resp) {
                    var data = {
                        authResp : response.authResponse,
                        userResp : resp
                    };
                    //console.log(data);
                    jQuery.ajax({
                        method : 'GET',
                        url : '<?php bloginfo('template_directory'); ?>/checkFB.php?callback=?',
                        data : data,
                        dataType : 'jsonp',
                        jsonpCallback : 'reply',
                        contentType : 'application/json',
                        success : function(resp) {
                        //console.log(resp);
                            if(resp.status == "Success")
                                window.location.reload();
                            else
                                console.log(resp.errors);
                        },
                        error : function(e) {
                            console.log(e);
                        }
                    });
                });        
            });
        });
</script>

Processing the AJAX call

As you would have noticed in my code, I have sent the AJAX request to a file called checkFB.php. What we need to do there is again a multi-case scenario. Let’s look at the possible cases before seeing how the code will look.

• Case 1 : The user is registering with Facebook and does not have an existing WP account. In this case, we will simply register him using the details from the Facebook response.
• Case 2 : The user is registering with Facebook, but already is registered with WordPress. We will determine it by checking the WP email against his Facebook email. If they match, we will create a meta field for the WP account.
• Case 2a : The user is registered in WP, is trying to register with Facebook, but has another Facebook account attached with his original WordPress account. In this case, we will give him an error.
• Case 3 : The user is registered with Facebook and with WordPress as well. Just log him in.

As for the process, we will be using

wp_set_auth_cookie()

Here’s how the checkFB.php looks.

<?php
//includes
require_once('../../../wp-load.php');
require_once('../../../wp-config.php');

/*
$_REQUEST is sent with 2 arrays. We will retrieve the ID and then start checking.
*/
$login = $_REQUEST['userResp']['id'];

//Check if the username exists already
$id = username_exists($login);
$errors = array();

//Case 1 : When the ID doesn't exist.
if(!$id) {
    $email = $_REQUEST['userResp']['email'];
    $existingID = email_exists($email);
    //Case 1 confirmed : If the email also does not exist, we can proceed with registration.
    if(!$existingID) {
        $pass = wp_generate_password( $length=12, $include_standard_special_chars=false );
        $userData = array();
        $userData['user_login'] = $login;
        $userData['user_email'] = $email;
        $userData['user_password'] = $pass;
        $userData['user_nicename'] = $_REQUEST['userResp']['first_name'] .' '. $_REQUEST['userResp']['last_name'];
        $userData['first_name'] = $_REQUEST['userResp']['first_name'];
        $userData['last_name'] = $_REQUEST['userResp']['last_name'];
        $insertStatus = wp_insert_user($userData);
        if(is_wp_error($insertStatus)) {
            $errors = array_merge($errors, $insertStatus->getErrorMessages());
        }
        else {
            wp_set_auth_cookie($insertStatus, true);
        }

    }
    //Case 2 : When the email ID the user has attached to his FB account is also registered here.
    else{
        $userFB = get_user_meta($existingID, 'fbid', true);
        //if a user is already attached to the email.
        if(!empty($userFB)) {
            //Case 2a : Here we match the Facebook ID of the user to the facebook ID of the email ID.
            if($userFB == $login)
                wp_set_auth_cookie($existingID, true);
            else {
                array_push($errors, __("Another Facebook ID seems to be attached to your account. Please check."));
            }
        }
        //Create the link between the user's email ID and the facebook ID for the first time, and log him in.
        else {
            if(!add_user_meta($existingID, 'fbid', $login, true)) {
                array_push($errors, __("Sorry! We were unable to link your FB account to your Webinstitute account."));
            }
            else {
                wp_set_auth_cookie($existingID, true);
            }
        }
    }
}

//Case 3 : When the user is already registered
else {
    wp_set_auth_cookie($id, true);
}

$resp = array();
if(!count($errors)) {
    $resp['status'] = "Success";
    $resp['loggedIn'] = true;
    $resp['errors'] = $errors;
}
else {
    $resp['status'] = "Failure";
    $resp['loggedIn'] = false;
    $resp['errors'] = $errors;
}
echo "reply(".json_encode($resp).")";

?>

Finally, the response will be sent, and if there are any errors, they will be logged in the console for now. However, the errors may be processed in any way you want.

I hope this tutorial helps you in Facebook integration with WordPress.

How such sites differ from other sites

While you read this analysis, you must understand, that the sites analyzed in this post are largely those that allow people to create content on them. These are different from brochure style business websites and require the users to sign up before they can do much.

Facebook

Now, to begin, let’s take a look at facebook:

This is the facebook home page as on Firefox. Note that the way it appears keeps varying from time to time and from browser to browser. But one thing remains constant. The part on the right hand side of the page. At the top we have a place for logging in and in the middle towards right, we have a sign up form. On left, there is explanation about what the site is about. There are 2 advantages to this:

1. Almost no graphic or video means that the page loads super quickly. 
2. Whether you want to sign up or login, you do not need to click even once on some link. Both the forms are very much open and you can either fill up the registration form to sign up or fill up the login form to enter site.  This makes the process very very quick.
3. There is simply nothing else on the home page for you to discover. This will compel you to sign up on facebook to discover what’s inside. Personally, I think this is a wonderful strategy and has probably helped facebook get more sign ups than any other website.

Gmail

Now let’s take a look at gmail

Some points which immediately come to mind are as follows:

1. The overall page design in terms of structure is very similar to that of facebook. 
2. You need to look for 3 seconds to find out how to sign up.
3. You need to click at least once in order to sign up.
4. There are a couple of distractions on the left which serve little purpose on a desktop computer.
5. If you click on any of these distractions (ie the Android Play Store link or the App Store Link), it is difficult for you to come back to this page.
6. The sign up form is also pretty lengthy. Ideally, it should be divided into 2 pages.

Twitter

Now here’s the home page of twitter. For all practical purposes, it is similar to facebook with an even easier signing up process.

Outlook and Quora

Now I do not wish to repeat myself, but if you’ll take a look at outlook.com and quora.com, you will find the same design pattern here:

From these observations, it becomes very clear that all the top sites which are offering any sort of profile management or related activities to users, want them to sign up at the home page itself in as little time as possible. Now one might argue that all the above sites are well established players which is why they don’t have to explain themselves a lot. Since almost everyone already knows about them, they can get away with not highlighting what they are about very explicitly! That observation may well be correct as we do have another category of websites. These are sites which allow you to explore a lot of content without signing up but when you want to explore, say, some extra features, you may be required to register. Primarily, you may be allowed to consume some limited content but when it comes to actually creating any type of content, you will be required to sign up. Perfect example is stackoverflow.com The content is 100% free to consume but if you want to create content (such as asking or answering questions), you will need to first sign up before you are able to do that.

Stackoverflow

Take a look at the home page of stackoverflow:

Now here are even more observations:

1. Even though websites like twitter or facebook do not show anything on their homepage, a lot of their content can still be accessed without actually signing up. This helps in the search engine optimization of the website also.
2. If signing up users is not your primary mission, you can first show users what your site has to offer and engage them immediately.
3. Stress should be laid on signing up when you are going to keep the user engaged in your site and your site is more interactive where the user himself is likely to use their keyboard a lot (and not just clicking on links). In most cases mentioned above, the sites which usually compel the user to sign up on the home page itself have some sort of activities for the user to do. For example: asking a question, doing status updates or sending emails.
4.  It will be silly to ask your users to sign up if you do not require the user to use their keyboard a lot. For example, if we talk about ebay, you must show your consumer what you have to offer. Otherwise, it will be difficult to sign him up.

To conclude, if you have a site which you feel is going to keep the user engaged, then by all means you should focus on signing them up first of all and keep things as clean and minimal as possible.

So what exactly is Web RTC?

Web RTC stands for Web Real Time Communications. In simple language, it is the system which will in very near future (read this year itself) allow you to create HTML 5 based video chatting and screen sharing systems of your own.
While it is still possible to do that with some effort, as of now, it really wont be easy to make it your bitch for the time being although some people have done some great work. Some of the things which will be possible to do using Web RTC are as follows:

1. Screen Sharing on LAN networks.
2. Video chatting integrated within your website.
3. Private Video Conferencing without using 3rd party tools.
4. When mobiles start supporting this, you will be able to build your own skype.

We are currently experimenting and trying to develop some awesome shit in Web RTC and if you want to join us in creating some innovative products, please do write to us at info@webinstitute.in

Our basic tutorial on webRTC will come within 2 weeks time.

eCommerce is the new fad, and it’s going to continue growing. Look at the success of Flipkart, Myntra et al. The trend of eCommerce is going to last for the foreseeable future, so take advantage of it while you can. The main idea behind eCommerce is establishing a supply-chain, wherein, you buy things from wholesalers or vendors, and you sell them ahead to the customers. Some people would call you the middleman, but I would call you a facilitator.

Some stores also give an option to customize the items that they sell, and that can also be used as the USP of your portal. These are signs of evolution of the market. People want more options now, and they will flock to whoever provides them with those options.

Here are a few innovative eCommerce based ventures.

• Sell T-Shirts Online: There is this guy in NSIT Delhi. I don’t know his name personally but he has created a website that sells custom T-Shirts. (I believe it’s called TSort but I could be wrong). And I have heard he’s doing really well. He chose a niche, which was his own college and now he’s expanding. You can start a similar venture yourself. All you need to do is find a vendor who prints T-Shirts.
• You can also start an online food venture. I got this idea from a guy in Tamil Nadu and thought it was really great. Basically, he’s going to target non professional cooks who are really awesome at creating some particular dish and then selling it online. You can start by selling stuff online by people you know. Ask a few housewives in your neighbourhood.
• Online bookstore for semester books is always an ever green idea to work on. But it needs to be done well. You can be a great player throughout India also if you do your job properly. This one is open market, meaning the idea is there, but no noticeable implementation. So, grab the opportunity with both hands and run with it!

Finally, an eCommerce site is for selling anything. You only need to decide what you want to sell, and then harness the power of the web to sell it.

Who is this course meant for?

This course is for anyone who wants to build a strong career in open source web industry and wants to get placed in a good company. The course modules have been designed keeping in mind the most in demand industry requirements. In addition, 1 module related to soft skills has also been made a part of the program so that this course now gives you the maximum benefit. No prior programming background is necessary to attend this course!
This course is for serious people who wish to bag a great job in the web industry or start their own web enabled business.

Teaching Methodology

We give little to no notes and we talk very little during classes. Most of the times, you will be busy building something on your computer in the classroom. Either solving a problem or doing an assignment. The following videos might give you some idea about how things go typically in our workshops.

How to register?

All payments need to be made in advance. You have several options to make these payments.
You can pay online (see red link below) or make cash payment. Call 868668698 (Eswar Naidu)

Syllabus to be Covered

We did a good amount of research and revised our syllabus to make it more relevant keeping in mind the industrial demands as reflected on various job sites. The best topics have been included for maximum benefit. The focus of the classroom is getting the participants a great job!

Questions or Doubts? Leave them in the comments section.
You can register for the webinstitute.in program online or pay by cash or check. The registration fee is Rs 3600/- (if paid through credit card).

In case, you do not wish to pay online, you can transfer the amount Rs 3500 directly in our bank account,

and after transfering, please call +91-9818666217 or email me to confirm the same.