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.
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
2. Let’s start
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']);
<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:
And show faces:
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>