Search code examples
facebookcordovafacebook-likephonegap-build

Facebook Like button + Phonegap


I'm trying to use Facebook Like button in my Phonegap (HTML + JS) app, but it doesn't work.

If I test it in the browser (local test), the button appears.

But when I build it with Phonegap BUild and run it in my smartphone, the button is not showed.

I'm using the code below:

<div class="fb-like" data-href="https://www.facebook.com/pages/Save-Points/293951217439051" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

Solution

  • The current way to implement the like action is by using the open graph object og.like - FB's documentation here. It's important to note that this method requires the publish_actions permission from the user. It's a bit of work to get this all running smoothly, but it is possible.

    The phonegap-facebook-plugin has provided a guide here. Below are the instructions with some of my comments:

    • Your like button must not be the same (graphically) as the Facebook like button

    This means no "thumbs up" symbol - quite a frustration!

    • When you display your page / button you have to call the getLoginStatus method first to know if the current user is connected to its Facebook account. If he is connected then call GET https://graph.facebook.com/me/og.likes?access_token=FB_ACCESS_TOKEN&object=URL_TO_LIKE with the Facebook Access Token returned by the g3. etAccessToken method (if this returns data then style your like button with a red heart for example, a grey heart if the call returns an empty array).

    Along with checking a user is logged in, to reiterate you must check your app has publish_actions permission for the user. Though you could possibly request this upon the Like action.

    Also, the array is in the data property of the response object. If you're checking as to whether the user has liked this URL, you'll basically want to check response.data.length > 0.

    After doing this, the URL has been successfully liked by the user, and now the GET method will return an array with one object. Calling this when the user already has liked the URL will result in an error.

    The unlike (DELETE) method is different to the rest - it's not based off /me, and instead of filtering via URL, you use the like id. You'll likely have to call the previously described GET method to get the ID (do response.data[0].id).