メインコンテンツにスキップ

X(Twitter)シェアボタンを設置する

Xでのシェアを促すボタンの設置方法を解説します。Studioでは、URLを指定するだけでシェアボタンを設置できます。必要なオプションやサンプルコードも紹介しています。

今日アップデートされました

X(Twitter)シェアボタンの設置方法

Xのシェアボタンを設置する方法を解説します。Studioでは、URLを指定するだけでシェアボタンを設置できます。必要なオプションやサンプルコードもあわせて紹介します。 ※2025年8月27日現在の仕様に基づいたご案内です。

設定手順

Step1:シェアボタンを追加する

  1. デザインエディタで左パネルを開きます。

  2. 追加パネルのボックスメニュー内の[Form Parts]から[Button]を選択し、ボタンをページ内に配置します。

※ボックスを追加して自分でデザインしたボタンを作成することも可能です。ボタンのデザイン変更方法は、以下のヘルプ記事群を参考にしてください。

Step2:シェアボタンにリンクを設定する

  1. 配置したボタンを選択し、右パネルを開きます。

    スクリーンショット:シェアボタンにリンクを設定する様子。

  2. リンク設定で以下形式のURLを入力します。

texthttps://twitter.com/intent/tweet?url=[シェアするURL]&text=[ツイート内テキスト]&via=[ユーザ名]&related=[表示ユーザー]&hashtags=[ハッシュタグ]

記入例:

texthttps://twitter.com/intent/tweet?url=https://naomi-osaka.studio.design&text=Congratulations%2C%20Naomi%20Osaka!&hashtags=withStudio

URL内で設定できる項目

text

投稿テキスト

url

リンク先

hashtags

ハッシュタグ付きワード(複数指定の場合はカンマで区切る)

via

投稿者名

related

おすすめアカウント

in-reply-to

メンションするアカウント

3. 上記URLを設定したボタンをクリックすると、X(旧Twitter)の投稿画面が表示され、指定した内容でシェアができます。(上記例のリンクで立ち上がるページはこちら

Tips:外部サービスの「Twitter Publish」では埋め込みコードを生成できます。生成したコードは、Embedボックスに貼り付けることで投稿の埋め込みやシェアボタンの設置が可能です。

ツイッター ソーシャルボタン ソーシャル ソーシャルメディアシェア

こちらの回答で解決しましたか?