Social share icon (Rails 6+)

1. Gemfiles:
--------
gem 'rails-social-share-button'

2. Terminal
-----------
bundle
bin/rails generate social_share_button:install

3. Edit 'config/initializers/social_share_button.rb'

RailsSocialShareButton.configure do |config|
  config.allow_sites = %w(email google_bookmark facebook twitter
                          pinterest telegram whatsapp_web)
end

4. Create in 'app/javascript/utilities' js-files:
rails-social-share-button.js

+++++++++++++++++++++++++++++++++++++++++++++++++++++++
(function() {
  window.RailsSocialShareButton = {
    openUrl: function(url, width, height) {
      var left, opt, top;
      if (width == null) {
        width = 640;
      }
      if (height == null) {
        height = 480;
      }
      left = (screen.width / 2) - (width / 2);
      top = (screen.height * 0.3) - (height / 2);
      opt = "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top + ",menubar=no,status=no,location=no";
      window.open(url, 'popup', opt);
      return false;
    },
    share: function(el) {
      var $parent, appkey, desc, ga, get_tumblr_extra, hashtags, img, site, title, tumblr_params, url, via, via_str, whatsapp_app_url;
      if (el.getAttribute === null) {
        el = document.querySelector(el);
      }
      site = el.getAttribute("data-site");
      appkey = el.getAttribute("data-appkey") || '';
      $parent = el.parentNode;
      title = encodeURIComponent(el.getAttribute("data-" + site + "-title") || $parent.getAttribute('data-title') || '');
      img = encodeURIComponent($parent.getAttribute("data-img") || '');
      url = encodeURIComponent($parent.getAttribute("data-url") || '');
      via = encodeURIComponent($parent.getAttribute("data-via") || '');
      desc = encodeURIComponent($parent.getAttribute("data-desc") || ' ');
      ga = window[window['GoogleAnalyticsObject'] || 'ga'];
      if (typeof ga === 'function') {
        ga('send', 'event', 'Social Share Button', 'click', site);
      }
      if (url.length === 0) {
        url = encodeURIComponent(location.href);
      }
      switch (site) {
        case "email":
          location.href = "mailto:?to=&subject=" + title + "&body=" + url;
          break;
        case "weibo":
          RailsSocialShareButton.openUrl("http://service.weibo.com/share/share.php?url=" + url + "&type=3&pic=" + img + "&title=" + title + "&appkey=" + appkey, 620, 370);
          break;
        case "twitter":
          hashtags = encodeURIComponent(el.getAttribute("data-" + site + "-hashtags") || $parent.getAttribute("data-hashtags") || '');
          via_str = '';
          if (via.length > 0) {
            via_str = "&via=" + via;
          }
          RailsSocialShareButton.openUrl("https://twitter.com/intent/tweet?url=" + url + "&text=" + title + "&hashtags=" + hashtags + via_str, 650, 300);
          break;
        case "douban":
          RailsSocialShareButton.openUrl("http://shuo.douban.com/!service/share?href=" + url + "&name=" + title + "&image=" + img + "&sel=" + desc, 770, 470);
          break;
        case "facebook":
          RailsSocialShareButton.openUrl("https://www.facebook.com/sharer/sharer.php?u=" + url + "&src=sdkpreparse", 770, 470);
          # RailsSocialShareButton.openUrl("http://www.facebook.com/sharer/sharer.php?u=" + url + "&display=popup&quote=" + desc, 555, 400);
          break;
        case "qq":
          RailsSocialShareButton.openUrl("http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + url + "&title=" + title + "&pics=" + img + "&summary=" + desc + "&site=" + appkey);
          break;
        case "google_bookmark":
          RailsSocialShareButton.openUrl("https://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + url + "&title=" + title);
          break;
        case "delicious":
          RailsSocialShareButton.openUrl("https://del.icio.us/save?url=" + url + "&title=" + title + "&jump=yes&pic=" + img);
          break;
        case "pinterest":
          RailsSocialShareButton.openUrl("http://www.pinterest.com/pin/create/button/?url=" + url + "&media=" + img + "&description=" + title);
          break;
        case "linkedin":
          RailsSocialShareButton.openUrl("https://www.linkedin.com/shareArticle?mini=true&url=" + url + "&title=" + title + "&summary=" + desc);
          break;
        case "xing":
          RailsSocialShareButton.openUrl("https://www.xing.com/spi/shares/new?url=" + url);
          break;
        case "vkontakte":
          RailsSocialShareButton.openUrl("http://vk.com/share.php?url=" + url + "&title=" + title + "&image=" + img);
          break;
        case "odnoklassniki":
          RailsSocialShareButton.openUrl("https://connect.ok.ru/offer?url=" + url + "&title=" + title + "&description=" + desc + "&imageUrl=" + img);
          break;
        case "wechat":
          if (!window.SocialShareWeChatButton) {
            throw new Error("You should require social-share-button/wechat to your application.js");
          }
          window.SocialShareWeChatButton.qrcode({
            url: decodeURIComponent(url),
            header: el.getAttribute('title'),
            footer: el.getAttribute("data-wechat-footer")
          });
          break;
        case "tumblr":
          get_tumblr_extra = function(param) {
            var cutom_data;
            cutom_data = el.getAttribute("data-" + param);
            if (cutom_data) {
              return encodeURIComponent(cutom_data);
            }
          };
          tumblr_params = function() {
            var params, path, quote, source;
            path = get_tumblr_extra('type') || 'link';
            params = (function() {
              switch (path) {
                case 'text':
                  title = get_tumblr_extra('title') || title;
                  return "title=" + title;
                case 'photo':
                  title = get_tumblr_extra('caption') || title;
                  source = get_tumblr_extra('source') || img;
                  return "caption=" + title + "&source=" + source;
                case 'quote':
                  quote = get_tumblr_extra('quote') || title;
                  source = get_tumblr_extra('source') || '';
                  return "quote=" + quote + "&source=" + source;
                default:
                  title = get_tumblr_extra('title') || title;
                  url = get_tumblr_extra('url') || url;
                  return "name=" + title + "&url=" + url;
              }
            })();
            return "/" + path + "?" + params;
          };
          RailsSocialShareButton.openUrl("http://www.tumblr.com/share" + (tumblr_params()));
          break;
        case "reddit":
          RailsSocialShareButton.openUrl("http://www.reddit.com/submit?url=" + url + "&newwindow=1", 555, 400);
          break;
        case "hacker_news":
          RailsSocialShareButton.openUrl("http://news.ycombinator.com/submitlink?u=" + url + "&t=" + title, 770, 500);
          break;
        case "telegram":
          RailsSocialShareButton.openUrl("https://telegram.me/share/url?text=" + title + "&url=" + url);
          break;
        case "whatsapp_app":
          whatsapp_app_url = "whatsapp://send?text=" + title + "&url=" + url;
          window.open(whatsapp_app_url, '_top');
          break;
        case "whatsapp_web":
          RailsSocialShareButton.openUrl("https://web.whatsapp.com/send?text=" + title + "&url=" + url);
      }
      return false;
    }
  };
}).call(this);
+++++++++++++++++++++++++++++++

5. Import this file to 'app/javascript/packs/application.js'
require("utilities/rails-social-share-button")

6. Copy to app/assets/stylesheets file 'rails-social-share-button.css.erb'

+++++++++++++++++++++++++++++++
.rails-social-share-button .ssb-icon {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  display: inline-block;
  height: 18px;
  width: 18px;
}

.rails-social-share-button .ssb-twitter {
  background-image: url(<%= asset_path('rails-social-share-button/twitter.svg') %>);
}

.rails-social-share-button .ssb-facebook {
  background-image: url(<%= asset_path('rails-social-share-button/facebook.svg') %>);
}

.rails-social-share-button .ssb-google_bookmark {
  background-image: url(<%= asset_path('rails-social-share-button/google_bookmark.svg') %>);
}

.rails-social-share-button .ssb-weibo {
  background-image: url(<%= asset_path('rails-social-share-button/weibo.svg') %>);
}

.rails-social-share-button .ssb-qq {
  background-image: url(<%= asset_path('rails-social-share-button/qq.svg') %>);
}

.rails-social-share-button .ssb-delicious {
  background-image: url(<%= asset_path('rails-social-share-button/delicious.svg') %>);
}

.rails-social-share-button .ssb-linkedin {
  background-image: url(<%= asset_path('rails-social-share-button/linkedin.svg') %>);
}

.rails-social-share-button .ssb-tumblr {
  background-image: url(<%= asset_path('rails-social-share-button/tumblr.svg') %>);
}

.rails-social-share-button .ssb-pinterest {
  background-image: url(<%= asset_path('rails-social-share-button/pinterest.svg') %>);
}

.rails-social-share-button .ssb-douban {
  background-image: url(<%= asset_path('rails-social-share-button/douban.svg') %>);
}

.rails-social-share-button .ssb-wechat {
  background-image: url(<%= asset_path('rails-social-share-button/wechat.svg') %>);
}

.rails-social-share-button .ssb-vkontakte {
  background-image: url(<%= asset_path('rails-social-share-button/vkontakte.svg') %>);
}

.rails-social-share-button .ssb-odnoklassniki {
  background-image: url(<%= asset_path('rails-social-share-button/odnoklassniki.svg') %>);
}

.rails-social-share-button .ssb-xing {
  background-image: url(<%= asset_path('rails-social-share-button/xing.svg') %>);
}

.rails-social-share-button .ssb-email {
  background-image: url(<%= asset_path('rails-social-share-button/email.svg') %>);
}

.rails-social-share-button .ssb-reddit {
  background-image: url(<%= asset_path('rails-social-share-button/reddit.svg') %>);
}

.rails-social-share-button .ssb-hacker_news {
  background-image: url(<%= asset_path('rails-social-share-button/hacker_news.svg') %>);
}

.rails-social-share-button .ssb-telegram {
  background-image: url(<%= asset_path('rails-social-share-button/telegram.svg') %>);
}

.rails-social-share-button .ssb-whatsapp_app,
.rails-social-share-button .ssb-whatsapp_web {
  background-image: url(<%= asset_path('rails-social-share-button/whatsapp.svg') %>);
}

.ss-wechat-dialog {
  width: 300px;
  position: fixed;
  background: #fff;
  padding: 15px;
  border-radius: 3px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
  z-index: 11001;
  font-size: 14px;
  line-height: 1.2em;
}

.ss-wechat-dialog .wechat-popup-header {
  font-weight: bold;
}

.ss-wechat-dialog .wechat-dialog-qr {
  text-align: center;
  margin: 25px 0;
}

.ss-wechat-dialog .wechat-popup-close {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 10px;
  top: 10px;
  color: #999;
  text-decoration: none;
  font-size: 16px;
}

.ss-wechat-dialog .wechat-popup-footer {
  text-align: left;
  line-height: 22px;
  color: #666;
}
+++++++++++++++++++++++++++++++++++++++++++++

7. Insert to 'app/assets/stylesheets/application.scss'
@import "rails-social-share-button";

For bigger icon add to 'app/assets/stylesheets/application.scss'

// Social Share Button
$size: 24px;

.rails-social-share-button {
  .ssb-icon {
    background-size: $size $size;
    height: $size;
    width: $size;
  }
}

8. LAST) in view add
app/views/recipes/show.html.erb (@recipe -> model):

%= rails_social_share_button_tag(@recipe.title) %>
  or if use Facebook
<%= rails_social_share_button_tag('Share to Facebook', url: recipe_path(@recipe), desc: @recipe.description) %>


PS Lolalization
config/locales/en.yml
en:
  social_share_button:
    share_to: 'Share to '
    email: 'Email'
    google_bookmark: 'Google Bookmark'
    facebook: 'Facebook'
    twitter: 'twitter'
    pinterest: 'Pinterest'
    telegram: 'Telegram'
    whatsapp_web: 'Whatsapp Web'

config/locales/ru.yml
ru:
  social_share_button:
    share_to: 'Поделиться '
    email: 'Email'
    google_bookmark: 'Google Bookmark'
    facebook: 'Facebook'
    twitter: 'twitter'
    pinterest: 'Pinterest'
    telegram: 'Telegram'
    whatsapp_web: 'Whatsapp Web'