X(Twitter)シェアボタンの設置方法
Xのシェアボタンを設置する方法を解説します。Studioでは、URLを指定するだけでシェアボタンを設置できます。必要なオプションやサンプルコードもあわせて紹介します。 ※2025年8月27日現在の仕様に基づいたご案内です。
設定手順
Step1:シェアボタンを追加する
デザインエディタで左パネルを開きます。
追加パネルのボックスメニュー内の[Form Parts]から[Button]を選択し、ボタンをページ内に配置します。
※ボックスを追加して自分でデザインしたボタンを作成することも可能です。ボタンのデザイン変更方法は、以下のヘルプ記事群を参考にしてください。
Step2:シェアボタンにリンクを設定する
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ボックスに貼り付けることで投稿の埋め込みやシェアボタンの設置が可能です。
ツイッター
ソーシャルボタン
ソーシャル
ソーシャルメディアシェア