Rate this docs

Angular Bootstrap Social Buttons

Angular Social Buttons - Bootstrap 4 & Material Design

Angular Bootstrap Social Buttons are components which allows you to build layouts with social features.

They work the same way as regular buttons. If you need more information about regular buttons, be sure to read our Buttons Documentation.


Full name social buttons MDB Pro component


      <!--Facebook-->
      <button type="button" mdbBtn class="btn-fb waves-light" mdbWavesEffect><i class="fa fa-facebook left"></i>Facebook</button>

      <!--Twitter-->
      <button type="button" mdbBtn class="btn-tw waves-light" mdbWavesEffect><i class="fa fa-twitter left"></i>Twitter</button>

      <!--Google +-->
      <button type="button" mdbBtn class="btn-gplus waves-light" mdbWavesEffect><i class="fa fa-google-plus left"></i>Google
        +</button>

      <!--Linkedin-->
      <button type="button" mdbBtn class="btn-li waves-light" mdbWavesEffect><i class="fa fa-linkedin left"></i>Linkedin</button>

      <!--Instagram-->
      <button type="button" mdbBtn class="btn-ins waves-light" mdbWavesEffect><i class="fa fa-instagram left"></i>Instagram</button>

      <!--Pinterest-->
      <button type="button" mdbBtn class="btn-pin waves-light" mdbWavesEffect><i class="fa fa-pinterest left"></i>Pinterest</button>

      <!--Youtube-->
      <button type="button" mdbBtn class="btn-yt waves-light" mdbWavesEffect><i class="fa fa-youtube left"></i>Youtube</button>

      <!--Vkontakte-->
      <button type="button" mdbBtn class="btn-vk waves-light" mdbWavesEffect><i class="fa fa-vk left"></i>Vkontakte</button>

      <!--Stack Overflow-->
      <button type="button" mdbBtn class="btn-so waves-light" mdbWavesEffect><i class="fa fa-stack-overflow left"></i>Stack
        Overflow</button>

      <!--Slack-->
      <button type="button" mdbBtn class="btn-slack waves-light" mdbWavesEffect><i class="fa fa-slack left"></i>Slack</button>

      <!--Github-->
      <button type="button" mdbBtn class="btn-git waves-light" mdbWavesEffect><i class="fa fa-github left"></i>Github</button>

      <!--Comments-->
      <button type="button" mdbBtn class="btn-comm waves-light" mdbWavesEffect><i class="fa fa-comments left"></i>Comments</button>

      <!--Email-->
      <button type="button" mdbBtn class="btn-email waves-light" mdbWavesEffect><i class="fa fa-envelope left"></i>Email</button>

      <!--Dribbble-->
      <button type="button" mdbBtn class="btn-dribbble waves-light" mdbWavesEffect><i class="fa fa-dribbble left"></i>Dribbble</button>
    

Large button



      <!--Facebook-->
      <button type="button" mdbBtn size="lg" class="btn-fb waves-light" mdbWavesEffect><i class="fa fa-facebook left"></i>Facebook</button>
    

Simple social buttons MDB Pro component


      <!--Facebook-->
      <button type="button" mdbBtn class="btn-fb waves-light" mdbWavesEffect><i class="fa fa-facebook"></i></button>

      <!--Twitter-->
      <button type="button" mdbBtn class="btn-tw waves-light" mdbWavesEffect><i class="fa fa-twitter"></i></button>

      <!--Google +-->
      <button type="button" mdbBtn class="btn-gplus waves-light" mdbWavesEffect><i class="fa fa-google-plus"></i></button>

      <!--Linkedin-->
      <button type="button" mdbBtn class="btn-li waves-light" mdbWavesEffect><i class="fa fa-linkedin"></i></button>

      <!--Instagram-->
      <button type="button" mdbBtn class="btn-ins waves-light" mdbWavesEffect><i class="fa fa-instagram"></i></button>

      <!--Pinterest-->
      <button type="button" mdbBtn class="btn-pin waves-light" mdbWavesEffect><i class="fa fa-pinterest"></i></button>

      <!--Youtube-->
      <button type="button" mdbBtn class="btn-yt waves-light" mdbWavesEffect><i class="fa fa-youtube"></i></button>

      <!--Dribbble-->
      <button type="button" mdbBtn class="btn-dribbble waves-light" mdbWavesEffect><i class="fa fa-dribbble left"></i></button>

      <!--Vkontakte-->
      <button type="button" mdbBtn class="btn-vk waves-light" mdbWavesEffect><i class="fa fa-vk"></i></button>

      <!--Stack Overflow-->
      <button type="button" mdbBtn class="btn-so waves-light" mdbWavesEffect><i class="fa fa-stack-overflow"></i></button>

      <!--Slack-->
      <button type="button" mdbBtn class="btn-slack waves-light" mdbWavesEffect><i class="fa fa-slack"></i></button>

      <!--Github-->
      <button type="button" mdbBtn class="btn-git waves-light" mdbWavesEffect><i class="fa fa-github"></i></button>

      <!--Comments-->
      <button type="button" mdbBtn class="btn-comm waves-light" mdbWavesEffect><i class="fa fa-comments"></i></button>

      <!--Email-->
      <button type="button" mdbBtn class="btn-email waves-light" mdbWavesEffect><i class="fa fa-envelope"></i></button>
    

