Skip to content

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

License

Notifications You must be signed in to change notification settings

appfolio/social-share-button

This branch is 2 commits ahead of, 38 commits behind huacnlee/social-share-button:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

1ae4962 · Feb 4, 2022
Feb 3, 2022
Dec 15, 2016
Nov 4, 2016
Dec 15, 2016
Mar 4, 2013
Dec 15, 2016
Jun 28, 2016
Apr 8, 2014
Oct 24, 2016
Jun 28, 2016
Nov 4, 2016

Repository files navigation

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
  • Xing
  • Reddit
  • Hacker News

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

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') %>

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                |

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

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

About

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

Resources

License

Stars

Watchers

Forks

Languages

  • CoffeeScript 51.2%
  • Ruby 38.8%
  • SCSS 10.0%