Skip to content

Global Options (legacy)

Jump to bottom
Murhaf Sousli edited this page May 31, 2024 · 1 revision

To use custom options that applies on all share buttons components across your app, pass the config to the share module.

Example:

import { ShareButtonsConfig } from 'ngx-sharebuttons';
import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';

const customConfig: ShareButtonsConfig = {
  include: ['facebook', 'twitter', 'google'],
  exclude: ['tumblr', 'stumble', 'vk'],
  theme: 'modern-light',
  gaTracking: true,
  twitterAccount: 'twitterUsername'
}

@NgModule({
  imports: [
    // the module you choice 'ShareModule', 'ShareButtonModule' or 'ShareButtonsModule'
    ShareButtonsModule.withConfig(customConfig)
  ]
})

ShareButtonsOptions API

Option Default value Description
prop SHARE_BUTTONS Contains the properties for all share buttons.
include [ ] Include certain buttons. Button's order will be as you type it.
exclude [ ] Exclude certain buttons.
theme null Button theme name.
windowWidth 500 Share popup window width.
windowHeight 400 Share popup window height.
url null Override url meta tag.
title null Override title meta tag.
description null Override description meta tag.
image null Override image meta tag.
tags null Override tags meta tag for Tumblr and Twitter.
autoSetMeta true Initializes meta tags inputs from the SEO meta tags.
gaTracking false Roll sharing stats automatically into your Google Analytics.
twitterAccount null Add via @accountName at the end of the tweets.
sharerMethod 'anchor' The method used to open share, either 'anchor' or 'window'.
sharerTarget '_blank' The target attribute value, learn more.
windowObj window In case ionic is used, window object can be replaced ionic's native one.
windowFuncName 'open' The name of the function used to open the window.
moreButtonIcon 'ellipsis-h' More button icon in <share-buttons> component.
lessButtonIcon 'minus' Less button icon in <share-buttons> component.
moreButtonAriaLabel 'Show more share buttons' The aria label of more button in <share-buttons> component.
lessButtonAriaLabel 'Show less share buttons' The aria label of less button in <share-buttons> component.

The option autoSetMeta reads the SEO meta tags from the document head, if any exists, it sets its value as default for title description image inputs if any exists. autoSetMeta is true by default.

<head>
  <meta property="og:title" content="The Rock" />
  <meta property="og:description" content="Directed by Michael Bay.  With Sean Connery, Nicolas Cage, Ed Harris, John Spencer."/>
  <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
  <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
</head>

Set autoSetMeta to false, if the share buttons url does not point to the current url, e.g. displaying a list of articles each one with share buttons.

Button Configuration

You can change the buttons properties such as button icon and text

import { ShareButtonsModule } from '@ngx-sharebuttons/buttons';
import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons';

const customConfig = {
  prop: {
    facebook: {
      icon: ['fab', 'fa-facebook-official'],
      text: 'Share'
    },
    twitter: {
      icon: ['fab', 'fa-twitter-square'],
      text: 'Tweet'
    },
    // and so on...
  }
};

@NgModule({
  imports: [
    ShareButtonsModule.withConfig(customConfig)
  ]
})

Latest version (v15)

Older version (v13)

Clone this wiki locally