Large button


      <!--Facebook-->
      <button type="button" mdbBtn size="lg" class="btn-fb waves-light" mdbWavesEffect><i class="fa fa-facebook"></i></button>
    

Floating social buttons MDB Pro component


      <!--Facebook-->
      <a type="button" mdbBtn floating="true" size="lg" class="btn-fb waves-light" mdbWavesEffect><i class="fa fa-facebook"></i></a>

      <!--Twitter-->
      <a type="button" mdbBtn floating="true" size="lg" class="btn-tw waves-light" mdbWavesEffect><i class="fa fa-twitter"></i></a>

      <!--Google +-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-gplus waves-light" mdbWavesEffect><i class="fa fa-google-plus"></i></a>

      <!--Linkedin-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-li waves-light" mdbWavesEffect><i class="fa fa-linkedin"></i></a>

      <!--Instagram-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-ins waves-light" mdbWavesEffect><i class="fa fa-instagram"></i></a>

      <!--Pinterest-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-pin waves-light" mdbWavesEffect><i class="fa fa-pinterest"></i></a>

      <!--Youtube-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-yt waves-light" mdbWavesEffect><i class="fa fa-youtube"></i></a>

      <!--Dribbble-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-dribbble waves-light" mdbWavesEffect><i class="fa fa-dribbble"></i></a>

      <!--Vkontakte-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-vk waves-light" mdbWavesEffect><i class="fa fa-vk"></i></a>

      <!--Stack Overflow-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-so waves-light" mdbWavesEffect><i class="fa fa-stack-overflow"></i></a>

      <!--Slack-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-slack waves-light" mdbWavesEffect><i class="fa fa-slack"></i></a>

      <!--Github-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-git waves-light" mdbWavesEffect><i class="fa fa-github"></i></a>

      <!--Comments-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-comm waves-light" mdbWavesEffect><i class="fa fa-comments"></i></a>

      <!--Email-->
      <a type="button" mdbBtn floating="true" size="lg" class=" btn-email waves-light" mdbWavesEffect><i class="fa fa-envelope"></i></a>
    

Small button


      <!--Facebook-->
      <a type="button" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect><i class="fa fa-facebook"></i></a>
    

Full name social counters MDB Pro component

