Angular Bootstrap Social Buttons
Angular Social Buttons - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
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>
Full name social counters MDB Pro component
<!--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
<!--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>
Removing parameters from URL MDB Pro component
Live exampleThird 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;
});
}
}
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.
import { ButtonsModule, InputsModule } from 'ng-uikit-pro-standard'
import { ButtonsModule, InputsModule } from 'angular-bootstrap-md'
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.
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>