Web Technology Experts Notes

Showing posts with label Facebook. Show all posts

Tuesday 11 August 2015

How to logout from facebook with javascritp SDK - FB.logout

Following are code snippets to logout from Facebook:

<script>window.fbAsyncInit = function() {
                FB.init({
                    appId      : "FACEBOOK_APPLICATION_ID", 
                    status     : true, 
                    cookie     : true,
                    xfbml      : true,
                    oauth      : true                    
                });
                FB.getLoginStatus(function(response) {
                if (response && response.status === 'connected') {
                    FB.logout(function(response) {
                       /** Afer logout, Refresh the Page **/ 
                       console.log('Logout Successfully.');
                       document.getElementById('currentStatus').innerHTML='Logout from facebook Successfully.';
                       //document.location.href='/';
                       /** Afer logout, Refresh the Page **/                        

                    });
                }else{
                    //document.location.href='/';                    
                    document.getElementById('currentStatus').innerHTML='You are NOT LOGIN in Facebook.';
                    console.log('You are not login in Facebook.')
                }
            });


            }; 

            (function(d){
                var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
                js = d.createElement('script'); js.id = id; js.async = true;
                js.src = "//connect.facebook.net/en_US/all.js";
                d.getElementsByTagName('head')[0].appendChild(js);
            }(document));
        </script>
        <h2 id="currentStatus">
Please wait...</h2>

Tuesday 26 May 2015

Facebook SDK javascript - Facebook Login Check, Get Login Details, Share URL and POST to Profile

Add following javascript code which are Responsible for load javascript SDK.

window.fbAsyncInit = function() {
    FB.init({
        appId      : FB_APP_ID, 
        cookie     : true,
        xfbml      : true,                    
        version    : 'v2.3'
    });

}; 
(function(d){
    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));

Please don't forget to replace the "FB_APP_ID" with facebook API Id.

Add following javascript code which will leverage the functionality like Login check, login details, Share URL and Post to facebook.

function fbLogin(){
    FB.getLoginStatus(function(response) {
     if (response.status === 'connected') {
       console.log('You are login in FB.');
     }
     else {
       FB.login();
     }
   });

}
function fbLoginDetails(){                
    FB.api('/v2.2/me?fields=name,email,location,gender,birthday', function(response) {                   
        console.log(response.toSource());                    
    });
}

function fbShareURL(){
    FB.ui(
        {
         method: 'share',
         href: 'http://www.web-technology-experts-notes.in/2013/09/Facebook-Registration-Plugin-with-Custom-Fields.html'
       }, function(response){   }); 
}

function fbPostURL(){
    FB.ui({
        method: 'share_open_graph',
        action_type: 'og.likes',
        action_properties: JSON.stringify({
         object:'http://www.web-technology-experts-notes.in/2013/09/Facebook-Registration-Plugin-with-Custom-Fields.html',
        })
       }, function(){})

}

Add following HTML code which will create button on which click functionality will work.

<a class="button-facebook" href="javascript:fbLogin()">Facebook Login Check</a>
        <a class="button-facebook" href="javascript:fbLoginDetails()">Facebook Get Login Details</a>

        <a class="button-facebook" href="javascript:fbShareURL()">Facebook Share URL</a>
        <a class="button-facebook" href="javascript:fbPostURL()">Facebook POST URL</a>

Tuesday 19 May 2015

Facebook Login Integration - Multiple Facebook IDs for the same user[Solved]

I have facebook login integration in my website - Its working fine.

When Facebook user first time comes in website, I register the facebook user with my website and login him successfully.
When same Facebook user comes back and login to website, then i login him in my website because he is returning user and his entity is already in database.

How I was checking Returning OR New user.
1. When user register with website, facebook return following details.

Array
(
    [id] => 1421305244855173
    [first_name] => Arun
    [gender] => male
    [last_name] => Kumar
    [link] => https://www.facebook.com/app_scoped_user_id/1421305244855173/
    [locale] => en_US
    [name] => Arun Kumar
    [timezone] => 5.5
    [updated_time] => 2015-04-23T09:57:26+0000
    [verified] => false    
)

2. I add facebook Id(here Id is 1421305244855173), in my database along with other user details.
3. Login him successfully.
4. When same user come back in website, I check the "facebook Id" in database.
5. If "facebook Id" does not exist in database, create account and login him successfully [New facebook user].
6. If "facebook Id" exist in database, login him successfully [Returning facebook user].

