<commit_before>---
layout: post
title:  Using Facebook API with AngularJs app - Part 2
---

[<img class="size-medium wp-image-845 aligncenter" title="AngularJS Facebook" alt="Facebook API with AngularJs app" src="http://www.boynux.com/wp-content/uploads/2014/03/angularjs-facebook-300x120.png" width="300" height="120" />][1]

Hi, This is the second part of "Facebook API with AngularJs app". If you haven't read the [first part][2] yet, I suggest you to read that first. 

## 1. Initial setup

You can find explanations in the <a href="http://www.boynux.com/facebook-api-with-angularjs-app-part-1/" title="Using Facebook API with AngularJs app – Part 1" target="_blank">first part</a>, here I just show the code. 

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

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

    &lt;div ng-app="myFacebookApp"&gt;
        &lt;facebook app-id="&lt;app-id&gt;"&gt;&lt;/facebook&gt;
    &lt;/div&gt;

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

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
<script src="http://www.boynux.com/wp-content/uploads/2014/05/facebook.js"></script>
<script language="javascript">
var app = angular.module ('myFacebookApp', ['bnx.module.facebook']);
app.controller('mainCtrl', function ($scope, facebook) {
    $scope.$on('fb.auth.authResponseChange', function (event, response) {
        $scope.$apply (function () {
            $scope.connected = (response.status == 'connected');

            if ($scope.connected) {
                facebook.api ('me').then (function (result) {
                    $scope.user = result;
                });
            } else {
                $scope.user = null;
            }
            });
        });
    });
</script> 

## 2. Login button

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<!-- Display Large Rectangle -->
<ins class="adsbygoogle" 
    style="display:inline-block;width:336px;height:280px" 
    data-ad-client="ca-pub-7360583392867579" 
    data-ad-slot="7819924448">
</ins> 
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

I want a Facebook login button in my app, so users can click and login using their Facebook account. [Facebook doesn't reveal account credentials to 3rd party apps]. We can get from a very basic information of user's public profile to full access to all photos and posts and albums. For purpose of this app I only setup minimum requirement which is "Basic Info access". If you want to access more advanced information you've to submit your app to be reviewed by Facebook first. 

Here is the Angular Directive for Facebook login button: 

    &lt;facebook-login auto_logout="true" scope="basic_info"&gt;
    &lt;/facebook-login&gt;

<facebook-login auto_logout="true" scope="basic_info"></facebook-login> 

That's it. This snippet will show a standard medium size Facebook login button and grants `basic_info` access when user logs into her Facebook account. If you need more details on this please refer to mentioned Github repository. All details explained in code documents. Now you can see a login button right here. 

<div ng-app="myFacebookApp">
  <facebook app-id="1491187207767298"></facebook> <facebook-login scope="basic_info" auto_logout="true"></facebook-login> <br /> <br /> <div ng-controller='mainCtrl'>
    <div ng-if='!connected'>
      <p>
        <strong>Wait, please login using above button to continue reading...</strong>
      </p>
    </div>
    
    <div ng-if='connected'>
      <p>
        <img src="http://graph.facebook.com/{{user.id}}/picture?type=square" /> Thanks, <strong>{{user.name}}</strong>
      </p>
      
      <h2>
        3. Control Login action
      </h2>
      
      <p>
        Now we successfully added Login button to our page. You are reading these lines, thus I manged to capture your login status and display some hidden parts of this article. Here I explain how you can achieve that using this API.
      </p>
      <commit_msg>Fix javascript sample code issues.<commit_after>---
layout: post
title:  Using Facebook API with AngularJs app - Part 2
---

[<img class="size-medium wp-image-845 aligncenter" title="AngularJS Facebook" alt="Facebook API with AngularJs app" src="http://www.boynux.com/wp-content/uploads/2014/03/angularjs-facebook-300x120.png" width="300" height="120" />][1]

Hi, This is the second part of "Facebook API with AngularJs app". If you haven't read the [first part][2] yet, I suggest you to read that first. 

## 1. Initial setup

You can find explanations in the <a href="http://www.boynux.com/facebook-api-with-angularjs-app-part-1/" title="Using Facebook API with AngularJs app – Part 1" target="_blank">first part</a>, here I just show the code. 

```javascript
 angular.module ('myFacebookApp', ['bnx.module.facebook']);
```

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

```javascript
<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.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
<script src="http://www.boynux.com/wp-content/uploads/2014/05/facebook.js"></script>
<script language="javascript">
var app = angular.module ('myFacebookApp', ['bnx.module.facebook']);
app.controller('mainCtrl', function ($scope, facebook) {
    $scope.$on('fb.auth.authResponseChange', function (event, response) {
        $scope.$apply (function () {
            $scope.connected = (response.status == 'connected');

            if ($scope.connected) {
                facebook.api ('me').then (function (result) {
                    $scope.user = result;
                });
            } else {
                $scope.user = null;
            }
            });
        });
    });
</script> 

## 2. Login button

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<!-- Display Large Rectangle -->
<ins class="adsbygoogle" 
    style="display:inline-block;width:336px;height:280px" 
    data-ad-client="ca-pub-7360583392867579" 
    data-ad-slot="7819924448">
</ins> 
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

I want a Facebook login button in my app, so users can click and login using their Facebook account. [Facebook doesn't reveal account credentials to 3rd party apps]. We can get from a very basic information of user's public profile to full access to all photos and posts and albums. For purpose of this app I only setup minimum requirement which is "Basic Info access". If you want to access more advanced information you've to submit your app to be reviewed by Facebook first. 

Here is the Angular Directive for Facebook login button: 

```javascript
    <facebook-login auto_logout="true" scope="basic_info"> </facebook-login>
```

<facebook-login auto_logout="true" scope="basic_info"></facebook-login> 

That's it. This snippet will show a standard medium size Facebook login button and grants `basic_info` access when user logs into her Facebook account. If you need more details on this please refer to mentioned Github repository. All details explained in code documents. Now you can see a login button right here. 

<div ng-app="myFacebookApp">
  <facebook app-id="1491187207767298"></facebook> <facebook-login scope="basic_info" auto_logout="true"></facebook-login> <br /> <br /> <div ng-controller='mainCtrl'>
    <div ng-if='!connected'>
      <p>
        <strong>Wait, please login using above button to continue reading...</strong>
      </p>
    </div>
    
    <div ng-if='connected'>
      <p>
        <img src="http://graph.facebook.com/{{user.id}}/picture?type=square" /> Thanks, <strong>{{user.name}}</strong>
      </p>
      
      <h2>
        3. Control Login action
      </h2>
      
      <p>
        Now we successfully added Login button to our page. You are reading these lines, thus I manged to capture your login status and display some hidden parts of this article. Here I explain how you can achieve that using this API.
      </p>
      
{'fraction_non_alphanumeric': 0.1295076075236612, 'fraction_numerical': 0.021804241044686715, 'mean_word_length': 3.3706806282722512, 'pattern_counts': {'":': 0, '<': 94, '<?xml version=': 0, '>': 94, 'https://': 0, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 36, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '825231', 'n_tokens_mistral': 2569, 'n_tokens_neox': 2359, 'n_words': 837}