How can I like a facebook page in my cordova app?

Question

Actually I need to implement FB like in my cordova ios app. So I have included Cordova FB connect plugin in my cordova app. I have used the following code.

<div class="fb-like" data-href="https://www.facebook.com/testentertainer" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>

It is creating a like button and its nice. When I click on like button first time, It is popping up fb login page. After entering the credentials request is not coming back to my page. Its displaying white empty page and app is hanging there it self. If i reopen my app then i can like because I am already logged in. Now like and unlike functionalities are working but i am not able to get callback of those events.

I have tried following

FB.Event.subscribe('edge.create', function(href, widget) {
       console.log("in edge create");
       alert('You just liked the page!');
});
FB.Event.subscribe('edge.remove', function(href, widget) {
       alert('You just unliked the page!');
});

But Its not working.

FIDDLE

Answer 1

Is the Facebook login page is a popup or it opens the facebook app? if it is a popup you have to install InAppBrowser plugin first.

Answer 2

the same was happening with me and it is very annoying,seems like the fb snippet doesn't play well with the inappbroswer,however now without wasting any more time i am leveraging graph api, and since i am making an angular (and typescript also) app i had made a directive for Facebook like and handling events from there

 <facebook-like url="{{vm.currentUrl}}"></facebook-like>

directive template

 <div ng-switch="vm.likeStatus">
<div ng-switch-when="like" ng-click="vm.setLike(true)">

    <span class="fbLike"><img src="content/images/like.png" class="img-responsive"/></span>
</div>
<div ng-switch-when="unlike" >
    <span ng-click="vm.setLike(false)">

        <span class="fbLiked"><img src="content/images/liked.png" class="img-responsive" /></span>
    </span>

</div>
<div ng-switch-when="loading"><img src="content/images/loader.gif" class="img-responsive" /></div>
<div ng-switch-when="login" ng-click="vm.login()">login</div>
<div ng-switch-default></div>
</div>

directive definition

 namespace portal.directives {

export class facebookLike {

    constructor() {
        let directive: ng.IDirective = <ng.IDirective>{};
        directive.restrict = 'E';
        directive.scope = {
            url:"@"
        };
        directive.templateUrl = "views/directives/facebookLike.html";
        directive.controller = 'facebookLikeController';
        return directive;

      }
   }
}

directive controller

   namespace portal.controllers {

export class facebookLikeController {

    public likeStatus: string;
    public postId: string;
    public setLike = (value: boolean) => {
        this.likeStatus = "loading";

        if (value) {
            this.facebookService.setLike(this.$scope.url).then((postId) => {
                this.likeStatus = 'unlike';
                this.postId = postId;
            });
        }
        else {
            this.facebookService.setUnlike(this.postId).then(() => {
                this.likeStatus = 'like';
                this.postId = void 0;
            });
        }
    };
    public login = () => {
        this.userService.socialLogin(socialProviders.facebook).then(() => {
            this.$state.forceReload();
        });
    };

    static $inject = ['$element', '$scope', 'facebookService', 'userService', '$state','localStorageHandler'];
    constructor(public $element: JQuery, public $scope, public facebookService: services.facebookService, public userService: services.userService, public $state, localStorageHandler) {

        facebookService.isObjectLiked($scope.url).then((res) => {
            this.likeStatus = res ? 'unlike' : 'like'; // if object is like then show unlike button and vice versa
            this.postId = res;
        }, () => {
            //user is not logged in via facebook,may be via other carrier
            let tokenDetails: IUser = localStorageHandler.get(storageNames.socialLoginDetails);
            if (!tokenDetails)
                this.likeStatus = 'login';
            });

        $scope.vm = this;

     }
    }
 }

facebook service

   export class facebookService {

          public fireGraphApi = (endPoint, verb): ng.IPromise<any>=> {

        let config: IRequestConfig = {
            method: verb,
            url: "https://graph.facebook.com/v2.4/" + endPoint,
            showLoader: false
        }

        return this.$http(config).then((res: any) => {
            return res.data;
        });


    };

    get isUserLoggedIn(): ng.IPromise<any> {
        let tokenDetails: IUser = this.localStorageHandler.get(storageNames.socialLoginDetails);
        if (tokenDetails && tokenDetails.social_provider == socialProviders.facebook) {
            let url = "me?access_token=" + tokenDetails.access_token;
            return this.fireGraphApi(url, 'GET');
        }
        else
            return this.$q.reject();
    }

    public isObjectLiked = (objectUrl: string): ng.IPromise<any> => {
        let def = this.$q.defer();
        let tokenDetails: IUser = this.localStorageHandler.get(storageNames.socialLoginDetails);
        this.isUserLoggedIn.then(() => {
            //user is logged in 
            let url = "me/og.likes?access_token=" + tokenDetails.access_token + '&object=' + objectUrl;
            this.fireGraphApi(url, 'GET').then((res) => {
                if (res && res.data.length == 0) {
                    // not yet liked
                    def.resolve(void 0);
                }
                else {
                    //liked and show unlike button                     
                    def.resolve(res.data[0].id);
                }

            });
        }, () => {
            //rejected when user not logged in 
            def.reject();
        });

        return def.promise;
    };


    public setLike = (objectUrl: string): ng.IPromise<string> => {
        return this.isUserLoggedIn.then(() => {
            let url: string;
            let tokenDetails: IUser = this.localStorageHandler.get(storageNames.socialLoginDetails);
            url = "me/og.likes?access_token=" + tokenDetails.access_token + '&object=' + objectUrl;

            return this.fireGraphApi(url, 'POST').then((res) => {
                return res.id;
            });
        });
    };

    public setUnlike = (postId: string): ng.IPromise<any> => {
        return this.isUserLoggedIn.then(() => {
            let url: string;
            let tokenDetails: IUser = this.localStorageHandler.get(storageNames.socialLoginDetails);           
                url = postId + "?access_token=" + tokenDetails.access_token;

            return this.apiService.fireGraphApi(url, "DELETE").then((res) => {
                return res;
            });
        });
    }


    static $inject = ['$http', '$q', 'localStorageHandler', 'apiService'];
    constructor(public $http, public $q, public localStorageHandler: services.localStorageHandler, public apiService: services.apiService) {

        }
   }