No commit activity in last 3 years
No release in over 3 years
There's a lot of open issues
Helper for add social share feature in your Rails app. Twitter, Facebook, Weibo, Douban, QQ, Tumblr ...
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

>= 0

Runtime

 Project Readme

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
  • Weibo
  • QZone
  • Google Bookmark
  • Delicious
  • Tumblr
  • Pinterest
  • Email
  • LinkedIn
  • WeChat (Weixin)
  • Vkontakte
  • Odnoklassniki
  • Xing
  • Reddit
  • Hacker News
  • Telegram
  • WhatsApp

Screenshot

2016-10-05 8 51 07

Install

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

Configure

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)
end

More site names you can visit https://github.com/huacnlee/social-share-button/blob/master/lib/social_share_button/config.rb#L33 to found it.

Usage

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

app/assets/javascripts/application.coffee

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

app/assets/stylesheets/application.scss

*= require social-share-button

In Rails 4.1.6 , use @import to require files:

app/assets/stylesheets/application.css.scss

@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 => "http://myapp.com/foo/bar") %>
<%= social_share_button_tag(@post.title, :url => "http://myapp.com/foo/bar", :image => "http://foo.bar/images/a.jpg", 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 => "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

Facebook

A couple of gotchas for Facebook only:

Facebook needs the description added

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

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;
  }
}

Demo

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