【Ruby on Rails】SNSシェアボタンを実装する方法

#対象者

• SNSシェアボタンを実装予定の方

#目的

• SNSシェアボタンを実装して共有できるように設定する

#実際の手順と実例
###1.前提

Articleモデル使用しています。

###2.'social-share-button'を導入

gem 'social-share-button'

導入後、bundle installを実行

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

rails g sosial_share_button:install

これを実行することで、表示したいSNSボタンを設定する事ができます。

config/initialize/sosial_share_button.rb

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

（）内に自分の入れたいアプリを入力していく
今回はTwitterとFacebookを実装します。

###3.assetファイルの設定

application.scssにsosial_share_buttonが使えるように設定します。

assets/stylesheets/application.scss

 *= require social-share-button  #追記
 *= require_tree .
 *= require_self
 */
@import "social-share-button"; #追記
```

⚠順番に注意してください


続いて、jsファイルも設定していきます。

````assets/javascripts/application.js
//= require turbolinks
//= require_tree .
//= require social-share-button #追記

4. Viewでの設定

app/view/articles/show.html.erb

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

• @articleはコントローラーで**Article.find(params[:id])**を定義しています。
• titleはArticleのカラムです。ご自身のモデルに合わせて設定してください。投稿した際にタイトルが表示されます。

補足

scssファイルでサイズや配置を変更します。

application.scss

$size: 28px;
.social-share-button {
    display: flex;
    flex-direction: column;
    padding-left: 50px;
  .ssb-icon {
    background-size: $size $size;
    height: $size;
    width: $size;
    margin: 10px 0;
  }
}

私の場合縦並びにしたかったので
display: flex;
flex-direction: column;
を設定しています。

これで実装完了です！

####投稿者コメント

少し前にSNSシェアボタンを設置して、簡単だったけど、どんな手順で実装したんだっけと忘れてしまったのでアウトプットしてみました。

####My Profile
プログラミング学習歴３ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。