Helper for add social share feature in your Rails app. Twitter, Facebook, Weibo, Douban ...
Clone or download

Social Share Button

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

Gem Version

Sites list

  • Facebook
  • Twitter
  • Douban
  • Google+
  • Weibo
  • QZone
  • Google Bookmark
  • Delicious
  • Tumblr
  • Pinterest
  • Email
  • LinkedIn
  • WeChat (Weixin)
  • Vkontakte
  • Odnoklassniki
  • Xing
  • Reddit
  • Hacker News
  • Telegram


2016-10-05 8 51 07


In your Gemfile:

gem 'social-share-button'

Old version for IE and lower browser support:

gem 'social-share-button', '0.2.1'

And install it:

$ bundle install
$ rails generate social_share_button:install


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

SocialShareButton.configure do |config|
  config.allow_sites = %w(twitter facebook weibo)


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


#= require social-share-button
#= require social-share-button/wechat # if you need use WeChat


*= require social-share-button

In Rails 4.1.6 , use @import to require files:


@import "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) %>

Apart from the default title, you can specify the title for the special social network:

<%= social_share_button_tag(@post.title, 'data-twitter-title' => 'TheTitleForTwitter') %>

To specify sites at runtime:

<%= social_share_button_tag(@post.title, :allow_sites => %w(twitter facebook)) %>

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 => "") %>
<%= social_share_button_tag(@post.title, :url => "", :image => "", desc: "The summary of page", via: "MyTwitterName") %>

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

<%= social_share_button_tag(@post.title, :image => "", :'data-type' => 'photo') %>
<%= social_share_button_tag(@post.title, :'data-source' => "", :'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


A couple of gotchas for Facebook only:

Facebook needs the description added

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

This will add the required data-desc element, and Facebook will then accept the request.

Testing from localhost will not work

You will need to test from a live site or Facebook will reject it; localhost will not work.

How to change icon size?

Yes, you can override social-share-button base css to change the icon size.

In you app/assets/stylesheets/application.scss:

$size: 24px;

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