Facebook 22 Twitter 22 Google+ 22 Linkedin 22 Instagram 22 Pinterest 22 Youtube 22 Dribbble 22 Vkontakte 22 Stack Overflow 22 Slack 22 Github 22 Comments 22 Emails 22

      <!--Facebook-->
      <a mdbBtn class="btn-fb waves-light" mdbWavesEffect>
        <i class="fa fa-facebook left"></i>
        <span>Facebook</span>
      </a>
      <span class="counter">22</span>

      <!--Twitter-->
      <a mdbBtn class="btn-tw waves-light" mdbWavesEffect>
        <i class="fa fa-twitter left"></i>
        <span>Twitter</span>
      </a>
      <span class="counter">22</span>

      <!--Google +-->
      <a mdbBtn class="btn-gplus waves-light" mdbWavesEffect>
        <i class="fa fa-google-plus left"></i>
        <span>Google+</span>
      </a>
      <span class="counter">22</span>

      <!--Linkedin-->
      <a mdbBtn class="btn-li waves-light" mdbWavesEffect>
        <i class="fa fa-linkedin left"></i>
        <span>Linkedin</span>
      </a>
      <span class="counter">22</span>

      <!--Instagram-->
      <a mdbBtn class="btn-ins waves-light" mdbWavesEffect>
        <i class="fa fa-instagram left"></i>
        <span>Instagram</span>
      </a>
      <span class="counter">22</span>

      <!--Pinterest-->
      <a mdbBtn class="btn-pin waves-light" mdbWavesEffect>
        <i class="fa fa-pinterest left"></i>
        <span>Pinterest</span>
      </a>
      <span class="counter">22</span>

      <!--Youtube-->
      <a mdbBtn class="btn-yt waves-light" mdbWavesEffect>
        <i class="fa fa-youtube left"></i>
        <span>Youtube</span>
      </a>
      <span class="counter">22</span>

      <!--Dribbble-->
      <a mdbBtn class="btn-dribbble waves-light" mdbWavesEffect>
        <i class="fa fa-dribbble left"></i>
        <span>Dribbble</span>
      </a>
      <span class="counter">22</span>

      <!--Vkontakte-->
      <a mdbBtn class="btn-vk waves-light" mdbWavesEffect>
        <i class="fa fa-vk left"></i>
        <span>Vkontakte</span>
      </a>
      <span class="counter">22</span>

      <!--Stack Overflow-->
      <a mdbBtn class="btn btn-so waves-light" mdbWavesEffect>
        <i class="fa fa-stack-overflow left"></i>
        <span>Stack Overflow</span>
      </a>
      <span class="counter">22</span>

      <!--Slack-->
      <a mdbBtn class="btn btn-slack waves-light" mdbWavesEffect>
        <i class="fa fa-slack left"></i>
        <span>Slack</span>
      </a>
      <span class="counter">22</span>

      <!--Github-->
      <a mdbBtn class="btn-git waves-light" mdbWavesEffect>
        <i class="fa fa-github left"></i>
        <span>Github</span>
      </a>
      <span class="counter">22</span>

      <!--Comments-->
      <a mdbBtn class="btn-comm waves-light" mdbWavesEffect>
        <i class="fa fa-comments left"></i>
        <span>Comments</span>
      </a>
      <span class="counter">22</span>

      <!--Emails-->
      <a mdbBtn class="btn-email waves-light" mdbWavesEffect>
        <i class="fa fa-envelope left"></i>
        <span>Emails</span>
      </a>
      <span class="counter">22</span>
    

Simple social counters MDB Pro component

