Social Share Button

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

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

Tags: Social     Social Networking     Social Network Builders    

Latest version: v1.2.4

README

Social Share Button

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

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