Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Social sharing in rails application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.41k
    Comment on it

    In modern days, we are using social media for web marketing which increase the traffic & popularity of our web sites. In Order to share posts/articles on net in rails application we can use the 'social-share-button' gem. To integrate social-share-button gem we can follow the below steps...


    Add 'social-share-button' gem in Gemfile

    gem 'social-share-button'


    Run bundler to install gem

    bundle install


    Now run command to install the share buttons

    rails generate social_share_button:install



    ## generated files like
    create  config/initializers/social_share_button.rb
    create  config/locales/social_share_button.en.yml
    create  config/locales/social_share_button.zh-CN.yml
    create  config/locales/social_share_button.zh-TW.yml


    To configure the share button we can modify the social_share_button.rb: Here, we need only facebook, twitter & google_plus button only

    Path: app/config/initializers/social_share_button.rb

    SocialShareButton.configure do |config|
       # listeting for social share buttion for site
       config.allow_sites = %w(facebook twitter google_plus)


    Now, add required js & css files in app/assets

    Path: app/assets/javascripts/

    #= require social-share-button


    Path: app/assets/stylesheets/application.scss

    *= require social-share-button # in Rails use @import "social-share-button";


    To view link on page

    <%= social_share_button_tag(@obj.title) %>


    We can also change the default share button title

    <%= social_share_button_tag(@obj.title), 'data-twitter-title' => 'MyTitle' %>


    Customize URL

    <%= social_share_button_tag(@ojb.title, :url => "http://mysite/test/page") %>


    Customize share icon size: We can modify the icon size by modifying application.scss file

    Path: app/assets/stylesheets/application.scss

    $size: 22px;
    .social-share-button {
      .ssb-icon {
        background-size: $size $size;
        height: $size;
        width: $size;



 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: