Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Adding social icons in your site

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 468
    Comment on it

    Hi friends,
    You might have seen several icons of social networks in many of the sites. If you want to add this in  your rails site, there is already a beautiful gem called social-share-button. I am explaining here how you can integrate it step-by-step.


    1) Open your Gemfile and add this code:

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


    2) Now run bundle

    bundle install


    3) Install the social share button using the rails generator like this:

     rails generate social_share_button:install
      
        ## this will create these files
         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
    

    The main configuration file that needs to be configured for social share button is config/initializers/social_share_button.rb

    SocialShareButton.configure do |config|
      # Here you can customize the number of social icons that are needed in your website
      config.allow_sites = %w(twitter email facebook google_plus weibo douban tqq renren qq  kaixin001 baidu google_bookmark delicious huaban tumblr    plurk pinterest)
    end

    4) Now require css and js files in your application.css and application.js respectively like this:

    app/assets/javascripts/application.js:
    
      //= require social-share-button
    
    app/assets/stylesheets/application.css
    
      *= require social-share-button

      5) Then you can use social_share_button_tag helper in views, for example app/views/events/show.html.erb

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

    6) The social share icons will look like this in your view.

     

     

    7) For more detail and customization you can follow the github source file

        https://github.com/huacnlee/social-share-button

     

    Adding social icons in your site

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: