Description
This is a gem to helper you quick create a share feature in you Rails apps. Facebook, Twitter, Douban, Google+, Weibo, QZone, Google Bookmark, Delicious, Tumblr, Pinterest, Email, LinkedIn, WeChat (Weixin), Vkontakte, Odnoklassniki, Xing, Reddit, Hacker News, Telegram.
Social Share Button alternatives and similar gems
Based on the "Social Networking" category.
Alternatively, view Social Share Button alternatives based on common mentions on social networks and blogs.
SaaSHub - Software Alternatives and Reviews
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Social Share Button or a related project?
README
Social Share Button
This is a gem to helper you quick create a share feature in you Rails apps.
Sites list
- Douban
- QZone
- Google Bookmark
- Delicious
- Tumblr
- WeChat (Weixin)
- Vkontakte
- Odnoklassniki
- Hacker News
- Telegram
Screenshot
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 |
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;
}
}