---
title: Social Sharing
description: Buttons and logic needed to share current page information to various social media outlets.
sass: ./scss/_socialsharing.scss
js: ./js/social/bonsai.socialsharing.js
---

### How to use
By default, Facebook, Twitter, Tumblr, and email options are provided.

#### Social sharing as stand alone icons
```html_example
<div data-social-sharing></div>
```

### Social sharing as dropdown menu list
```html_example
<ul id="social-sharing-drop" class="dropdown menu" data-dropdown-menu>
    <li>
        <button class="button dropdown secondary">Share</button>
        <ul class="menu vertical" data-social-sharing></ul>
    </li>
</ul>
```

### Social sharing with specific list of media types
```html_example
<div data-social-sharing data-media-types='["facebook", "twitter"]'></div>
```

```html_example
<ul class="dropdown menu" data-dropdown-menu>
    <li>
        <button class="button dropdown secondary">Share</button>
        <ul class="menu vertical" data-social-sharing data-media-types='["facebook", "twitter"]'></ul>
    </li>
</ul>
```

## Guidelines
1. Ensure each button has a background color that matches the brand guidelines of the social network. e.g., use Facebook's "blue" as the background color of the button when sharing to Facebook.
1. Ensure each button has a tooltip that adheres to this format: "Share with {{ social network }}".


## Accessibility
1. Ensure every button has an `aria-label` that describes which social network the current page will be shared to.