Custom Share Button

To create a new share button or to modify an existing share button, you can provide the options using customShareButton function inside provideShareButtonsOptions in your app.config file.

Create a new button

import { ApplicationConfig } from '@angular/core';
import { customShareButton, provideShareButtonsOptions, ShareButtonFuncArgs } from 'ngx-sharebuttons';
import { faCommentsDollar } from '@fortawesome/free-solid-svg-icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideShareButtonsOptions(
      customShareButton('my-custom-button', {
        type: 'my-custom-button',
        text: 'My Custom Button',
        icon: faCommentsDollar,
        color: 'blue',
        params: {
          // define the needed parameters here
        },
        // or if the button needs to execute a function, use the following instead
        func: (args: ShareButtonFuncArgs<any>) => alert('Custom button works!')
      })
    ),
  ]
};

Now you can pass the name of the newly defined button, ... e.g. <share-button button="my-custom-button">

The available inputs for sharing parameters are url, title, description, image, tags and via.

The effectiveness of these inputs depends on the options provided by the specific social network. most of them only support only the url.

Change an existing share button config

import { ApplicationConfig } from '@angular/core';
import { customShareButton, provideShareButtonsOptions } from 'ngx-sharebuttons'
import { faFacebookSquare } from '@fortawesome/free-brands-svg-icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideShareButtonsOptions(
      // Override facebook icon and color
      customShareButton('facebook', {
        icon: faFacebookSquare,
        color: 'purple'
      })
    )
  ]
};