Ember-Social

Ember-Social is an Ember component library for social sharing widgets. Think Tweet buttons, Facebook like buttons, Linked In share buttons, etc.

We welcome contributions. Adding share buttons can be a tedious, annoying part of a front-end developers. Let's make this library make it easy for everyone.

Installation

ember install ember-social

Usage

Facebook

Like

Like the current URL:

{{facebook-like}}

Like the specified URL:

{{facebook-like url='http://plyfe.github.io/ember-social'}}

Specifying Actions:

{{facebook-like fb-action='recommend'}}

Layouts

Use the fb-layout property for specifying different layouts:

standard The standard like button button_count Includes a count of the number of likes button Just the button without any extra text to the side box_count Similar to button_count, but with the thumbs-up box above the like button

{{facebook-like fb-layout='button_count'}}

Share

Share the current URL:

{{facebook-share}}

Share the specified URL:

{{facebook-share url='http://plyfe.github.io/ember-social'}}

Layouts

icon_link No button-like background, just icon and text box_count Show share count above the button button_count Show share count to the right of the button button Just the button link A text link icon Just the icon, no button or text

{{facebook-share fb-layout='link'}}

As an 'a' tag:

{{#facebook-share tagName="a" url='http://plyfe.github.io/ember-social'}}
  Share this article on Facebook
{{/facebook-share}}

Facepile

Current URL:

{{facebook-facepile}}

Specified URL:

{{facebook-facepile url='http://plyfe.github.io/ember-social'}}

Themes

light dark

{{facebook-facepile fb-colorscheme='dark'}}

Twitter

Share

Current URL:

{{twitter-share}}

Specified URL:

{{twitter-share url='http://plyfe.github.io/ember-social'}}

Specified Text (for the tweet):

{{twitter-share text="Help, I'm stuck in a tweet factory!"}}

As an 'a' tag:

{{#twitter-share tagName='a'}}
Tweet this article
{{/twitter-share}}

Count Display

none Don't show the number of tweets horizontal Show the count to the right of the button vertical Show the count above the button

{{twitter-share count='horizontal'}}

Web Intent System

Twitter SDK can take several additional tags for constructing a tweet:

hashtags Hashtags to use in the tweet related Related accounts for Twitter to suggest to follow after the tweet is sent via The account to @ as responsible for the share

{{twitter-share via='tweetfactory' related='tweet,factory' hashtags='tweet,factory'}}

Card

Twitter cards require a tweet id to link to a specific tweet:

{{twitter-card tweet-id='463440424141459456'}}

To display media with the card, set cards to false:

{{twitter-card tweet-id='463440424141459456' cards=false}}

LinkedIn

Share

Current URL:

{{linkedin-share}}

Specified URL:

{{linkedin-share url='http://plyfe.github.io/ember-social'}}

As an 'a' tag:

{{#linkedin-share tagName="a" url='http://plyfe.github.io/ember-social'}}
  Share this article on LinkedIn
{{/linkedin-share}}

Count Display

top Display count above the button right Display count to the right of the button

{{linkedin-share count='right'}}

Email

Specified subject, body and url attributes. Shares via mailto anchor tag.

{{#email-share subject=`Check out this link` url='http://plyfe.github.io/ember-social' body="Help, I'm stuck in a tweet factory!"}}
Share via email.
{{/email-share}}

Social Widget

Current URL:

{{social-widget}}

Specified URL: (adds email component)

{{social-widget url='http://plyfe.github.io/ember-social'}}

Email Customization: (optional)

emailLinkText The text to display for the link in the widget emailBody The body of the email emailSubject The subject of the email

{{social-widget url='http://plyfe.github.io/ember-social' emailLinkText='Email Share' emailBody='I really liked this article, enjoy!' emailSubject='Great Read...'}}

Layouts

like False to disable like widgets share False to disable share widgets facebook False to disable Facebook widgets twitter False to disable Twitter widget linkedin False to disable LinkedIn widget email False to disable email widget

{{social-widget like=false linkedin=false}}

Contributing

This README outlines the details of collaborating on this Ember addon.

Installation

• git clone this repository
• npm install
• bower install

Running Dummy App

The dummy app demonstrates and explains usage quite well.

• ember server
• Visit your app at http://localhost:4200.

To use in your app, follow the instructions for using ember-cli addons at ember-cli.com.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

TODO

• Implement click/share tracking for {{facebook-like}}
• Implement click/share tracking for {{facebook-facepile}}

Contributors

Thanks to Plyfe for sponsoring initial development and open-sourcing. ember-social authors include: Chris LoPresto, Luke Melia, and Danielle Adams.