22 22 22 22 22 22 22 22 22 22 22 22 22 22

      <!--Facebook-->
      <a mdbBtn size="lg" class="btn-fb  waves-light" mdbWavesEffect>
        <i class="fa fa-facebook"></i>
      </a>
      <span class="counter">22</span>

      <!--Twitter-->
      <a mdbBtn size="lg" class="btn-tw  waves-light" mdbWavesEffect>
        <i class="fa fa-twitter"></i>
      </a>
      <span class="counter">22</span>

      <!--Google +-->
      <a mdbBtn size="lg" class="btn-gplus  waves-light" mdbWavesEffect>
        <i class="fa fa-google-plus"></i>
      </a>
      <span class="counter">22</span>

      <!--Linkedin-->
      <a mdbBtn size="lg" class="btn-li  waves-light" mdbWavesEffect>
        <i class="fa fa-linkedin"></i>
      </a>
      <span class="counter">22</span>

      <!--Instagram-->
      <a mdbBtn size="lg" class="btn-ins  waves-light" mdbWavesEffect>
        <i class="fa fa-instagram"></i>
      </a>
      <span class="counter">22</span>

      <!--Pinterest-->
      <a mdbBtn size="lg" class="btn-pin  waves-light" mdbWavesEffect>
        <i class="fa fa-pinterest"></i>
      </a>
      <span class="counter">22</span>

      <!--Youtube-->
      <a mdbBtn size="lg" class="btn-yt  waves-light" mdbWavesEffect>
        <i class="fa fa-youtube"></i>
      </a>
      <span class="counter">22</span>

      <!--Dribbble-->
      <a mdbBtn size="lg" class="btn-dribbble  waves-light" mdbWavesEffect>
        <i class="fa fa-dribbble left"></i>
      </a>
      <span class="counter">22</span>

      <!--Vkontakte-->
      <a mdbBtn size="lg" class="btn-vk  waves-light" mdbWavesEffect>
        <i class="fa fa-vk"></i>
      </a>
      <span class="counter">22</span>

      <!--Stack Overflow-->
      <a mdbBtn size="lg" class="btn btn-so  waves-light" mdbWavesEffect>
        <i class="fa fa-stack-overflow"></i>
      </a>
      <span class="counter">22</span>

      <!--Slack-->
      <a mdbBtn size="lg" class="btn btn-slack  waves-light" mdbWavesEffect>
        <i class="fa fa-slack"></i>
      </a>
      <span class="counter">22</span>

      <!--Github-->
      <a mdbBtn size="lg" class="btn-git  waves-light" mdbWavesEffect>
        <i class="fa fa-github"></i>
      </a>
      <span class="counter">22</span>

      <!--Comments-->
      <a mdbBtn size="lg" class="btn-comm  waves-light" mdbWavesEffect>
        <i class="fa fa-comments"></i>
      </a>
      <span class="counter">22</span>

      <!--Emails-->
      <a mdbBtn size="lg" class="btn-email  waves-light" mdbWavesEffect>
        <i class="fa fa-envelope"></i>
      </a>
      <span class="counter">22</span>
    

Social icons MDB Pro component


      <!--Facebook-->
      <a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a>

      <!--Twitter-->
      <a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a>

      <!--Google +-->
      <a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a>

      <!--Linkedin-->
      <a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a>

      <!--Instagram-->
      <a class="icons-sm ins-ic"><i class="fa fa-instagram"></i></a>

      <!--Pinterest-->
      <a class="icons-sm pin-ic"><i class="fa fa-pinterest"></i></a>

      <!--Vkontakte-->
      <a class="icons-sm vk-ic"><i class="fa fa-vk"></i></a>

      <!--Youtube-->
      <a class="icons-sm yt-ic"><i class="fa fa-youtube"></i></a>

      <!--Dribbble-->
      <a class="icons-sm dribbble-ic"><i class="fa fa-dribbble"></i></a>

      <!--Stack Overflow-->
      <a class="icons-sm so-ic"><i class="fa fa-stack-overflow"></i></a>

      <!--Slack-->
      <a class="icons-sm slack-ic"><i class="fa fa-slack"></i></a>

      <!--Github-->
      <a class="icons-sm git-ic"><i class="fa fa-github"></i></a>

      <!--Comments-->
      <a class="icons-sm comm-ic"><i class="fa fa-comments"></i></a>

      <!--Email-->
      <a class="icons-sm email-ic"><i class="fa fa-envelope-o"></i></a>
    

Facebook Share button MDB Pro component Live example

This is the first and simplest example. It is included in every example below

Share button on Facebook together with a counter to how many shares a given page has in it. In order to use this example, you must have a development account on Facebook.


      <a mdbBtn class="btn-fb waves-light" (click)="share()" mdbWavesEffect>
        <i class="fa fa-facebook left"></i>
        <span>Share on Facebook!</span>
      </a>
      <span class="counter">{{shareCounter}}</span>
    

import { Http } from '@angular/http';
import { Component, OnInit } from '@angular/core';
import { FacebookService, InitParams } from 'ngx-facebook';
@Component({
  selector: 'facebook-share',
  templateUrl: './facebook-share.component.html',
  styleUrls: ['./facebook-share.component.scss'],
})
export class FacebookShareComponent implements OnInit {

  shareCounter: number = 0;

  constructor(private fb: FacebookService, private http: Http) {
    const initParams: InitParams = {
      appId: 'your-facebook-app-id',
      xfbml: true,
      version: 'v3.1'
    };
    fb.init(initParams);
  }

