J'ai pensé que ce serait bien s'il y avait un bouton de partage de partage dans la page avec Rails, alors j'ai cherché diversement sur le net. Beaucoup d'entre eux dépendaient de Gem, j'ai donc décidé de laisser un article pour moi-même.
Rails: 6.0.2.1
Tout d'abord, préparons une icône pour le bouton de partage. Cette fois, j'utiliserai Font Awesome.
Font Awesome est installé à partir de fil.
yarn add @fortawesome/fontawesome-free
Si vous n'avez pas encore installé Webpacker dans votre projet, veuillez l'installer après la commande suivante.
rails webpacker:install
Une fois l'installation terminée, importez le Font Awesome installé dans les fichiers sous ʻapp / javascript / `.
application.js
require("@fortawesome/fontawesome-free/js/all")
import '../stylesheets/application';
Il sera également lu côté 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';
Modifiez les parties style_sheet_link_tag et javascript_pack_tag de views / application.html.erb comme suit.
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Enfin, ajoutez css pour la couleur de l'icône de application.scss et vous êtes prêt à partir.
/* Twitter icon */
.twitter{color: #1da1f2}
/* Facebook icon */
.facebook{color: #4267b2}
Cette fois, j'ai défini le bouton de partage du côté des vues comme indiqué ci-dessous.
<%= 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 %>
Le bouton Partager sur Twitter vous permet de partager en utilisant Tweet Web Intent. Cette fois, seule l'URL est définie, mais il semble que les paramètres suivants puissent être définis.
| option | Contenu |
|---|---|
| text | Paramètres du corps |
| hashtag | Paramètres de balise de hachage |
| url | Paramètres d'URL |
&Pour le bouton de partage côté Facebook, vous pouvez implémenter le bouton de partage en écrivant l'URL que vous souhaitez partager à la fin de https: //www.facebook.com/share.php? U =.
Les deux URL définies cette fois sont des URL d'hôte local. Lors de sa mise en œuvre, veillez à ne pas oublier de le remplacer par le lien que vous souhaitez partager.
Recommended Posts