Introduction

There are a number of services that allow you to add social buttons to your website. Services such as AddThis and ShareThis purport to offer turnkey solutions when it comes to adding social features to your site. 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 handy 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.

Application Setup

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

Gemfile:

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

Next, we need to run a bundle install to install the gem. Do this now.

Terminal Commands:

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. Do this now.

Terminal Commands:

rails generate social_share_button:install

Great, now the next thing we need to do is create a simple Home controller in order to test the social sharing button functionality. Run the command below to do this now.

Terminal Commands:

rails g controller homes show

Now let's modify our routes file a bit. Modify your routes file to look like the code listed below.

config/routes.rb:

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.

app/assets/javascripts/application.js:

//= 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.

app/assets/stylesheets/application.css:

/*
 *= 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.

app/assets/stylesheets/application.css:

<h1>Hello World!</h1>
<%= social_share_button_tag("My Site") %>
<p>Welcome to my site!</p>

Great, now if we fire up our 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. Fortunately we can easily resolve this. Open up the social_share_button initializer and modify it so that it looks like the code listed below.

config/initializers/social_share_button.rb:

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:


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

Great! However, what if we want to customize the button look/feel? Fortunately 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):


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

For more information on the excellent Social Sharing Button gem, check out their github page at https://github.com/huacnlee/social-share-button. That's it! Thanks for reading!