Edit these docs Rate these 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 color="fb" class="waves-light" mdbWavesEffect><i class="fab fa-facebook-f left"></i>Facebook</button>

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

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

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

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

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

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

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

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

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

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

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

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

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

Large button



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

Simple social buttons MDB Pro component


      <!--Facebook-->
      <button type="button" mdbBtn color="fb" class="waves-light" mdbWavesEffect><mdb-icon fab icon="facebook-f"></mdb-icon></button>

      <!--Twitter-->
      <button type="button" mdbBtn color="tw" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="twitter"></mdb-icon></button>

      <!--Google +-->
      <button type="button" mdbBtn color="gplus" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="google-plus"></mdb-icon></button>

      <!--Linkedin-->
      <button type="button" mdbBtn color="li" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="linkedin-in"></mdb-icon></button>

      <!--Instagram-->
      <button type="button" mdbBtn color="ins" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="instagram"></mdb-icon></button>

      <!--Pinterest-->
      <button type="button" mdbBtn color="pin" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="pinterest"></mdb-icon></button>

      <!--Youtube-->
      <button type="button" mdbBtn color="yt" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="youtube"></mdb-icon></button>

      <!--Dribbble-->
      <button type="button" mdbBtn color="dribbble" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="dribbble" class="left"></mdb-icon></button>

      <!--Vkontakte-->
      <button type="button" mdbBtn color="vk" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="vk"></mdb-icon></button>

      <!--Stack Overflow-->
      <button type="button" mdbBtn color="so" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="stack-overflow"></mdb-icon></button>

      <!--Slack-->
      <button type="button" mdbBtn color="slack" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="slack"></mdb-icon></button>

      <!--Github-->
      <button type="button" mdbBtn color="git" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="github"></mdb-icon></button>

      <!--Comments-->
      <button type="button" mdbBtn color="comm" class=" waves-light" mdbWavesEffect><mdb-icon fas icon="comments"></mdb-icon></button>

      <!--Email-->
      <button type="button" mdbBtn color="email" class=" waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon></button>
    

Large button


      <!--Facebook-->
      <button type="button" mdbBtn size="lg" color="fb" class="waves-light" mdbWavesEffect><mdb-icon fab icon="facebook-f" class="fab fa-facebook-f"></mdb-icon></button>
    

Floating social buttons MDB Pro component


      <!--Facebook-->
      <a type="button" mdbBtn floating="true" size="lg" color="fb" class="waves-light" mdbWavesEffect><mdb-icon fab icon="facebook-f"></mdb-icon></a>

      <!--Twitter-->
      <a type="button" mdbBtn floating="true" size="lg" color="tw" class="waves-light" mdbWavesEffect><mdb-icon fab icon="twitter"></mdb-icon></a>

      <!--Google +-->
      <a type="button" mdbBtn floating="true" size="lg" color="gplus" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="google-plus"></mdb-icon></a>

      <!--Linkedin-->
      <a type="button" mdbBtn floating="true" size="lg" color="li" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="linkedin-in"></mdb-icon></a>

      <!--Instagram-->
      <a type="button" mdbBtn floating="true" size="lg" color="ins" class="  waves-light" mdbWavesEffect><mdb-icon fab icon="instagram"></mdb-icon></a>

      <!--Pinterest-->
      <a type="button" mdbBtn floating="true" size="lg" color="pin" class="  waves-light" mdbWavesEffect><mdb-icon fab icon="pinterest"></mdb-icon></a>

      <!--Youtube-->
      <a type="button" mdbBtn floating="true" size="lg" color="yt" class="  waves-light" mdbWavesEffect><mdb-icon fab icon="youtube"></mdb-icon></a>

      <!--Dribbble-->
      <a type="button" mdbBtn floating="true" size="lg" color="dribbble" class="  waves-light" mdbWavesEffect><mdb-icon fab icon="dribbble"></mdb-icon></a>

      <!--Vkontakte-->
      <a type="button" mdbBtn floating="true" size="lg" color="vk" class="  waves-light" mdbWavesEffect><mdb-icon fab icon="vk"></mdb-icon></a>

      <!--Stack Overflow-->
      <a type="button" mdbBtn floating="true" size="lg" color="so" class="  waves-light" mdbWavesEffect><mdb-icon fab icon="stack-overflow"></mdb-icon></a>

      <!--Slack-->
      <a type="button" mdbBtn floating="true" size="lg" color="slack" class="  waves-light" mdbWavesEffect><mdb-icon fab icon="slack"></mdb-icon></a>

      <!--Github-->
      <a type="button" mdbBtn floating="true" size="lg" color="git" class="  waves-light" mdbWavesEffect><mdb-icon fab icon="github"></mdb-icon></a>

      <!--Comments-->
      <a type="button" mdbBtn floating="true" size="lg" color="comm" class="  waves-light" mdbWavesEffect><mdb-icon fas icon="comments"></mdb-icon></a>

      <!--Email-->
      <a type="button" mdbBtn floating="true" size="lg" color="email" class="  waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon></a>
    

