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

WARNING: Facebook has stoped supporting custom share parameters so this addon is pretty useless for FB at this moment. More details here.

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}}

Or you can add share buttons like one share panel:

{{share-panel buttons="fb,vk,twitter,linkedin,gplus" 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+
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	✕	✕	✓	✕	✕
via	link to twitter account or source	✕	✕	✓	✓	✕

Example

{{#fb-share-button url="http://example.com" title="Here is example!" text="Some description..."}}Share{{/fb-share-button}}
{{#vk-share-button title="Some russion 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}}


{{share-panel adaptive=false title="Example title" text="Example text!" image="sorry didnt find any image" hashtags="example"}}

crowdcompass / ember-social-share Goto Github PK