I have login login integration from below links:
http://www.web-technology-experts-notes.in/2014/09/facebook-login-with-javascript-sdk-example.html

Now Problem:
If same user login from web application and android application.
It add two different records in database which is not expecting.
Expection is "It must have single records" in database.

My finding are below:
1) Facebook gives different "facebook id" when same user login from web application and login from "Android Application".
2) Facebook gives different "facebook Id" when user using different version of facebook APIs (V1 and V2).

Why this is happing:
When Facebook giving two different Ids for same facebook user, It means
One "facebook id" is "Global Ids"
Second one is "App Scoped ID"

For More details check: https://developers.facebook.com/docs/apps/changelog#v2_0_graph_api

Solution
You need "Mapping the same user across multiple apps" by doing this issue will be fixed.

For this, you need need to create "Business Manager Account" in facebook Apps.

How to create Business Manager Account:
https://developers.facebook.com/docs/apps/business-manager#create-business

After doing setup, you will be able to get the "token_for_business", which will be same for one user across all apps.
How to get token_for_business in javascript.

FB.api('/me?fields=token_for_business', function(response) {
    console.log(response);
});

For More Details: https://developers.facebook.com/docs/apps/for-business

Sunday 12 April 2015

Share count and Share URL of Facebook, Twitter, LinkedIn and Pinterest

Share count and Share URL of Facebook, Twitter, LinkedIn and Pininterest.

Share Count: There are different free api to get the share count of Facebook, Twitter, Linkedin and Pininterest. These number number of counts by all users.

Facebook Share (33)

http://graph.facebook.com/?id=http://www.web-technology-experts-notes.in

Response:

{
   "id": "http://www.web-technology-experts-notes.in",
   "shares": 33
}

Twitter Share (7)

https://share.yandex.ru/gpp.xml?url=http://www.web-technology-experts-notes.in

Response:

"20"

Linkedin Share (6)

 https://www.linkedin.com/countserv/count/share?format=json&url=http://www.web-technology-experts-notes.in

Response:

 {"count":6,"fCnt":"6","fCntPlusOne":"7","url":"http:\/\/www.web-technology-experts-notes.in"}

Pinterest Share (0)

 http://api.pinterest.com/v1/urls/count.json?callback=x&url=http://www.web-technology-experts-notes.in

Resonse:

 x({"url":"http://www.web-technology-experts-notes.in","count":0})

Share URL:Each Social Services (Facebook, Twitter, Linkedin and Pininterest), have its own sharing URL and its work on all global browsers.

Facebook Share (33)

http://www.facebook.com/sharer.php?u=http://www.web-technology-experts-notes.in

Twitter Share (7)

http://www.twitter.com/share?url=http://www.web-technology-experts-notes.in

Pinterest Share (0)

http://pinterest.com/pin/create/button/?media=http://www.web-technology-experts-notes.in

Linkedin Share (6)

http://www.linkedin.com/cws/share?url=http://www.web-technology-experts-notes.in

Share on Twitter with Custom Text

https://twitter.com/intent/tweet?text=this%20is%20custom%20text&url=web-technology-experts-notes.in

Share on Twitter with Custom Text and Via

https://twitter.com/intent/tweet?text=this%20is%20text&via=this_is_via&url=http://www.domain.com

Thursday 19 March 2015

Disable facebook notification popup after Click on Facebook Like Button

I use following code to show the "Facebook Like Button" in my Web Page.

Added following code in Header
<div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Added Following code where "show the Facebook Like Button"

<div class="fb-like" data-action="like" data-href="http://www.web-technology-experts-notes.in/2011/12/facebook-social-plugin.html" data-layout="standard" data-share="false" data-show-faces="true" style="height: 19px; overflow: hidden;"> </div>

When Someone click on "Facebook Like Button" It shows the following popup. See Below:

Now, I want to disable this facebook popup. Means, If someone click on "Facebook Like Button" I must not show the Popup.

Solution:
Replace the Following code

<div class="fb-like" data-action="like" data-href="http://www.web-technology-experts-notes.in/2011/12/facebook-social-plugin.html" data-layout="standard" data-share="false" data-show-faces="true"> </div> With <div class="fb-like" data-action="like" data-href="http://www.web-technology-experts-notes.in/2011/12/facebook-social-plugin.html" data-layout="standard" data-share="false" data-show-faces="true" style="height: 19px; overflow: hidden;"> </div>

Note: you can increase/decrease the height as per design.