Implement share button in Rails 6 without using Gem

I thought it would be nice if there was a share share button in the page with Rails, so I searched variously on the net. Many of them depended on Gem, so I decided to leave an article for myself.

environment

Rails: 6.0.2.1

Prepare an icon for the share button

First, let's prepare an icon for the share button. This time I will use Font Awesome.

Font Awesome is installed from yarn.

yarn add @fortawesome/fontawesome-free

If you have not installed Webpacker in your project yet, please install it after the following command.

rails webpacker:install

After the installation is completed, import the installed Font Awesome into the file under ʻapp / javascript /`.

application.js

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

It will also be read on the scss side.

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

application.scss

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

Let's also change the style_sheet_link_tag and javascript_pack_tag parts of views / application.html.erb as follows.

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

Finally, add css for the icon color of application.scss and you're ready to go.

/* Twitter icon */

.twitter{color: #1da1f2}

/* Facebook icon */

.facebook{color: #4267b2}

Link installation

This time, I set the share button on the views side as shown below.

<%= 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 %>

The share button on Twitter allows you to share using Tweet Web Intent. This time, only the url is set, but it seems that the following settings can also be made.

option Contents
text Body settings
hashtag Hashtag settings
url URL settings

For the share button on Facebook side, you can implement the share button by writing the URL you want to share at the end of https://www.facebook.com/share.php?u=.

Finally

Both URLs set this time are localhost URLs. When actually implementing it, be careful not to forget to change it to the link you want to share.

Recommended Posts

Implement share button in Rails 6 without using Gem
Implement button transitions using link_to in Rails
Implement star rating function using Raty in Rails6
Implement markdown in Rails
Implement test doubles in JUnit without using external libraries
Implement application function in Rails
Japaneseize using i18n with Rails
Implement LTI authentication in Rails
Gem often used in Rails
[Rails] Implement event end function (logical deletion) using paranoia (gem)
Implement simple login function in Rails
Implement a contact form in Rails
Implement CSV download function in Rails
Implement a refined search function for multiple models without Rails5 gem.
[Rails] Manage multiple models using devise gem
How to implement search functionality in Rails
[Spring MVC] Implement dynamic parameters included in URL without using Optional (~ Java7)
How to implement a slideshow using slick in Rails (one by one & multiple by one)
Map without using an array in java
How to implement ranking functionality in Rails
How to implement image posting using rails
Create authentication function in Rails application using devise
[Rails] Run LINEBot in local environment using ngrok
[Rails6 + Vue.js] Implement CSV import process using axios
Implement partial match search function without using Ransuck
How to implement a like feature in Rails
[Rails] Show avatars in posts using Active Storage
[Rails] How to create a Twitter share button
[Rails] Creating a breadcrumb trail using Gem gretel
Implement iteration in View by rendering collection [Rails]
Implement Rails pagination
Group_by in Rails
[Ruby on Rails] How to implement tagging / incremental search function for posts (without gem)
How to implement a circular profile image in Rails using CarrierWave and R Magick
How to implement guest login in 5 minutes in rails portfolio
Implement post search function in Rails application (where method)
[Rails] Implement credit card registration / deletion function in PAY.JP
Save data from excel file using Rails gem roo
Introduce devise in Rails to implement user management functionality
[For Rails beginners] Implemented multiple search function without Gem
Calendar implementation and conditional branching in Rails Gem simple calendar
Test field-injected class in Spring boot test without using Spring container