Small button


      <!--Facebook-->
      <a type="button" mdbBtn floating="true" size="sm" color="fb" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="facebook-f"></mdb-icon></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 color="fb" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="facebook-f" class="left"></mdb-icon>
        <span>Facebook</span>
      </a>
      <span class="counter">22</span>

      <!--Twitter-->
      <a mdbBtn color="tw" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="twitter" class="left"></mdb-icon>
        <span>Twitter</span>
      </a>
      <span class="counter">22</span>

      <!--Google +-->
      <a mdbBtn color="gplus" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="google-plus" class="left"></mdb-icon>
        <span>Google+</span>
      </a>
      <span class="counter">22</span>

      <!--Linkedin-->
      <a mdbBtn color="li" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="linkedin-in" class="left"></mdb-icon>
        <span>Linkedin</span>
      </a>
      <span class="counter">22</span>

      <!--Instagram-->
      <a mdbBtn color="ins" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="instagram" class="left"></mdb-icon>
        <span>Instagram</span>
      </a>
      <span class="counter">22</span>

      <!--Pinterest-->
      <a mdbBtn color="pin" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="pinterest" class="left"></mdb-icon>
        <span>Pinterest</span>
      </a>
      <span class="counter">22</span>

      <!--Youtube-->
      <a mdbBtn color="yt" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="youtube" class="left"></mdb-icon>
        <span>Youtube</span>
      </a>
      <span class="counter">22</span>

      <!--Dribbble-->
      <a mdbBtn color="dribbble" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="dribbble" class="left"></mdb-icon>
        <span>Dribbble</span>
      </a>
      <span class="counter">22</span>

      <!--Vkontakte-->
      <a mdbBtn color="vk" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="vk" class="left"></mdb-icon>
        <span>Vkontakte</span>
      </a>
      <span class="counter">22</span>

      <!--Stack Overflow-->
      <a mdbBtn color="so" class="waves-light" mdbWavesEffect>
        <mdb-icon fab icon="stack-overflow" class="left"></mdb-icon>
        <span>Stack Overflow</span>
      </a>
      <span class="counter">22</span>

      <!--Slack-->
      <a mdbBtn color="slack" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="slack" class="left"></mdb-icon>
        <span>Slack</span>
      </a>
      <span class="counter">22</span>

      <!--Github-->
      <a mdbBtn color="git" class=" waves-light" mdbWavesEffect>
        <mdb-icon fab icon="github" class="left"></mdb-icon>
        <span>Github</span>
      </a>
      <span class="counter">22</span>

      <!--Comments-->
      <a mdbBtn color="comm" class=" waves-light" mdbWavesEffect>
        <mdb-icon fas icon="comments" class="left"></mdb-icon>
        <span>Comments</span>
      </a>
      <span class="counter">22</span>

      <!--Emails-->
      <a mdbBtn color="email" class=" waves-light" mdbWavesEffect>
        <mdb-icon fas icon="envelope" class="left"></mdb-icon>
        <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" color="fb" class="waves-light" mdbWavesEffect>
        <mdb-icon fab icon="facebook-f"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Twitter-->
      <a mdbBtn size="lg" color="tw" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="twitter"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Google +-->
      <a mdbBtn size="lg" color="gplus" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="google-plus"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Linkedin-->
      <a mdbBtn size="lg" color="li" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="linkedin-in"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Instagram-->
      <a mdbBtn size="lg" color="ins" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="instagram"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Pinterest-->
      <a mdbBtn size="lg" color="pin" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="pinterest"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Youtube-->
      <a mdbBtn size="lg" color="yt" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="youtube"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Dribbble-->
      <a mdbBtn size="lg" color="dribbble" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="dribbble" class="eft"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Vkontakte-->
      <a mdbBtn size="lg" color="vk" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="vk" class="fab fa-vk"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Stack Overflow-->
      <a mdbBtn size="lg" color="so" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="stack-overflow"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Slack-->
      <a mdbBtn size="lg" color="slack" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="slack"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Github-->
      <a mdbBtn size="lg" color="git" class="  waves-light" mdbWavesEffect>
        <mdb-icon fab icon="github"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Comments-->
      <a mdbBtn size="lg" color="comm" class="  waves-light" mdbWavesEffect>
        <mdb-icon fas icon="comments"></mdb-icon>
      </a>
      <span class="counter">22</span>

      <!--Emails-->
      <a mdbBtn size="lg" color="email" class="  waves-light" mdbWavesEffect>
        <mdb-icon fas icon="envelope"></mdb-icon>
      </a>
      <span class="counter">22</span>
    

