ng-social-links

Description

Headless social share for Angular. Provides straightforward API for getting social share URLs which can be used in your templates.

ng-social-links advantages:

• Native to Angular.
• Configurable - you can globally define share URL, title and email body at module import.
• Well typed - it's clear which parameters are relevant to every social share provider.
• Works well in SSR mode.

Usage

Install package

npm i ng-social-links

Add import to your module

import { NgSocialLinksModule } from 'ng-social-links';

@NgModule({
  imports: [
    ...
    NgSocialLinksModule.forRoot(),
    ],
  declarations: [],
  providers: []
})

Inject the service:

import { NgSocialLinksService } from 'ng-social-links';

class SomeComponent {
  constructor(private socialLinks: NgSocialLinksService) {}
}

Get the socail share links:

facebookShareLink = this.socialLinks.getShareLink('fa');

With additional parameters:

twitterShareLink = this.socialLinks.getShareLink('tw', { title: 'Visit my website!' });

Configuration

The configuration interface looks like this:

interface Config {
  url?: string;
  title?: string;
  description?: string;
}

By default document.location.href is used for url, title and description are empty.

You can define another defaults as follows:

NgSocialLinksModule.forRoot({ url: 'htts://my-website.com' })

Or

NgSocialLinksModule.forRoot({ title: 'Visit my website!', description: 'Default email body...' })

ng-social-links is headless, so you're free to use whatever you like in a template. e.g. text links, icons, buttons, you name it. For example:

<a [attr.href]="facebookShareLink">
  <fa-icon [icon]="faFacebook"></fa-icon>
</a>

Another option is to create a popup window:

const telegramLink = facebookShareLink = this.socialLinks.getShareLink('tg');


window.open(telegramLink,'SocialSharePopup','width=600,height=600');

Demo

Currently, demo is only available on localhost:

• Clone the GitHub repo.
• Install dependencies: npm install.
• Run the demo website: npm start.
• Open your browser at http://localhost:4200.

Supported providers

• 'fb' - Facebook
• 'tw' - Twitter
• 'in' - LinkedIn
• 'mail' - Mailto
• 'vk' - Vkontakte
• 'tg' - Telegram
• 'pocket' - Getpocket
• 'reddit' - Reddit
• 'ev' - Evernote
• 'pi' - Pinterest
• 'sk' - Skype
• 'wa' - Whatsapp
• 'ok' - connect.ok
• 'xi' - Xing

Contributig to ng-social-links

You are more than welcome to improve this library (for example, add missing social share providers) or create issues on the GitHub issue tracker.