【5分で作成可能】STUDIOでSNSシェアボタンを作成する方法を解説

こんにちは!会社員クリエイターのこばたです!

今回は、イベントサイト等でよく見かけるSNSシェアボタンを作成する方法を解説します。

X(Twitter)のシェア方法を解説しますが、ボタン作成から設定まで5分でできますので、一つのスキルとして覚えておきましょう。

スポンサーリンク
目次

ボタンを作成する

まずはクリックするためのボタンを作成します。お好みのボタンで問題ありません。

リンクを設定する

作成したボタンを選択した状態で左上にある「<div>」という部分を選択して、右側の設定パネルを出します。

そして、リンクの「+」をクリックし「ページまたは外部URL」という部分に下の文字列をコピー&ペーストします。

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

変更できるオプションは以下の通りです。

  • テキスト
  • URL
  • ハッシュタグ(複数指定の場合カンマ区切りで指定が可能)
  • ツイート内に含むユーザー名
  • ツイート後に表示されるユーザー

テキストをカスタマイズする

変更前
変更後

今回は、「ツイート内に含むユーザー名」と「ツイート後に表示されるユーザー」は表示したくないので削除しています。
お好みのテキストやURLに変更してみてください。変更する際に、外側の「[]」も削除するようご注意ください。

また、ハッシュタグを複数入れたい場合は、カンマ(,)で区切ることで追加が可能です。

テキストを変更してリターンキーを押したら設定が完了です。

まとめ

頻繁に使う機能ではないかもしれませんが、イベントサイトや特設ページによく用いられています。

そういったWebサイトを作成する際は、口コミが広がるきっかけとなるSNSシェアボタンの作成を提案すると良いと思います。

STUDIOでサイトの制作を依頼したい、STUDIOでWebサイト作りたいけど、何から始めていいか分からない…という方へ。
STUDIOにてサイトの制作依頼やメンター等の依頼も承っておりますので、ぜひお問い合わせよりご連絡ください!

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

1999年生まれの会社員クリエイター。
ノーコードWeb制作ツール「STUDIO」に特化して、副業でホームページやランディングページの制作を行っているWeb製作者。「Figma」を利用したWebデザインも得意領域。本業はITベンチャーの営業職会社員。

STUDIOを誰よりも愛する僕が、ユーザーの皆さんにとって役立つ情報を発信しています。

目次