Rails6でGemを使わずシェアボタンを実装する

Railsでページ内に共有シェアボタンがあればいいなっと思いネットでいろいろ調べたのですが
Gemに依存したものが多かったので、自分用のためにも記事を残すことにしました。

環境

Rails: 6.0.2.1

シェアボタン用のアイコンを用意

まずシェアボタン用のアイコンを用意しましょう。
今回はFont Awesomeを使います。

Font Awesomeはyarnからインストールします。

yarn add @fortawesome/fontawesome-free

まだプロジェクトにWebpackerをinstallしていない場合は下記のコマンド後にインストールを行ってください。

rails webpacker:install

インストールが完了したら、app/javascript/の配下のファイルにインストールしたFont Awesomeをインポートしていきます。

application.js

require("@fortawesome/fontawesome-free/js/all")
import '../stylesheets/application';

scss側にも読み込んでいきます。

mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss

application.scss

$fa-font-path: "~font-awesome/fonts/";
@import '@fortawesome/fontawesome-free/scss/fontawesome';

views/application.html.erbのstyle_sheet_link_tagとjavascript_pack_tagの部分も下記のように変更しましょう。

  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>   

最後にさきほどのapplication.scssのアイコンカラー用にcssを追加してあげて準備完了です。

/* Twitter icon */

.twitter{color: #1da1f2}

/* Facebook icon */

.facebook{color: #4267b2}

リンクの設置

今回はviews側に下記のようにシェアボタンを設定しました。

<%= link_to "https://twitter.com/intent/tweet?url=http://localhost:3000/" do %>
  <i class="fab fa-twitter-square fa-4x twitter"></i>
<% end %>

<%= link_to "https://www.facebook.com/share.php?u=http://localhost:3000/" do %>
　　<i class="fab fa-facebook-square fa-4x facebook"></i>
<% end %>

TwitterのシェアボタンはTweet Web Intentを使ってシェアできるようにしています。
今回はurlのみの設定になっていますが、他にも下記の設定ができるみたいです。

option	内容
text	本文の設定
hashtag	ハッシュタグの設定
url	URLの設定

※複数設定する場合は&で繋げる

Facebook側のシェアボタンはhttps://www.facebook.com/share.php?u=末尾にシェアしたいURLを記載することでシェアボタンの実装ができるようになります。

最後に

今回設定してあるURLはどちらもlocalhostのURLになっています。
実際に実装するときは各自シェアしたいリンクに変えること忘れないように注意しましょう。