8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-14

#実装すること

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

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

#完成形

  • 設置可能なSNSシェアボタン一覧
    ea7c0a20-8ad8-11e6-953f-83354d9a6384.png

  • 実際の実装済み画面
    gif (2).gif

#前提

  • 投稿機能を実装済み(今回は、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;
  }
}

以上です。

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?