rails-social-share-button

rails-social-share-button is one of the best rails helper gem to add social share feature in your Rails app. Include Twitter, Facebook, Weibo, Douban, QQ, Tumblr...

Installation

Add this line to your application's Gemfile:

gem 'rails-social-share-button'

And then execute:

$ bundle

Or install it yourself as:

$ gem install rails-social-share-button

Generate configuration file:

$ rails generate rails_social_share_button:install

Configuration

You can customize config/initializers/rails_social_share_button.rb to set the social network sites which you want to display:

RailsSocialShareButton.configure do |config|
  config.allow_sites = %w(facebook twitter google_bookmark pinterest telegram reddit tumblr 
                          linkedin telegram whatsapp_app whatsapp_web hacker_news delicious 
                          email vkontakte odnoklassniki xing wechat weibo qq douban)
end

Usage

Step1: Add //= require rails-social-share-button or #= require social-share-button/wechat in app/assets/javascripts/application.js:

//= require rails-social-share-button
//= require rails-social-share-button/wechat # If you gonna use WeChat

Step2: Add *= require rails-social-share-button in app/assets/stylesheets/application.css or app/assets/stylesheets/application.scss:

*= require rails-social-share-button

For Rails 4.1.6:

@import "rails-social-share-button";

Documentation

Now you can use social_share_button_tag helper method in views to display the social share buttons.

For example:

<%= rails_social_share_button_tag(@title) %>

You can set title for the special social network:

<%= rails_social_share_button_tag(@title, 'data-twitter-title' => 'Title for Twitter') %>

You can set the social network sites which you want to display at runtime:

<%= rails_social_share_button_tag(@title, allow_sites: %w(facebook twitter)) %>

You can set rel attribute:

<%= rails_social_share_button_tag(@title, rel: "Tweet") %>

You can set the URL that it links to in the content:

<%= rails_social_share_button_tag(@title, url: "http://yourapp.com/hello_world") %>

<%= rails_social_share_button_tag(@title, url: "http://yourapp.com/hello_world", image: "http://yourapp.com/images/hello_world.jpg", desc: "The summary of the content", via: "YourTwitterName") %>

For Tumblr there are an extra settings that prefixed with data-*:

<%= rails_social_share_button_tag(@title, image: "http://yourapp.com/images/hello_world.jpg", 'data-type' => 'photo') %>
<%= rails_social_share_button_tag(@title, 'data-source' => "http://yourapp.com/images/hello_world.jpg", 'data-type' => 'photo') %>

The mapping of attributes:

Facebook

Facebook needs the description added.

<%= rails_social_share_button_tag('Share to Facebook', url: course_path(@course), desc: @course.description) %>

Note: You need to test from a live site or Facebook will reject it (localhost will not work).

Custom Icon Size

You can override rails-social-share-button base css to customize the icon size in app/assets/stylesheets/application.scss:

$size: 24px;

.rails-social-share-button {
  .ssb-icon {
    background-size: $size $size;
    height: $size;
    width: $size;
  }
}

License

MIT License