Ember-social-share

The main purpose of this addon to provide possibility to share links with images, title, descriptions etc without meta properties and without server rendering.

DEMO

Installation

ember install ember-social-share

Usage

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.

Options

Option | Description | Facebook | VKontakte | Twitter | LinkedIn | Google+ | E-mail | Reddit | ------ | ----------- | -------- | --------- | ------- | -------- | ------- | ------ | ------ | 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 | ✕ | ✕ | ✕ | ✕ | ✕ | ✓ | ✕ |

Example

{{#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"}}

Icon credit

Icons are provided by Font Awesome's Ember plugin. Find out more about the usage here: https://github.com/FortAwesome/ember-fontawesome#usage