Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dolgarev/meteor-shareit
Easy support social sharing buttons for Meteor
https://github.com/dolgarev/meteor-shareit
meteor meteorjs
Last synced: about 5 hours ago
JSON representation
Easy support social sharing buttons for Meteor
- Host: GitHub
- URL: https://github.com/dolgarev/meteor-shareit
- Owner: dolgarev
- License: mit
- Created: 2015-05-06T05:41:01.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-03-21T11:45:31.000Z (over 8 years ago)
- Last Synced: 2024-05-28T21:28:56.534Z (6 months ago)
- Topics: meteor, meteorjs
- Language: CoffeeScript
- Homepage: https://atmospherejs.com/liberation/shareit
- Size: 22.5 KB
- Stars: 3
- Watchers: 3
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Share It
This package is based on packages [joshowens:shareit](https://atmospherejs.com/joshowens/shareit) and [lovetostrike:shareit](https://atmospherejs.com/lovetostrike/shareit). It containes some bugfixes for Facebook and Twitter.
The package is compatible with Meteor 1.2.
After installation you have to add initialization code. For example, in the directory **lib**:
```javascript
if (Meteor.isClient) {
ShareIt.init({
siteOrder: ['facebook', 'twitter'],
sites: {
'facebook': {
'appId': 'YOUR_APPLICATION_ID',
'version': 'v2.3'
}
},
iconOnly: true,
applyColors: false
});
}
```
**UPD.**
Now you can customize button text for each social network. Thank you, @briansayles!
```javascript
if (Meteor.isClient) {
ShareIt.init({
siteOrder: ['facebook', 'twitter'],
sites: {
'facebook': {
'appId': 'YOUR_APPLICATION_ID',
'version': 'v2.3'
'buttonText': 'Share on FB'
}
},
iconOnly: true,
applyColors: false
});
}
```
---
I've built social sharing buttons a few times and decided it was time to extract it to a package! The goal of this package is to do a few things:
* Render appropriate meta tags for Facebook/OG and Twitter (via spiderable)
* Support social sharing buttons with bootstrap-3 (default) and font-awesome
* Expand to support other social platforms besides just twitter & facebook, in a configurable way
## Quick Start
meteor add liberation:shareit
## Usage
Simply put `{{>shareit}}` in your template. We use the following keys in your
**current data context** (more on this below):
* `title`
* `author` - expects a string or a function (see below). The function is used only for twitter. If an object is returned, and `author.profile.twitter` exists, this value will be used instead.
* `excerpt` or `description` or `summary` in FB and Twitter
and optionally:
* `url` - defaults to current page URL
* `sitenap` - defaults to current page hostname
* `thumbnail` - `image` in FB and Twitter. Expects a function (see below).
Notes:
1. **Facebook**:
1. The `og:type` is `article`.
1. Images should at least 1200x630; if above 600x315 you'll get a big photo
share, and below, a small photo, see
[this](https://developers.facebook.com/docs/sharing/best-practices#images).
1. [Sharing Best Practices for Websites & Mobile Apps](https://developers.facebook.com/docs/sharing/best-practices)
1. **Twitter**
1. The `twitter:card` type is `summary`.
1. Image, min of 120x120 & < 1MB, see [this](https://dev.twitter.com/cards/types/summary). For "large image summaries" (in our roadmap, below), at least 280x150 &
< 1 MB, see [this](https://dev.twitter.com/cards/types/summary-large-image).
1. **Google+** tags are not added yet, but when you share on Google+, it's smart
enough to get everything it needs from the other tags.
1. [Social media image dimensions 2014: the complete guide for Facebook, Twitter and Google +](http://postcron.com/en/blog/social-media-image-dimensions-sizes/)
### Regarding the Data Context
`{{> shareit}}` will work anywhere in a template where `{{title}}`, `{{excerpt}}`,
etc would work. The source of the data context would be the `data()` function
for a route in `iron:router`, or from a surrounding `{{#with}}` tag. (You can
use `{{#each}}` too, but only the last rendered block will be used to set the
page meta tags:
```handlebars
{{title}}
{{> shareit}}
```
Just like any Meteor template/component, you can override the data context
for a single component by specifying a single non-key argument. e.g.
`{{> shareit shareData}}` will get `title` from `{{shareData.title}}`, etc.
shareData can itself be a key in the current data context, or a helper
function of the current template, e.g.:
```handlebars
{{shareit shareData}}
```
```js
Template.article.helpers({
shareData: function() {
return { title: ..., etc } || MyCol.findOne() || etc
}
});
```
### Functions
For keys that take functions (author, image), the value of this function will be used. We use these functions to do lookups. If the function is setup anonymously inside a helper, `this` is the current data context. e.g.
```js
Template.article.helpers({
shareData: function() {
return {
title: this.data,
author: Meteor.users.findOne(this.authorId)
}
});
```
## Configuration
Somewhere in your client (not server) code you can configure ShareIt. This is completely optional and the defaults are listed below:
```js
ShareIt.configure({
sites: { // nested object for extra configurations
'facebook': {
'appId': null // use sharer.php when it's null, otherwise use share dialog
},
'twitter': {},
'googleplus': {},
'pinterest': {}
}
classes: "large btn", // string (default: 'large btn')
// The classes that will be placed on the sharing buttons, bootstrap by default.
iconOnly: false, // boolean (default: false)
// Don't put text on the sharing buttons
applyColors: true, // boolean (default: true)
// apply classes to inherit each social networks background color
faSize: '', // font awesome size
faClass: '' // font awesome classes like square
});
```
If you have valid facebook app id, we recommend you configure it to use Facebook Share Dialog. If no app id is provided, it would use deprecated sharer.php. Example facebook configuration:
```js
ShareIt.configure({
sites: {
'facebook': {
'appId': YOUR_APP_ID
}
}
});
```
## Spiderable
For a website to be well-indexed by search engines, it is necessary to add one of the spiderable packagke. liberation:sharit used to contain such a dependency but looking at the variety of such packages, it is now bring-your-own. Feel free to choose within "spiderable" (original), ongoworks:spiderable (Docker-friendly with phantomjs), lufrai:spiderable2 (Docker-friendly with zombie browser).
## Roadmap
* Support text OR functions for `thumbnail`
* Rename `thumbnail` to image with backwards compatilility (FB suggestion of 1200x630 is not a thumbnail :))
* Twitter: use [summary](https://dev.twitter.com/cards/types/summary) for `thumbnail`, and [summary_large_image](https://dev.twitter.com/cards/types/summary-large-image)
for `image`
* Google+ tags ([snippets](https://developers.google.com/+/web/snippet/))