@nymdev/clay-share

clay-share

A simple social media share component

Install

npm install --save @nymdev/clay-share

Adds a share component.

Usage

Once you install it, it will be automatically recognized by amphora. It has multiple fields:

• enabled - an object containing toggles for each service
  • Facebook
  • Twitter
  • LinkedIn
  • Google Plus
  • Pinterest
  • Tumblr
  • Email
  • Print
• url - the url to share (you should set this from another component specific to the page)
• title - the title to share (set from another component)
• siteSlug - the site slug, should be set in your bootstrap.yaml
• twitterHandle - twitter handle for your site, should be set in your bootstrap.yaml
• description - description of the shared item (set from another component)
• pinImage - image of the item, if using Pinterest (set from another component)
• emailPrefix - short message that will be sent in emails, should be set in your bootstrap.yaml (or you could use our default message)
• orientation - horizontal or vertical, depending on where you want to place the component.

We recommend using horizontal for mobile and tablet share components, with vertical being reserved for use on desktop and in sidebars.

To include it, create an instance of it and add a reference inside another component (for example, in an article).

components:
  article:
    instances:
      first-article:
        sideShare:
          _ref: /components/clay-share/instances/first-article
  clay-share:
    instances:
      first-article:
        url: 'first-article.html'
        title: 'First Article'
        siteSlug: 'my-site'
        twitterHandle: 'mysitedotcom'
        description: 'The first article on my site'
        pinImage: 'http://imgs.my-site.com/first-image.jpg'
        emailPrefix: 'I saw this on My Site and thought you might be interested...'
        orientation: 'horizontal'
        # toggles
        enabled:
          facebook: true
          twitter: true
          linkedin: false
          gplus: false
          pinterest: true
          tumblr: false
          email: true
          print: true