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

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

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

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

※2025年8月27日現在の仕様に基づいたご案内です。

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

設定手順

  1. シェアボタンに設定するテキストやボタンを選択します。
    ボタン設置方法の例:左パネルの[追加]タブ > [パーツ]タブ > ボタン[全て表示]

  2. 右側のパネルの[設定]タブを開きます。
    右パネルが閉じている場合は開いてください。

  3. [リンク]欄に、以下形式の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

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

Studioでは、現在表示しているページのURLを $url という変数で取得できます。この変数を利用すると、閲覧者が現在のページをSNS投稿画面に呼び出し、シェアできるようになります。

3. サイトを更新します。 更新するまで、変更内容は反映されません。

4. プレビューまたは公開ページでリンクをクリックし、シェアボタンが機能することを確認します。

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

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

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