huacnlee / social-share-button

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

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

social-share-button's Issues

optimize icons

hi,
would be very great if you could optimize the image.
Compressing social-share-button/email.svg could save 1.5KiB (53% reduction).
and same for all others

thanks

Pinterest Not Pulling Image

Hi,
Love this gem, thank you. Facebook and Twitter work great, but Pinterest does not pull in an image, any idea on how to fix this.

Thank you

Social Share Button v0.3.3 Facebook error

Hello,
In the version 0.3.3, facebook share button doesn't work anymore. When i click on it, nothing appears ... only a "#" is insert at the end of the url in my navigator.

Thx for help.

Facebook share error

I am unable to share on Facebook using the gem. However, sharing on Twitter and Linkedin works. Has anyone experience the same issue?

Here is what I keep getting when trying to share on FB:

分享到微信功能，share to wechat？

点击，popup一个二维码
click and popup an QR code

new version with bundle

when will the new version (with linkedin) be available via bundle update ?

thanks

After sharing content the page is getting closed abruptly

I am using "social-share-button' gem in my rails application (rails 4.0.1), after sharing my Post over social networking sites, the page is getting closed abruptly.

Any way to customize the redirection path and indicate the same to a valid page with a nice confirmation Message ?

my View section :
<%= social_share_button_tag(@blog.name, :url =>"http://192.168.9.10:3000/blogs/") %>

Social_share_button.rb configuration File :

SocialShareButton.configure do |config|
config.allow_sites = %w(twitter facebook google_plus)
end

Any ways to fix this issue ?

gem support...

Guys, this gem wont work on rails version 3.2.13 ?

Support for Slack

Do you have Slack on your list of social media sites to add in the future? It would be great is Slack could be added to your product roadmap.

extra chars

Hi
I have a little problem with your gem. Sharing is ok, but it shows extra text in link name and I couldn't figure it out how to erase it:

<a class="social-share-button-facebook" data-site="facebook" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing"="">Share To"&gt;</a>

this is show up: Share To">

thx for response

Title & Description attributes are not working while sharing to facebook & google plus

data-title & data-desc attributes are not taking while sharing on facebook and google plus

when "facebook"
SocialShareButton.openUrl("http://www.facebook.com/sharer.php?u=#{url}",popup)
when "google_plus"
SocialShareButton.openUrl("https://plus.google.com/share?url=#{url}", popup)

How to get large icons

Hello, I integrated social-share-button 0.1.8 successfully. However I'd like to get little large icons apart from default icons. Is there is way like by specifying

?

And another thing is, in this link, it has mentioned that I can use " :url => " to specify a link. But I didn't get what that exactly means. I thought instead of customizing which social sharing sites to be appear in "config/initializers/social_share_button.rb:", I can specifically give "<%= social_share_button_tag("selfstarter", :url => "http://facebook.com") %>". But it is not working as expected.

Thank you.

Please add Pinterest

This is a very cool gem for quickly adding social sharing to your RoR app.

If you could please add Pinterest, that would make it outstanding! :)

Thanks

via twitter param doesn't work

In the Readme, a comma is missing before 'via: '
Plus, after the "via" the account name is missing too, there's only the "@".

feature request : social_share_button_tag without javascript

hi,

thanks for this great tools.
social_share_button_tag is actually generated html that need javascript. Could be great to be able to generate simple link without javascript nor image

UI broke While Increasing size of icons

Hi huacnlee,

First of all thanks for the awesome gem.

I am facing issue while increasing size of icons.
I tried below:
.social-share-button-facebook {
display: inline-block;
width: 64px;
height: 64px;
}
But it broke visiblity of icons. See attached screenshot. Multiple icons started appearing.

Please help me in resolving the issue. I am new to CSS so i might be missing some tricks.

The image social-share-button.png is not served on production rails 4.2.3

It was working earlier, before I updated to rails 4.2.3 from 4.1.3.rc3.

At the moment the url it is trying to hit is /assets/sprites/social-share-button.png, i.e without the fingerprinted key behind it. It should request '/assets/sprites/[email protected]' instead.

I checked that the 'public/assets/sprites' folder on production has all the fingerprinted sprites, so something must be wrong with path generation. Any fix for this because I don't want to revert my upgrade for this. The images are served in prod mode on my local correctly.

Facebook share not working while directly using HTML instead of tag.

Hi,

