Xのツイートボタンを設置して簡単に投稿する方法

この記事でできること

サイト訪問者がWebページ上のリンクから簡単にXへ投稿できるようなボタンを実装できる

ツイートボタンとは？

ツイートボタンについては、公式ドキュメントにて以下のように説明されています。

ツイートウェブインテントを使用すると、サイト訪問者が Web ページ上のリンクから簡単にツイートを作成し、視聴者に投稿できるようになります。サイトでは、ツイートのテキストとハッシュタグを設定し、URL を渡して、ページに関連する Twitter アカウントを識別できます。

サイト上に以下のリンクを貼ることで、簡単にツイートする事ができます。

https://twitter.com/intent/tweet

ちなみに下記でも同様にツイート可能でした。

https://x.com/intent/post

ツイート内容に関するパラメータ

上記URLにクエリパラメータを付与することで、ツイートする内容にパラメータ情報を含める事が可能になります。詳細は以下の公式ドキュメントの内容をご確認ください。

今回は、ツイート内容に文章を含めるパターンと文章とurlを含めるパターンを実装します。
※実装例はReactでライブラリ等のインストール方法は割愛します

実装パターン1．文章を含める

import { Button } from "@mui/material";
import { FC } from "react";
import { Link as RouterLink } from "react-router-dom";

export const TweetButton: FC = () => {
  return (
    <Button
      variant="contained"
      color='primary'
      component={RouterLink}
      to="https://twitter.com/intent/tweet?text=Hello!"
    >
      Xに投稿
    </Button>
  )}

設置したボタンをクリックすると、以下のようにHello!が含まれた形ですぐに投稿が可能になります。

実装パターン2．文章＋URLを含める

import { Button } from "@mui/material";
import { FC } from "react";
import { Link as RouterLink, useLocation } from "react-router-dom";

export const TweetButton: FC = () => {
  const location = useLocation();
  return (
    <Button
      variant="contained"
      color='primary'
      component={RouterLink}
      to={`https://twitter.com/intent/tweet?text=[Typing Plus]タイピング速度:100でした!&url=https://typing-plus-front.vercel.app${location.pathname}`}
    >
      Xに投稿
    </Button>
  )}

&でパラメータを繋げることで、複数パラメータを含める事が可能です。
簡単な紹介にはなりますが、内容は以上です。

参考記事