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.
Rails: 6.0.2.1
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}
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.
option | Inhalt |
---|---|
text | Körpereinstellungen |
hashtag | Hash-Tag-Einstellungen |
url | URL-Einstellungen |
&
herFü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.
Beide diesmal festgelegten URLs sind Localhost-URLs. Vergessen Sie bei der tatsächlichen Implementierung nicht, den Link zu ändern, den Sie freigeben möchten.