[RUBY] Implementieren Sie eine Freigabeschaltfläche in Rails 6, ohne Gem zu verwenden

Ich dachte, es wäre schön, wenn es auf der Seite mit Rails einen Share-Share-Button gäbe, also habe ich im Internet verschiedene Suchanfragen durchgeführt. Viele von ihnen hingen von Gem ab, also beschloss ich, einen Artikel für mich zu hinterlassen.

Umgebung

Rails: 6.0.2.1

Bereiten Sie ein Symbol für die Freigabeschaltfläche vor

Bereiten wir zunächst ein Symbol für die Freigabeschaltfläche vor. Dieses Mal werde ich Font Awesome verwenden.

Font Awesome wird aus Garn installiert.

yarn add @fortawesome/fontawesome-free

Wenn Sie Webpacker noch nicht in Ihrem Projekt installiert haben, installieren Sie es bitte nach dem folgenden Befehl.

rails webpacker:install

Importieren Sie nach Abschluss der Installation die installierte Font Awesome in die Dateien unter "app / javascript /".

application.js

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

Es wird auch auf der scss-Seite gelesen.

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

application.scss

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

Ändern Sie die Teile style_sheet_link_tag und javascript_pack_tag von views / application.html.erb wie folgt.

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

Fügen Sie abschließend CSS für die Symbolfarbe von application.scss hinzu, und Sie können loslegen.

/* Twitter icon */

.twitter{color: #1da1f2}

/* Facebook icon */

.facebook{color: #4267b2}

Link Installation

Dieses Mal habe ich die Schaltfläche "Teilen" auf der Ansichtsseite wie unten gezeigt eingestellt.

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

Über die Schaltfläche "Teilen" auf Twitter können Sie mithilfe von Tweet Web Intent teilen. Dieses Mal wird nur die URL festgelegt, aber es scheint, dass die folgenden Einstellungen vorgenommen werden können.

• Wenn Sie mehrere Einstellungen vornehmen, stellen Sie eine Verbindung mit & her

Für die Freigabeschaltfläche auf der Facebook-Seite können Sie die Freigabeschaltfläche implementieren, indem Sie die URL, die Sie freigeben möchten, am Ende von "https: //www.facebook.com/share.php? U =" eingeben.

Schließlich

Beide diesmal festgelegten URLs sind Localhost-URLs. Vergessen Sie bei der tatsächlichen Implementierung nicht, den Link zu ändern, den Sie freigeben möchten.