初めまして未経験で園児ニア転職目指しています。りんころです。
今回ポートフォリオのアプリでX共有できるリンクを作成したのでその内容をまとめます。
結果
以下のコードでできました。以上。…だとアレなので解説します。
<%= link_to "https://twitter.com/share?url=#{CGI.escape('https://style-love.net/')}&text=#{CGI.escape('推し活コーデ投稿サービス')}&hashtags=Style-LOVE", target: "_blank", rel: "noopener noreferrer", title: "Xでシェアする" do %>
<i class="fa-brands fa-x-twitter "></i>
<% end %>
- link_to：ここはいつものlink_toメソッドです。
"https://twitter.com/share?url=#{CGI.escape('https://style-love.net/')}&text=#{CGI.escape('推し活コーデ投稿サービス')}&hashtags=Style-LOVE"
このリンクは、Xの新規ポストに飛んで『 https://style-love.net/ 』 リンクを表示させるページに飛ぶためのURLです。このURLについて詳しくみていきます。
"https://twitter.com/share?url=#{CGI.escape('https://style-love.net/')}
上記の部分が、X（Twitter）共有ページに飛ぶリンクを表示しています。
また、上記の『share?url=#{CGI.escape('https://style-love.net/')}』 この部分で共有するアプリのリンクを表しています。
text=#{CGI.escape('推し活コーデ投稿サービス')}&hashtags=Style-LOVE"
- text=#{CGI.escape('推し活コーデ投稿サービス')}
このtext部分で、共有ツイートの本文（推し活コーデ投稿サービス ）を自動で書き込みできます。
- hashtags=Style-LOVE
この部分は、名前の通り共有ツイートのハッシュタグを自動指定できます。
最後に以下の部分について解説します。
target: "_blank", rel: "noopener noreferrer", title: "Xでシェアする"
-
target: "_blank”：これを書いておくことで、押したリンクを新しいタブで開けるよう設定させることができます。
'_blank'は新しいウィンドウで開くことという意味らしい。 - rel:"noopener noreferrer"：rel属性に、”noopener”と、” noreferrer”二つの設定をつけています。
⭐️noopener
この設定をつけることで、新しく開いたタブから元のタブにアクセスできなくなるようにできます。つまり、リンク先が悪意あるサイトであったり、ハッキングされたサイト(実質悪意あるサイトの振る舞いをするサイト)だった場合に、リンク先から自分の見ていたリンク元ページが操作されるリスクがあるのを防いでいるということです。
（例えば、Xで知らない人の投稿で表示されたリンク先がハッキングサイトだった時、
自分のXのページが操作される可能性があるのを防いでいるみたいな感じ）
⭐️noreferrer:
- noreferrer設定を加えることで、新しいタブに遷移したときに、元のページのリンク情報（リファラ）を新しいタブに送信しないようにできます。
- つまり、noreferrer設定をつけると、自分が、どこのサイトから飛んできたのかわからないようにできます。
（例えば、自分のブログから外部サイト（例えば、ショッピングサイト）へのリンクを作ったとします。このとき、rel="noreferrer"を設定すると、そのリンクをクリックして新しいタブでショッピングサイトが開かれた時、ショッピングサイトは自分のブログのURLを知ることができなくなります。）
- title: "Xでシェアする"：この部分を設定すると、リンクにカーソルを当てたときに、「Xでシェアする」という文字が表示されます。
以上が、自分のアプリをXに共有するリンクの詳細です。
またアイコンの表示方法については以下の記事を参考にしました。