Social icons MDB Pro component


      <!--Facebook-->
      <a class="icons-sm fb-ic"><mdb-icon fab icon="facebook-f"></mdb-icon></a>

      <!--Twitter-->
      <a class="icons-sm tw-ic"><mdb-icon fab icon="twitter"></mdb-icon></a>

      <!--Google +-->
      <a class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus"></mdb-icon></a>

      <!--Linkedin-->
      <a class="icons-sm li-ic"><mdb-icon fab icon="linkedin-in"></mdb-icon></a>

      <!--Instagram-->
      <a class="icons-sm ins-ic"><mdb-icon fab icon="instagram"></mdb-icon></a>

      <!--Pinterest-->
      <a class="icons-sm pin-ic"><mdb-icon fab icon="pinterest"></mdb-icon></a>

      <!--Vkontakte-->
      <a class="icons-sm vk-ic"><mdb-icon fab icon="vk"></mdb-icon></a>

      <!--Youtube-->
      <a class="icons-sm yt-ic"><mdb-icon fab icon="youtube"></mdb-icon></a>

      <!--Dribbble-->
      <a class="icons-sm dribbble-ic"><mdb-icon fab icon="dribbble"></mdb-icon></a>

      <!--Stack Overflow-->
      <a class="icons-sm so-ic"><mdb-icon fab icon="stack-overflow"></mdb-icon></a>

      <!--Slack-->
      <a class="icons-sm slack-ic"><mdb-icon fab icon="slack"></mdb-icon></a>

      <!--Github-->
      <a class="icons-sm git-ic"><mdb-icon fab icon="github"></mdb-icon></a>

      <!--Comments-->
      <a class="icons-sm comm-ic"><mdb-icon fas icon="comments"></mdb-icon></a>

      <!--Email-->
      <a class="icons-sm email-ic"><mdb-icon fas icon="envelope"></mdb-icon></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 color="fb" class="waves-light" (click)="share()" mdbWavesEffect>
        <mdb-icon fab icon="facebook-f" class="left"></mdb-icon>
        <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 color="fb" class="waves-light" (click)="share()" mdbWavesEffect>
        <mdb-icon fab icon="facebook-f" class="left"></mdb-icon>
        <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 color="fb" class="waves-light" (click)="share()" mdbWavesEffect>
        <mdb-icon fab icon="facebook-f" class="left"></mdb-icon>
        <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 color="fb" class="waves-light" mdbWavesEffect>
        <mdb-icon fab icon="facebook-f" class="left"></mdb-icon>
        <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;
      });
  }
}
    

Edit these docs Rate these docs

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.