More than 3 years have passed since last update.

SNSシェアボタンの導入

Last updated at 2021-09-02Posted at 2021-09-02

##目次

##概要
SNSシェアボタンとはニュースサイト等でよく使われる、クリック一つで投稿できるボタンのことです。
こちらはQiitaのもの。

私の場合、出欠サイトを作成したため、対象者に入力を促す目的で導入しました。
Githubはこちら
##導入方法

Gemfile.

gem 'social-share-button'

Gemを記載したら、下記コマンドを入力します。

$ bundle install
$ rails generate social_share_button:install

作成されたファイルを編集してボタンの表示を制限しましょう。
今回はtwitterとfacebookに絞ります。

config/initializers/social_share_button.rb

SocialShareButton.configure do |config|
  config.allow_sites = %w(twitter facebook) #　()内の不要な記載を削除
end

次はCSS(SCSS)、JSへの記載です。

stylesheets/application.scss

@import "social-share-button";

javascripts/application.js

//= require_tree .
//= require social-share-button #追記

最後にviewです。
social_share_button_tag以下がシェアされるときの表示文言です。
私の場合、@practice.scheduleで日付を取得しているため、画像のような表示になります。
ご自身の仕様に合わせて実装ください。

show.html.erb

<%= social_share_button_tag("#{@practice.schedule}の練習予定をご確認ください。") %>

##Facebookボタンの注意点
ローカル環境からはシェアボタンを使用できません。
テストを行うには本番環境で行う必要があります。

##ボタンサイズの変更
下記の記載でボタンサイズを変更できます。
今回はh2タグの横に置きましたので、ボタンも同じサイズに変更しました。

stylesheets/application.scss

$size: 2rem;

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

参考サイト

##振り返り
簡単に実装できて、実用性も高いGemです。
今回使用したtwitter、Facebook以外を実装する場合には公式のUsageをよくご確認ください。
最後までご覧頂きありがとうございました。