メインコンテンツにスキップ
すべてのコレクションよくある質問エディタ(デザイン)
「この記事をシェアする」ボタンの設置方法
「この記事をシェアする」ボタンの設置方法

Studioで簡単に設置できる「この記事をシェアする」ボタンの作り方を解説します。現在表示しているページのURLを利用し、XやFacebookへの投稿画面をワンクリックで呼び出す方法、およびカスタマイズ可能なシェアボタンテンプレートの使用方法について詳しく説明します。

Saika avatar
対応者:Saika
1か月以上前に更新

「この記事をシェアする」ボタンの設置方法

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

詳しい手順は、X(Twitter)シェアボタンの設置方法をご覧ください。

スクリーンショット:Xのシェアボタンを配置する様子。

Facebookの場合は、下のURLをご利用ください。

Facebook:

https://www.facebook.com/sharer/sharer.php?u=[ここにシェアするページのURLを貼り付けてください]

シェアボタンテンプレート

エディタには、XとFacebookのシェアボタンのパーツテンプレートが用意されています。追加パネルの埋め込みメニューから追加できます。これらのボタンは、デザインのカスタマイズも自由に行えます。

スクリーンショット:シェアボタンのテンプレートを配置する様子。

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

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