Chia sẻ qua mạng xã hội với gem Social Share Button trong rails

Với gem Social Share Button, bạn có thể chia sẻ những bài post của bạn một cách dễ dàng và nhanh nhất, sau đây mình xin hướng dẫn các bạn cách dùng cơ bản của gem này

1.Cài đặt

Thêm gem này vào file Gemfile

gem "social-share-button", github: "huacnlee/social-share-button"

Sau khi cài đặt thì chạy bundle install để cài đặt

$ bundle install
$ rails generate social_share_button:install

2.Cấu hình

Bạn có thể cấu hình những mạng xã hội bạn muốn chia sẻ tại config/initializers/social_share_button.rb, ở đây mình chỉ cấu hình cho facebook, twitter, google+ và mail

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

3.Sử dụng

Bạn phải thêm những dòng sau để thêm js và css cho thư viện app/assets/javascripts/application.js

//= require social-share-button

app/assets/stylesheets/application.css

*= require social-share-button

Mình ví dụ một cái đơn giản, như ở controller product, trong hàm show mình lấy ra một product app/controllers/product_controllers.rb

class ProductController < ApplicationController
  def show
    @product = Product.find_by id: params[:id]
  end
end

trong view app/view/product/show.html.erb

    <div class="col-sm-3 aside">
      <div class="widget">
        <div class="widget-body">
          <div class="beta-sales beta-lists">
           <%= social_share_button_tag(@product.name) %>
          </div>
        </div>
      </div>
    </div>

Khi chạy, click vào mạng xã hội bạn cần để chia sẻ thông tin về product hiện tại Khi click vào button twitter Ngoài tiêu đề mặc định, bạn có thể chỉ định tiêu đề cho mạng xã hội đặc biệt:

  <%= social_share_button_tag(@product.name, :allow_sites => %w(twitter facebook)) %>

Và bạn có thể tùy chỉnh rel thuộc tính:

    <%= social_share_button_tag(@product.name, :rel => "twipsy") %>

Bạn cũng có thể chỉ định URL mà nó liên kết đến:

    <%= social_share_button_tag(@product.name, :url => "http://myapp.com/foo/bar", :image => "http://foo.bar/images/a.jpg") %>

Thêm data-type parameter

  <%= social_share_button_tag(@product.name, :'data-source' => "https://raw.github.com/vkulpa/social-share-button/master/lib/assets/images/sprites/social-share-button/tumblr.png", :'data-type' => 'photo') %> 

Dưới đây là ánh xạ các thuộc tính phụ thuộc vào tham số kiểu dữ liệu của bạn

Làm thế nào để thay đổi thuộc tính css của các icon button?? Trong file app/assets/stylesheets/application.css ta thêm đoạn css này vào

.social-share-button .ssb-icon {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 44px 46px !important;
  display: inline-block !important;
  height: 50px !important;
  width: 60px !important;
}
.social-share-button {
  right: 1px;
  top: 0px;
}

Trong một số trường hơp, khi share lên facebook sẽ bị lỗi, để khắc phục, ta làm như sau

<%= social_share_button_tag(@product.name, desc: @product.name) %>

Trên đây là ví dụ nho nhỏ để dùng gem này, hi vọng bài viết sẽ giúp ít được các bạn. Xin cảm ơn link tham khảo https://github.com/huacnlee/social-share-button