Popularity
6.0
Stable
Activity
1.5
Declining
575
23
309

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.

Programming language: CoffeeScript
License: MIT License
Latest version: v1.2.4

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.

Do you think we are missing an alternative of Social Share Button or a related project?

Add another 'Social Networking' Gem

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

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