【rails】SNSシェア機能の実装(social-share-button)

#実装すること

• gem social-share-buttonを使用してSNSシェアボタンを設置する。
• 設置した場所の内容を特定のSNSにシェアが可能。

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

#完成形

• 設置可能なSNSシェアボタン一覧
  

• 実際の実装済み画面
  

#前提

• 投稿機能を実装済み(今回は、questionモデルで実装済み。)

shema.rb

ActiveRecord::Schema.define(version: 2021_05_05_122222) do
  create_table "questions", force: :cascade do |t|
    t.integer "member_id", null: false
    t.string "title", default: "", null: false
    t.text "content", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["member_id"], name: "index_questions_on_member_id"
  end
end

#手順
① social-share-buttonのインストール
② assetsのcss/scss + jsファイルへの追記
③ viewへの記載
④ SNSボタンのサイズ変更

#実装

###1. social-share-buttonのインストール

Gemfile

gem 'social-share-button'

インストールします。

terminal

$ bundle install

その後、configにsocial_share_button.rbファイルを作成します。

terminal

$ rails generate social_share_button:install

これによって、表示したいSNSボタンを設定する事ができます。
それ以外(表示したくないもの)は、単純に消してもらって問題ないです。

config/initializer/social_share_button.rb

SocialShareButton.configure do |config|
  config.allow_sites = %w(twitter facebook google_bookmark tumblr pinterest whatsapp_app whatsapp_web)
end

###2. assetsのcss/scss + jsファイルへの追記

次に下記のファイルにそれぞれ記述していきます。

• assets/stylesheets/application.scss - ①
• assets/stylesheets/application.js - ②

①application.scss(css)ファイルに下記を記載。

assets/stylesheets/application.scss

 *= require social-share-button  #これ
 *= require_tree .
 *= require_self
 */
@import "social-share-button"; #これ

②application.jsファイルに下記を記載。

②assets/javascripts/application.js

//= require turbolinks
//= require_tree .
//= require social-share-button  これ

###3. viewへの記載
最後にSNSシェアボタンの実装をします。
特別なことはしていませんが、念の為コントローラーも載せておきます。

question_controller.rb

def show
  @question = Question.find(params[:id])
end

viewにこの文を入れるだけで表示できます。
＠インスタンス変数の箇所はコントローラーで設定している変数を入れてください。

私の場合、投稿詳細で@questionを使用しているので、@questionを記入しています。

.titleは、snsシェア時の投稿内容で表示したい内容です。
私は、投稿のタイトルを表示したかったので、@question.title

questions/show.html.erb

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

###4. SNSボタンのサイズ変更

scssファイルに下記の書き方で変更が可能です。お好みでどうぞ。

assets/stylesheets/application.scss

$size: 24px;

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

以上です。