I was trying to use social share button in my project. It was working fine when I used it directly as a tag it is working.
<%= social_share_button_tag(data.heading, :url => "#{request.base_url}/path", :image => data.image, desc: "some desc" ,:popup => "true") %>

But in a particular scenario I try to use the row html which the tag generate internally, directly in my code as below. Because I am using javascript library handlebars.js to generate html. Inside that we can't use a rails tag. So I tried with direct HTML.

All other sharing working properly. But when click on face book, pop up is coming and immediately closing it before doing any action. Can any one give a solution.

Modal

Would be great to have an option to view this in a modal.

页面奇怪的东西

不知道是什么原因导致的?之前还好好的。

Unable to override url

Hello team,
how we can add url option for facebook.i am trying to use this option in my localhost and when i click on facebook share icon but not working for me.
here @product.slug returns the name of the product
<%= social_share_button_tag(:url => "http://www.skinnymint.com/products/#{@product.slug}") %>
please find here the attached screenshot

Please

can not override css , I want to set button disabled

I only set the button disabled by javascript

Issues with facebook

I am using your gem for sharing accounts. Here issue with facebook share. It's only taking default images and text to share. I was given exact text what i needs to show in user facebook profile. Let me know about this.

<%= social_share_button_tag("exact text here:", :url => "http://example.herokuapp.com/", :image => "#{@drive.photo.url(:original)}") %>

Please help here. Thanks in advance.

via: options not working it appears ampty

Hi Im trying to specify the via: option with my twitter username but it does not work

<%= social_share_button_tag(@ofert.title, popup: "true", via: "Mytwitter") %>

when trying to share it show Via in the text of the tweet but does not display anything else...

LinkedIn 分享能不能把summary & source 参数加上?

https://developer.linkedin.com/docs/share-on-linkedin

Request parameters

Parameter   Description                                         Max  Length Required
url The url-encoded URL of the page that you wish to share. 1024    Yes
mini    A required argument who's value must always be:  true   4   Yes
title   The url-encoded title value that you wish you use.           200    No
summary The url-encoded description that you wish you use.  256 No
source  The url-encoded source of the content (e.g. your website or application name) 200   No

social-share-button/app/assets/javascripts/social-share-button.coffee#45

请问有没有什么办法自定义设置linkedin分享里的图片? 我看了 https://developer.linkedin.com/docs/share-on-linkedin 的 api 里面没有图片配置参数.

Will the social-share-button return object id?

Hi. I am using social-share-button in my rails application to share videos on facebook. I want to capture the object id of shared video. Will is possible using social-share-button?

weichat share not work

I have included Weichat API JS file in my page.

Will it return any message once the message posted successfully?

Hi,

WIll the gem return any message/ notification once the message posted successfully?

Make buttons with counter. It encourages more sharing.

Make buttons with counter. It encourages more sharing.

Links don't open up in popups

I'm using the latest master branch and have tried the popup: 'true' and without that option, it still opens the share page in the same window no matter what I try.

this is my share code without popup: 'true':

<%= social_share_button_tag(@version.name,
                                        'data-caption': @version.name,
                                        url: project_url(@project),
                                        'data-url': project_url(@project),
                                        image: @version.screenshots.first.screenshot.url,
                                        'data-source': @version.screenshots.first.screenshot.url,
                                        'data-type': 'photo',
                                        via: 'hyperpadapp') 
%>

With popup: 'true':

<%= social_share_button_tag(@version.name,
                                        popup: 'true',
                                        'data-caption': @version.name,
                                        url: project_url(@project),
                                        'data-url': project_url(@project),
                                        image: @version.screenshots.first.screenshot.url,
                                        'data-source': @version.screenshots.first.screenshot.url,
                                        'data-type': 'photo',
                                        via: 'hyperpadapp') 
%>

Am I missing something?

google + sharing shows thumbnails options to navigate and select

When i share a link with image on google page it shows thumbnails options to navigate and select. I don't want "IZ LFa" css class.

Please check below g+ url
https://plus.google.com/share?url=http%3A%2F%2F54.208.12.112%2Ftvshows%2Fqubool-hai&t=Qubool%20Hai

Popup Issue

Line 4 of social-share-button.coffee should be:
window.open(url,'popup','height=500,width=500')
instead of:
window.open(url,'poup','height=500,width=500')

Please add Linkedin

Thanks for this great gem, would like even more if you could add support for Linkedin..

New VK logo

