Using Facebook API with AngularJs app - Part 1

Integrating social network authentication and features into web sites are very common nowadays. There are growing number of web applications here and there providing their services via social network authentication protocols.

In another post I explained details of creating AngularJs module to integrate Facebook Api into your web applications.

Here I create a sample Facebook App and explain how one can actually use that library in a live example. This means you can see the actual code in work here and login and and post/share into your Facebook account using this app. This is not going to be very sophisticated and fancy application but quite explanatory to show some common use cases of Facebook Api using fast growing and power full Javascript framework AngularJs.

In this part I’m going to cover Like/Recommend buttons.

1. Before you start

Before starting to write any application using Facebook oAuth and Graph API you need to register a Facebook app here. you will need a Facebook app id. I did create one for sake of this article.

So, whenever you see <app-id> it means you must replace that with your actual Facebook App ID, when developing your application. Facebook App ID is not something secret so it worthless to say you can sue in in Javascript applications.

Another thing I would like to mention is that, this sample application is only uses Facebook Javascript API, other languages like PHP, Python are out of scope of this article.

2. Let’s start

Before you continue to read this article make sure you’ve already been through my other post AngularJs Facebook integration how to if you are not. That article explains how to create an AngularJs modules that encapsulates Facebook Api and make it kind of Angular Friendly.You can get the module Javascript file from here. I’m going to use the exact file from same repository.I include those two lines in order to use Facebook and AngularJs API.

3. Basic Angular App setup

The code snippet which will be provided shortly, is a very basic AngularJs application setup and initializing aforementioned Facebook module.

var app = angular.module ('myFacebookApp', ['bnx.module.facebook']);

And we need this HTML snippet somewhere in our document body. This directive is actually loads Facebook Javascripts SDK.

<div ng-app="myFacebookApp">
    <facebook app-id="<app-id>"></facebook>
</div>

We are done! Very simple :) Now we have initialized Facebook API and it’s ready to be used.

4. Like button

Let’s create a Like button, right here. The only thing that we need to do is adding this HTML code somewhere between your Angular app tags.

Voila, do you see Like button just above this line? Click to like this page! Now let's try another type of like button and also recommend button:

    <facebook-like layout="button_count"></facebook-like>
    <facebook-like layout="recommend"></facebook-like>
    

The other button type is share:

<facebook-like share=true></facebook-like>
    

 

And show faces:

<facebook-like show-faces=true></facebook-like>

Continue to second part ...

In part two we will see how we can integrate Facebook login feature in our Angular app. Keep in touch. In the mean time you can leave your comments or suggestion.

</div>

Twitter  facebook  Google+