🦜

【Rails】X（Twitter）へのシェアボタン実装

2023/10/02に公開

Rails

Ruby

Twitter

tech

X（Twitter）のシェアボタンを実装していきます！
とても簡単なのでぜひポートフォリオに導入してみてくださいね！

実装

<div class="twitter">
   <%= link_to "https://twitter.com/share?url=#{post_url(@post)}&text=【2Seeds】%0a%0a#{@post.title}", target: '_blank', data: { toggle: "tooltip", placement: "bottom" }, title: "Xでシェア" do %>
    <i class="fab fa-twitter"></i>
   <% end %>
</div>

css

.twitter a {
  color: #00acee;
}

.twitter a:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
  text-decoration: none;
}

解説

残念ながらFont Awesomeに「X」のアイコンはないので、「旧Twitter」のアイコンで実装します。

URLの設定と投稿本文の設定

https://twitter.com/share?url=#{post_url(@post)}&text=【文章を入れます！】%0a%0a#{@post.title}"

url パラメータ:
url=#{post_url(@post)} の部分は、共有するURLを指定します。これを変更すると、シェアされるコンテンツが異なります。今回は@post で特定の投稿ページのリンクにしています。
text パラメータ:
text=【文章を入れます！】%0a%0a#{@post.title} の部分は、シェアされるツイートの内容を指定します。ここではツイートの冒頭に"【文章を入れます！】"と改行（%0a）が挿入し、その後に投稿のタイトルを表示させています。
各々アプリケーションに合わせて自由にカスタマイズしてくださいね。

blank設定

target: '_blank'

これは、リンクを新しいウィンドウまたはタブで開くように指定する属性です。'_blank'は新しいウィンドウで開くことを意味します。

ツールチップオプション

data: { toggle: "tooltip", placement: "bottom" }, title: "Xでシェア"

この部分は、ツールチップ（ヒント情報）を表示するための属性です。toggle: "tooltip"はツールチップを有効にし、placement: "bottom"はツールチップをリンクの下部に表示するように設定します。
title: "Xでシェア"でリンクにマウスを合わせたときに表示されるツールチップの内容を指定しています。ここでは、"Xでシェア"というテキストが表示されます。

Twitterカード

ただこのままだとシェアはできても、情報がシンプルです。
普段に目にするようなシェアにするには「Twitterカード」に対応させることもできます。
今回そこまでの実装はしませんでしたが、興味がある方はぜひやってみくださいね♪

シェアボタンの実装は、TwitterのAPIが必要だと思ってましたが全然必要なかったです。
ただAPIを使うと「ツイートの取得、表示」できたり、Twitterのデータを利用した機能を作れます。
今後やってみたいなと思いました。