  share() {
    this.fb.ui({
      method: 'share',
      action_type: 'og.shares',
      action_properties: JSON.stringify({
        object: {
          'og:url': 'https://mdbootstrap.com/docs/angular',
          'og:title': 'My favorite Angular site!',
          'og:site_name': 'This is my Angular share function',
          'og:description': 'This is share from my favorite Angular site!',
        }
      })
    }).then((data: any) => {
      console.log(data);
    }).catch((error: any) => {
      console.log(error);
    });
  }

  ngOnInit() {
    const httpUrl = 'http://www.mdbootstrap.com';

    this.http.get('https://graph.facebook.com/?ids=' + `${httpUrl}`).subscribe((data: any) => {
      this.shareCounter = data.json()[`${httpUrl}`].share.share_count;
    });
  }
}
    

Mixed Facebook share counters MDB Pro component Live example

Second example. Its solutions are set out in the next example.

The number of shares on Facebook is separate for the protocols http:// and https://. In order to accumulate the total amount of shares on your site, you need to add both values to each other. To do so, you should perform the following for the request, one for the protocol http://, and the other one for the protocol https://


      <a mdbBtn class="btn-fb waves-light" (click)="share()" mdbWavesEffect>
        <i class="fa fa-facebook left"></i>
        <span>Share on Facebook!</span>
      </a>
      <span class="counter">{{shareCounter}}</span>
    

import { Http } from '@angular/http';
import { Component, OnInit } from '@angular/core';
import { FacebookService, InitParams } from 'ngx-facebook';
@Component({
  selector: 'mixed-share-counter',
  templateUrl: './mixed-share-counter.component.html',
  styleUrls: ['./mixed-share-counter.component.scss'],
})
export class MixedShareCounterComponent implements OnInit {

  shareCounter: number = 0;

  constructor(private fb: FacebookService, private http: Http) {
    const initParams: InitParams = {
      appId: 'your-facebook-app-id',
      xfbml: true,
      version: 'v3.1'
    };
    fb.init(initParams);
  }

  ngOnInit() {
    const httpUrl = 'http://mdbootstrap.com';
    const httpsUrl = 'https://mdbootstrap.com';

    let httpShareCounter = 0;
    let httpsShareCounter = 0;

    // HTTP Share counter
    this.http.get('https://graph.facebook.com/?ids=' + `${httpUrl}`).subscribe((data: any) => {
      httpShareCounter = data.json()[`${httpUrl}`].share.share_count;
    });

    // HTTPS Share counter
    this.http.get('https://graph.facebook.com/?ids=' + `${httpsUrl}`).subscribe((data: any) => {
      httpsShareCounter += data.json()[`${httpsUrl}`].share.share_count;
    });
    setTimeout(() => {
      this.shareCounter = httpShareCounter + httpsShareCounter;
    }, 500);
  }
}
    

Removing parameters from URL MDB Pro component Live example

Third example. It contains the above two examples.

The Graph Facebook API does not allow you to use query parameters in the searched URL while executing a query. For this purpose, if the URL of the page you want to check looks similar to: http://example.com?parameter=true, you have to get rid of all the query parameters.


      <a mdbBtn class="btn-fb waves-light" (click)="share()" mdbWavesEffect>
        <i class="fa fa-facebook left"></i>
        <span>Share on Facebook!</span>
      </a>
      <span class="counter">{{shareCounter}}</span>
    

import { Http } from '@angular/http';
import { Component, OnInit } from '@angular/core';
import { FacebookService, InitParams } from 'ngx-facebook';
@Component({
  selector: 'query-parameters',
  templateUrl: './query-parameters.component.html',
  styleUrls: ['./query-parameters.component.scss'],
})
export class QueryParametersComponent implements OnInit {

  shareCounter: number = 0;

  constructor(private fb: FacebookService, private http: Http) {
    const initParams: InitParams = {
      appId: 'your-facebook-app-id',
      xfbml: true,
      version: 'v3.1'
    };
    fb.init(initParams);
  }

