The main purpose of this addon to provide possibility to share links with images, title, descriptions etc without meta properties and without server rendering.
ember install ember-social-share
There are two ways to embed share buttons to page. First, you can add share buttons one by one. Example:
{{#fb-share-button}}Share{{/fb-share-button}}
{{#vk-share-button}}Share{{/vk-share-button}}
{{#twitter-share-button}}Tweet{{/twitter-share-button}}
{{#linkedin-share-button}}Share{{/linkedin-share-button}}
{{#gplus-share-button}}Share{{/gplus-share-button}}
{{#email-share-button}}Share{{/email-share-button}}
{{#reddit-share-button}}Share{{/reddit-share-button}}
Or you can add share buttons like one share panel:
{{share-panel buttons="fb,vk,twitter,linkedin,gplus,email,reddit" labels="Share,Share,Tweet,Share,Share"}}
There are some properties for any of share buttons:
- adaptive - boolean flag for adaptive design (default: true)
There are some properties for share-panel:
- buttons - comma-separated list of social networks
- labels - comma-separated list of buttons labels
- adaptive - boolean flag for adaptive design (default: true)
At section below you can find share options that can be set for each button or panel.
| Option | Description | VKontakte | Google+ | |||||
|---|---|---|---|---|---|---|---|---|
| url | page url (by default - current page url) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| title | share title (tweet message for twitter) | ✕ | ✓ | ✓ | ✓ | ✕ | ✓ | ✓ |
| text | description | ✕ | ✓ | ✕ | ✓ | ✕ | ✓ | ✕ |
| image | image url | ✕ | ✓ | ✕ | ✕ | ✕ | ✕ | ✕ |
| hashtags | comma-separated list of hashtags (Facebook only uses the first one) | ✓ | ✕ | ✓ | ✕ | ✕ | ✕ | ✕ |
| via | link to twitter account or source | ✕ | ✕ | ✓ | ✓ | ✕ | ✕ | ✕ |
| quote | excerpt from page | ✓ | ✕ | ✕ | ✕ | ✕ | ✕ | ✕ |
| recipient | mail receiver | ✕ | ✕ | ✕ | ✕ | ✕ | ✓ | ✕ |
{{#fb-share-button url="http://example.com" quote="Here is some text from the source."}}Share{{/fb-share-button}}
{{#vk-share-button title="Some Russian title!" text="Another description" image="some image url"}}Share it!{{/vk-share-button}}
{{#twitter-share-button title="Look at this!" url="http://example.com" hashtags="example" via="example.com"}}Tweet{{/twitter-share-button}}
{{#linkedin-share-button title="Great artile!" text="Another description" image="some image url"}}Share it!{{/linkedin-share-button}}
{{#gplus-share-button url="http://example.com"}}Share{{/gplus-share-button}}
{{#email-share-button recipient="[email protected]" title="Test subject" text="Test email"}}Send to email{{/email-share-button}}
{{#reddit-share-button title="Check this out!" url="http://example.com"}}Share{{/reddit-share-button}}
{{share-panel adaptive=false title="Example title" text="Example text!" image="sorry didnt find any image" hashtags="example"}}
Icons are provided by Font Awesome's Ember plugin. Find out more about the usage here: https://github.com/FortAwesome/ember-fontawesome#usage