Angular 2+ Social Sharing Buttons for Facebook, Google Plus, Twitter, LinkedIn and Pinterest

A few simple Angular 2+ components for adding the following social sharing buttons to your app: Facebook Like, Google Plus, Twitter, LinkedIn and Pinterest.

Each of the social share components will add its required social network javascript sdk if required, or use the one that's already there if available.

The social buttons work correctly after route changes as shown in the demo below, by default they use the current page url for sharing or you can pass a custom url as a property to the component.

For the same components in Angular 1 check out AngularJS directives for social sharing buttons.

Project code is available on GitHub at https://github.com/cornflourblue/jw-angular-social-buttons.

Here they are in action: (See on StackBlitz at https://stackblitz.com/edit/jw-angular-social-buttons)

Angular Social Button Installation

• Install using npm: npm install jw-angular-social-buttons
• Import into your app.module.ts file with import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
• Add JwSocialButtonsModule to the imports array of your Angular 2+ app module

Here's the app module from the demo app showing how to import the social buttons module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { routing } from './app.routing';

import { HomeComponent } from './home';
import { TestPageComponent } from './test-page';

// import social buttons module
import { JwSocialButtonsModule } from 'jw-angular-social-buttons';

@NgModule({
    imports: [
        BrowserModule,
        routing,

        // add social buttons module to NgModule imports
        JwSocialButtonsModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        TestPageComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

Angular Social Button Usage

Instructions on how to add each of the social sharing buttons to your Angular 2+ app.

Angular Facebook Like + Share Button

Like or share the current page url (default):

<fb-like></fb-like>

Like or share a custom url set in the component:

<fb-like url={{url}}></fb-like>

Like or share a custom url set as a string in the component template:

<fb-like url="http://jasonwatmore.com"></fb-like>

Angular Google Plus +1 Button

Plus one the current page url (default):

<google-plus></google-plus>

Plus one a custom url set in the component:

<google-plus url={{url}}></google-plus>

Plus one a custom url set as a string in the component template:

<google-plus url="http://jasonwatmore.com"></google-plus>

Angular Twitter Tweet Button

Tweet the current page url and title (default):

<tweet></tweet>

Tweet a custom url and text set in the component:

<tweet url={{url}} text={{text}}></tweet>

Tweet a custom url and text set as strings in the component template:

<tweet url="http://jasonwatmore.com" text="Jason Watmore's Blog"></tweet>

Angular LinkedIn Share Button

Share the current page url (default):

<linkedin-share></linkedin-share>

Share a custom url set in the component:

<linkedin-share url={{url}}></linkedin-share>

Share a custom url set as a string in the component template:

<linkedin-share url="http://jasonwatmore.com"></linkedin-share>

Angular Pinterest PinIt Button

Pin the current page url, title and default image (default):

<pin-it></pin-it>

Pin a custom url, image and text set in the component:

<pin-it url={{url}} media={{imageUrl}} description={{text}}></pin-it>

Pin a custom url, image and text set as strings in the component template:

<pin-it url="http://jasonwatmore.com" media="http://jasonwatmore.com/_content/images/jason.jpg" description="Jason Watmore's Blog"></pin-it>

Source Code for the Angular Social Sharing Buttons

I've included the source code for each of the social sharing buttons below if you're interested in seeing how they are implemented.

Angular Facebook Like Component

import { Component, ElementRef, AfterViewInit, Input } from '@angular/core';

@Component({
    selector: 'fb-like',
    template: `<div class="fb-like" [attr.data-href]="url" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>`
})

export class FbLikeComponent implements AfterViewInit {
    @Input() url = location.href;

    constructor() {
        // initialise facebook sdk after it loads if required
        if (!window['fbAsyncInit']) {
            window['fbAsyncInit'] = function () {
                window['FB'].init({
                    appId: 'your-app-id',
                    autoLogAppEvents: true,
                    xfbml: true,
                    version: 'v3.0'
                });
            };
        }

        // load facebook sdk if required
        const url = 'https://connect.facebook.net/en_US/sdk.js';
        if (!document.querySelector(`script[src='${url}']`)) {
            let script = document.createElement('script');
            script.src = url;
            document.body.appendChild(script);
        }
    }

    ngAfterViewInit(): void {
        // render facebook button
        window['FB'] && window['FB'].XFBML.parse();
    }
}

Angular Google Plus +1 Component

import { Component, ElementRef, AfterViewInit, Input } from '@angular/core';

@Component({
    selector: 'google-plus',
    template: `<div class="g-plusone" [attr.data-href]="url" data-size="medium"></div>`
})

export class GooglePlusComponent implements AfterViewInit {
    @Input() url = location.href;

    constructor() {
        // load google plus sdk if required
        const url = 'https://apis.google.com/js/platform.js';
        if (!document.querySelector(`script[src='${url}']`)) {
            let script = document.createElement('script');
            script.src = url;
            document.body.appendChild(script);
        }
    }

    ngAfterViewInit(): void {
        // render google plus button
        window['gapi'] && window['gapi'].plusone.go();
    }
}

Angular Twitter Tweet Component

import { Component, ElementRef, AfterViewInit, Input } from '@angular/core';

@Component({
    selector: 'tweet',
    template: `<a href="https://twitter.com/share" [attr.data-text]="text" [attr.data-url]="url" class="twitter-share-button"></a>`
})

export class TweetComponent implements AfterViewInit {
    @Input() url = location.href;
    @Input() text = '';

    constructor() {
        // load twitter sdk if required
        const url = 'https://platform.twitter.com/widgets.js';
        if (!document.querySelector(`script[src='${url}']`)) {
            let script = document.createElement('script');
            script.src = url;
            document.body.appendChild(script);
        }
    }

    ngAfterViewInit(): void {
        // render tweet button
        window['twttr'] && window['twttr'].widgets.load();
    }
}

Angular LinkedIn Share Component

import { Component, ElementRef, AfterViewInit, Input, ViewChild } from '@angular/core';

@Component({
    selector: 'linkedin-share',
    template: `<div #element></div>`
})

export class LinkedInShareComponent implements AfterViewInit {
    @Input() url = location.href;
    @ViewChild('element') element: ElementRef;

    constructor() {
        // load twitter sdk if required
        const url = 'https://platform.linkedin.com/in.js';
        if (!document.querySelector(`script[src='${url}']`)) {
            let script = document.createElement('script');
            script.src = url;
            script.innerHTML = ' lang: en_US';
            document.body.appendChild(script);
        }
    }

    ngAfterViewInit(): void {
        // add linkedin share button script tag to element
        this.element.nativeElement.innerHTML = `<script type="IN/Share" data-url="${this.url}"></script>`;

        // render share button
        window['IN'] && window['IN'].parse();
    }
}

Angular Pinterest PinIt Component

import { Component, ElementRef, AfterViewInit, Input } from '@angular/core';

@Component({
    selector: 'pin-it',
    template: `<a href="//www.pinterest.com/pin/create/button/?url={{url}}&media={{media}}&description={{description}}" data-pin-do="buttonPin" data-pin-config="beside"></a>`
})

export class PinItComponent implements AfterViewInit {
    @Input() url = location.href;
    @Input() media = '';
    @Input() description = '';

    constructor() {
        // load pinterest sdk if required
        const url = 'https://assets.pinterest.com/js/pinit.js';
        if (!document.querySelector(`script[src='${url}']`)) {
            let script = document.createElement('script');
            script.src = url;
            script['data-pin-build'] = 'parsePins';
            document.body.appendChild(script);
        }
    }

    ngAfterViewInit(): void {
        // render pin it button
        window['parsePins'] && window['parsePins']();
    }
}