  ngOnInit() {
    let httpUrl = 'http://mdbootstrap.com/?parameter=true&other=false';
    let httpsUrl = 'https://mdbootstrap.com/?parameter=true&other=false';

    let httpShareCounter = 0;
    let httpsShareCounter = 0;

    const httpQuery = httpUrl.indexOf('?') || httpUrl.indexOf('&');
    const httpsQuery = httpUrl.indexOf('?') || httpUrl.indexOf('&');
    httpUrl = httpUrl.substring(0, httpQuery != -1 ? httpQuery : httpUrl.length);
    httpsUrl = httpsUrl.substring(0, httpsQuery != -1 ? httpsQuery : httpsUrl.length);

    // HTTP Share counter
    this.http.get('https://graph.facebook.com/?ids=' + `${httpUrl}`).subscribe((data: any) => {
      httpShareCounter = data.json()[`${httpUrl}`].share.share_count;
    });

    // HTTPS Share counter
    this.http.get('https://graph.facebook.com/?ids=' + `${httpsUrl}`).subscribe((data: any) => {
      httpsShareCounter += data.json()[`${httpsUrl}`].share.share_count;
    });
    setTimeout(() => {
      this.shareCounter = httpShareCounter + httpsShareCounter;
    }, 500);
  }
}
    

Facebook likes counter MDB Pro component Live example

The page likes counter is available via the Facebook Graph API. To obtain it you will need access_token of your Facebook application.


      <a mdbBtn class="btn-fb waves-light" mdbWavesEffect>
        <i class="fa fa-facebook left"></i>
        <span>Likes Counter</span>
      </a>
      <span class="counter">{{likeCounter}}</span>
    

import { Http } from '@angular/http';
import { Component, OnInit } from '@angular/core';
import { FacebookService, InitParams } from 'ngx-facebook';
@Component({
  selector: 'likes-counter',
  templateUrl: './likes-counter.component.html',
  styleUrls: ['./likes-counter.component.scss'],
})
export class LikesCounterComponent implements OnInit {

  likeCounter: number = 0;

  constructor(private fb: FacebookService, private http: Http) {
    const initParams: InitParams = {
      appId: 'your-facebook-app-id',
      xfbml: true,
      version: 'v3.1'
    };
    fb.init(initParams);
  }

  ngOnInit() {
    const httpUrl = 'http://mdbootstrap.com';
    const accessToken = 'your-facebook-app-access-token';

    // Like counter
    this.http.get('https://graph.facebook.com/?ids=' + `${httpUrl}`
      + '&access_token=' + `${accessToken}`
      + '&fields=og_object{engagement}').subscribe((data: any) => {
        this.likeCounter = data.json()[`${httpUrl}`].og_object.engagement.count;
      });
  }
}
    

Angular Social Buttons - API

In this section you will find informations about required modules and proper configuration of Social Buttons component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// MDB Angular Pro
import { ButtonsModule, InputsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { ButtonsModule, InputsModule } from 'angular-bootstrap-md'
// Facebook API for Angular
import { FacebookModule } from 'ngx-facebook'

Add FacebookModule.forRoot() in the imports array, in the app.module.ts file.

                
npm i --save ngx-facebook
                
              
// For MDB Angular Pro
import { FacebookModule } from 'ngx-facebook';
            
              @NgModule({
            imports: [
            ...
            FacebookModule.forRoot(),
            ...
            ],
          })
            
          

Add below code to head section in index.html file to get access to the Facebook API.

  
    <script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>
  

Creating Facebook Application and generating Access Token

Examples of acquiring data from a Facebook API require you to have an application set up and configured on Facebook. The process of creating a new Facebook application is described below.

1. Go to developers.facebook.com and log in to your Facebook account, then generate the application by clicking on the "Create new Facebook app" button. If you do not see any buttons, please go to the "Register as Developer" link.

2. Select the platform on which you are writing your application (most likely Web) and then select a name for your application. After selecting these two, go through the Quick Stars steps to generate the application.

3. From the left side menu, select the Settings tab and then the Basic tab. Fill it with the basic data that is required there. You can enter localhost in the App Domains field. You can enter http://localhost:4200 or any other address you use in your application on the dome itself in the Website URL field. Save the data, and save yourself the App ID, and the App Secret. They will be needed in the next point to generate access_token for your application.

4. Open this page and go right down the page (step 17). Enter the data you saved in the previous section in the App ID and App Secret space. This will generate the access_token required for your Facebook API. This key does not have a validity period, so you can use it at any time.

For more informations, please read the Official Creating Facebook App article.