「このページのURL」変数

STUDIO3.0のデザインエディタでは、「$url」という変数が使えます。

これは「現在表示しているページのURL」という変数で、

テキストボックスのコンテンツパネルから選択したり、リンクパネルの遷移先URLの文字列に含めることができます。

「このページをシェアする」ボタン

$url 変数をうまく使って、ワンクリックでTweet画面やFacebookへのシェア画面を呼び出すボタンを設置できます。この方法ならリンクが動的になるので、以下の例のようにCMSの詳細ページに設置しても機能する動的なシェアボタンの設置が可能です!

シェアボタンは、ボタンのリンク先として、以下のようなSNSの投稿画面を呼び出すURLを設定することで作成できます。

Twitter:

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

Facebook:

https://www.facebook.com/sharer/sharer.php?u=[シェアするページのurl]

上記の [シェアするページのurl] 部分を $url 変数に置き換えれば、常に有効な「このページをシェア」ボタンを作ることができます。

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

STUDIO エディタでは、このリンクを毎回設定する手間を短縮できるよう、TwitterとFacebookのシェアボタンのパーツのテンプレートが準備されています。

アドパネルのBoxタブを下にスクロールし、「Social」セクションを開くとボタンパーツが準備されているので、ドラッグ&ドロップで設置完了です!

もちろん、デザインを変えたい場合は自由にカスタマイズできます。

※ Tweetボタン設置時はリンクパネルを開き、投稿にデフォルトで表示させる文言などを整える必要があります。「&」から始まるまとまりは任意で追加できるもので、削除していただいても構いません。

ツイッター ツイート

回答が見つかりましたか?