Share it

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

See also our project home (WIP).

Quick Start

meteor add joshowens: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:
2. The og:type is article.
3. Images should at least 1200x630; if above 600x315 you'll get a big photo

share, and below, a small photo, see this.

1. Sharing Best Practices for Websites & Mobile Apps

2. Twitter

3. The twitter:card type is summary.

4. Image, min of 120x120 & < 1MB, see this. For "large image summaries" (in our roadmap, below), at least 280x150 &

< 1 MB, see this.

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 +

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:

<template name="article">
  <h1>{{title}}</h1>
  {{> shareit}}
</template>

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.:

<template name="article">
  {{shareit shareData}}
</template>

1Template.article.helpers({
2  shareData: function() {
3    return { title: ..., etc } || MyCol.findOne() || etc
4  }
5});

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.

1Template.article.helpers({
2  shareData: function() {
3    return {
4      title: this.data,
5      author: Meteor.users.findOne(this.authorId)
6  }
7});

Configuration

Somewhere in your client (not server) code you can configure ShareIt. This is completely optional and the defaults are listed below:

1  ShareIt.configure({
2    sites: {                // nested object for extra configurations
3        'facebook': {
4            'appId': null	// use sharer.php when it's null, otherwise use share dialog
5        },
6        'twitter': {},
7        'googleplus': {},
8        'pinterest': {}
9    },
10    classes: "large btn", // string (default: 'large btn')
11                          // The classes that will be placed on the sharing buttons, bootstrap by default.
12    iconOnly: false,      // boolean (default: false)
13                          // Don't put text on the sharing buttons
14    applyColors: true,     // boolean (default: true)
15                          // apply classes to inherit each social networks background color
16    faSize: '',            // font awesome size
17    faClass: ''		  // font awesome classes like square
18  });

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:

1    ShareIt.configure({
2        sites: {
3            'facebook': {
4                'appId': YOUR_APP_ID
5            }
6        }
7    });

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 for thumbnail, and summary_large_image

for image

• Google+ tags (snippets)