Please, change the VK logo.
Official source (you can download it at the bottom):
https://vk.com/about

Thanks ))

Popop option

Hi,

trying to use this awesomeness, but trying

= social_share_button_tag("SHARE", :popup => "true")

with or without. It doesn't make any difference. Or what should i expect to happen ?

rails 4.1.0

couldn't find file 'social-share-button' with type 'application/javascript'

Well was wondering if Im the only one having this issue.. for some reason its not finding it when I try to require at the application.js file

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

= require social-share-button

Licence

can you please add the licence to the gem and the images

How do I link pinterest url if our platform doesn't use coffee script?

Our platform doesn't use coffee script and I couldn't locate the file that links to all the url's.

image.-path ?

i've noticed that image-path function in the scss file is not resolved when i deploy my app, where this function should be found?

How To Fix It ?

<a href="#" class="social-share-button-twitter" data-site="twitter" onclick="return SocialShareButton.share(this);" rel="nofollow " title="&lt;span class=" translation_missing"="">Share To"&gt;</a>

Not rendering the buttons properly

I'm trying to implement the buttons but next to each button it is printing "Share To" href="#">"

<a rel="nofollow " data-site="facebook" class="social-share-button-facebook" onclick="return SocialShareButton.share(this);" title="<span class=" translation_missing"="">Share To" href="#">

How can I stop this happening and render just the buttons?

Why icons are not visible?

At the development mode, every thing works fine, but, when I uploaded my app, icons are not visible,
I still can click on them, and when I hoover mouse over them, I can see the tool-tip showing.

Any idea ?

Replace the icons with news ones ?

Is there a way for me to replace the icons you used to represent each social network with that of my own? I want to use some flat icons i found on the web. thanks for your help.

How to get the share count?

I am looking for social share button for a while. But this is the best one I've seen. Thank you!

However, is there any way to get the share count?

via param is missed for twitte rbutton

https://dev.twitter.com/web/tweet-button#optout
via - Screen name of the user to attribute the Tweet to

using popup instead of opening new tab

I wonder if this gem has ability to open a popup instead of opening a new tab ? I find that opening a popup is more convenient. Is it possible ? if not any guide on how to implement this.

微信分享有问题

图片用的是：weichat.svg
social-share-button.coffee里面：判断的是weixin
weichat != weixin 没统一

How to remove the link text "Share to>" from buttons?

Hello everyone,

I'm using this gem but when the icons link to share have a text "Share to>" and i don't know to remove, i've tryed removing line "share_to: Share to %{name}" from the "social_share_button.en.yml" but nothing happens.

I also look into the javascript file, but it isn't there, can someone help me on this?

Thank you!

Error generating social_share_button

Include the gem in Gemfile , run bundle install and run rails generate social_share_button:install, it returns an error:
/config/application.rb:10:in <module:SocialShareButton>': uninitialized constant SocialShareButton::Rails::Application (NameError) from /SocialShareButton/config/application.rb:9:in<top (required)>'
from /home/user/.rvm/gems/ruby-2.2.1/gems/spring-1.4.1/lib/spring/application.rb:82:in require' from /home/user/.rvm/gems/ruby-2.2.1/gems/spring-1.4.1/lib/spring/application.rb:82:inpreload'
from /home/user/.rvm/gems/ruby-2.2.1/gems/spring-1.4.1/lib/spring/application.rb:143:in serve' from /home/user/.rvm/gems/ruby-2.2.1/gems/spring-1.4.1/lib/spring/application.rb:131:inblock in run'
from /home/user/.rvm/gems/ruby-2.2.1/gems/spring-1.4.1/lib/spring/application.rb:125:in loop' from /home/user/.rvm/gems/ruby-2.2.1/gems/spring-1.4.1/lib/spring/application.rb:125:inrun'
from /home/user/.rvm/gems/ruby-2.2.1/gems/spring-1.4.1/lib/spring/application/boot.rb:18:in <top (required)>' from /home/user/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:inrequire'
from /home/user/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in require' from -e:1:in

'

how to solve?

TypeError: $(...).data is not a function

I am trying to use the gem in my rails app with Ruby version 1.9.2-p320 & Rails 3.1.1, all is working well but when I click on any of the icon for share then it wouldn't do anything. I have inspected it & found the below issue

TypeError: $(...).data is not a function social...?body=1 (line 10)
site = $(el).data('site');

I am trying to resolve but no luck.