Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huacnlee/social-share-button
Helper for add social share feature in your Rails app. Twitter, Facebook, Weibo, Douban ...
https://github.com/huacnlee/social-share-button
front-end rails social-network
Last synced: 22 days ago
JSON representation
Helper for add social share feature in your Rails app. Twitter, Facebook, Weibo, Douban ...
- Host: GitHub
- URL: https://github.com/huacnlee/social-share-button
- Owner: huacnlee
- License: mit
- Created: 2012-01-04T05:46:57.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2021-05-06T11:09:31.000Z (over 3 years ago)
- Last Synced: 2024-04-04T07:46:13.857Z (7 months ago)
- Topics: front-end, rails, social-network
- Language: CoffeeScript
- Homepage:
- Size: 426 KB
- Stars: 581
- Watchers: 24
- Forks: 313
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: MIT-LICENSE
Awesome Lists containing this project
README
# Social Share Button
This is a gem to helper you quick create a share feature in you Rails apps.
[](https://badge.fury.io/rb/social-share-button)
# 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`:
```ruby
gem 'social-share-button'
```
Old version for IE and lower browser support:
```ruby
gem 'social-share-button', '0.2.1'
```
And install it:
```bash
$ 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:
```ruby
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`
```erb
<%= social_share_button_tag(@post.title) %>
```
Apart from the default title, you can specify the title for the special social network:
```erb
<%= social_share_button_tag(@post.title, 'data-twitter-title' => 'TheTitleForTwitter') %>
```
To specify sites at runtime:
```erb
<%= social_share_button_tag(@post.title, :allow_sites => %w(twitter facebook)) %>
```
And you can custom rel attribute:
```erb
<%= social_share_button_tag(@post.title, :rel => "twipsy") %>
```
You can also specify the URL that it links to:
```erb
<%= social_share_button_tag(@post.title, :url => "http://myapp.com/foo/bar") %>
```
```erb
<%= 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-*`
```erb
<%= 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`:
```scss
$size: 24px;
.social-share-button {
.ssb-icon {
background-size: $size $size;
height: $size;
width: $size;
}
}
```
## Demo
[https://ruby-china.org/wiki/about](https://ruby-china.org/wiki/about)