ember-social-share

Social share buttons for EmberJS app that works without meta tags.


Keywords
ember-addon, social, share, ui, buttons
License
MIT
Install
npm install ember-social-share@0.2.8

Documentation

Ember-social-share

Build Status Ember Observer Score Maintainability Test Coverage

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

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