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

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

Saika avatar
対応者:Saika
今週アップデートされました

シェアボタンの設置方法

STUDIOでXのシェアボタンを設置するには、エディタでシェアボタンをデザインし、リンク設定にて、以下をのようなリンクを設定します。

http://twitter.com/share?url=[シェアするURL]&text=[ツイート内テキスト]&via=[ツイート内に含むユーザ名]&related=[ツイート後に表示されるユーザー]&hashtags=[ハッシュタグ]
スクリーンショット:シェアボタンにリンクを設定する様子。

サンプルとして下記リンクをシェアボタンに設定すると、ボタンのクリックでこちらのページが立ち上がります。これで簡単にシェアを促すことが可能になります。

http://twitter.com/share?url=https://naomi-osaka.studio.design&text=Congratulations, Naomi Osaka!&hashtags=withSTUDIO

設定で指定できるオプションは以下の通りです。

  • text

  • url

  • hashtags(複数指定の場合カンマ区切りで指定可)

  • via

  • related

  • in-reply-to

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

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

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