Skip to content

Latest commit

 

History

History
112 lines (82 loc) · 2.73 KB

README.md

File metadata and controls

112 lines (82 loc) · 2.73 KB
Raw

Social Share Button

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

Sites list

  • Facebook
  • Twitter
  • Douban
  • Google+
  • Weibo
  • QZone
  • Tencent Weibo
  • Renren
  • Hi Baidu
  • Kaixin001
  • Google Bookmark
  • Delicious
  • Tumblr
  • Plurk
  • Pinterest
  • Email
  • Linkedin
  • Blogger

Screenshot

Install

In your Gemfile:

gem 'social-share-button'

And install it:

$ bundle install
$ rails generate social_share_button:install

Configure

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

SocialShareButton.configure do |config|
  config.allow_sites = %w(twitter facebook google_plus weibo douban tqq renren qq kaixin001 baidu tumblr plurk pinterest email linkedin blogger)
end

Usage

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

app/assets/javascripts/application.coffee

#= require social-share-button

app/assets/stylesheets/application.scss

*= require 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) %>

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

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                |

Demo

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