Ember-social-share NPM

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 bashare-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="test@example.com" 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"}}