There are many services that allow you to add social network buttons to your website. The problem with these services is that they are free because they harvest traffic statistics from your site, track your visitors, and in general are a big nuisance. They also have the disadvantage of being slow to load.

In this article we will show you how to add social sharing buttons to your website via a gem called Social Share Button. Unlike most services, Social Share Button has buttons that are hosted locally on your site and don’t go through a third party service. As a result, they are quick to load and extremely customizable.

Setup Application
First we need to add the social-share-button gem to our Gemfile. Open up your Gemfile and add in the line listed below:

1

gem 'social-share-button', '~> 0.1.6'

Next, we need to run a bundle install to install the gem:

1

bundle install

Now we need to run the rails generate social_share_button:install command to install some additional configuration files that the Social Sharing Button gem uses to display the buttons on your site. This includes an initializer called social_share_button.rb in your initializers folder as well as some localization files:

1

rails generate social_share_button:install

Great, Next we need to do is create a simple Home controller in order to test the social sharing button functionality:

1

rails g controller homes show

Now let’s modify our routes file a bit:

1
2
3
4

Rails.application.routes.draw do
  resources :homes, only: [:show]
  root to: "homes#show"
end

Great, now we need to add some javascript and CSS includes to make things work. Open up your application.js file and modify it so that it looks like the code listed below:

1
2
3
4
5

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require social-share-button
//= require_tree .

Great, now for the application.css file. Open it up and modify it so that it looks like the code listed below:

1
2
3
4
5

/*
 *= require_tree .
 *= require social-share-button
 *= require_self
 */

Excellent, now we can add the social sharing buttons to our site. Open up your homes/show view and modify it so that it looks like the code listed below:

1

<%= social_share_button_tag("My Site") %>

Great, now if we run rails server and visit http://localhost:3000, we will see the social sharing buttons. However, you’ll notice that there is a problem. About 15 or so buttons are listed, but we only care about a couple. Luckily we can easily resolve this. Open up the social_share_button initializer and modify it so that it looks like the code listed below:

1
2
3

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

Now if you restart your rails server, you’ll notice that the buttons have been limited to the sites listed above. Note that you can also specify a specific url if needed. Social Share Button detects the current URL by default, but there are times when you may want to customize this. You can do this like so:

1

<%= social_share_button_tag("My Home Page", :url => "http://mysite.com/sample") %>

However, what if we want to customize the button look/feel? Luckily this is pretty easy. If you inspect the elements in chrome developer tools you’ll notice that they each have a unique css class. We can override this CSS class with our own code. For example, to modify the facebook button to look different, we’d use something like the following CSS (placed into our application.css file):

1
2
3
4
5
6

.social-share-button-facebook {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/social/facebook.png") no-repeat;
}

So far go good, That’s it!!! See ya!!! :)