Social Share Button

This is a gem to helper you quick create a share feature in you Rails apps.

Sites list

• Facebook
• Twitter
• Douban
• Google+
• Weibo
• QZone
• Tencent Weibo
• Renren
• Hi Baidu
• Kaixin001
• Google Bookmark
• Delicious
• Tumblr
• Plurk
• Pinterest
• Email

Screenshot

Install

In your Gemfile:

gem 'social-share-button'

And install it:

$ bundle install
$ rails generate social_share_button:install

Configure

You can config config/initializes/social_share_button.rb to choose which site do you want to use:

SocialShareButton.configure do |config|
  config.allow_sites = %w(twitter facebook google_plus weibo douban tqq renren qq kaixin001 baidu tumblr plurk pinterest email)
end

Usage

You need add require css,js file in your app assets files:

app/assets/javascripts/application.coffee

#= require social-share-button

app/assets/stylesheets/application.scss

*= require social-share-button

Then you can use social_share_button_tag helper in views, for example app/views/posts/show.html.erb

<%= social_share_button_tag(@post.title) %>

And you can custom rel attribute:

<%= social_share_button_tag(@post.title, :rel => "twipsy") %>

You can also specify the URL that it links to:

<%= social_share_button_tag(@post.title, :url => "http://myapp.com/foo/bar") %>

For the Tumblr there are an extra settings, prefixed with :'data-*'

<%= social_share_button_tag(@post.title, :image => "https://raw.github.com/vkulpa/social-share-button/master/lib/assets/images/sprites/social-share-button/tumblr.png", :'data-type' => 'photo') %>
<%= social_share_button_tag(@post.title, :'data-source' => "https://raw.github.com/vkulpa/social-share-button/master/lib/assets/images/sprites/social-share-button/tumblr.png", :'data-type' => 'photo') %>

Those two above calls are identical. Here are the mapping of attributes depending on you data-type parameter

| data-type         | standard  | custom :"data-*" prefixed  |
--------------------------------------------------------------
| link (default)    | title     | data-title                 |
|                   | url       | data-url                   |
| text              | title     | data-title                 |
| photo             | title     | data-caption               |
|                   | image     | data-source                |
| quote             | title     | data-quote                 |
|                   |           | data-source                |

Demo

http://ruby-china.org/wiki/about