STUDIOで「noteで書く」ボタンを設置する方法

先日、noteがこんな発表をしててTweetするみたいなノリで、いま見ているサイトについてnoteが書きやすくなった。

実装での埋込み方法は、公式がこちらで解説しているので、今回はSTUDIOでのサイトで「noteで書く」ボタンを設置する方法を解説

リンクタグを活用する

公式が解説しているやり方の１つであるこのコードを埋め込む形式だと、STUDIOはscript付きのコードは埋め込めないので設置不可能。

<a href="https://note.mu/intent/social_button" class="note-social-button" data-url="https://www.pieceofcake.co.jp/"></a>
<script async src="https://cdn.st-note.com/js/social_button.min.js"></script>

なので、ボタンのデザインをカスタマイズする場合のとこで紹介しているリンクタグを活用して再現していく。

どうやらaタグを

<a href="https://note.mu/intent/post?url=https://www.pieceofcake.co.jp/&hashtags=%E3%83%94%E3%83%BC%E3%82%B9%E3%82%AA%E3%83%96%E3%82%B1%E3%82%A4%E3%82%AF,note,cakes" target="_blank" rel="noopener">noteで書く</a>

みたいにすれば良さそうなので、とっても簡単。

このコードのhref="xxx"の部分（下記コード）を、STUDIOのリンク設定で設置。

https://note.mu/intent/post?url=https://www.pieceofcake.co.jp/&hashtags=%E3%83%94%E3%83%BC%E3%82%B9%E3%82%AA%E3%83%96%E3%82%B1%E3%82%A4%E3%82%AF,note,cakes

するとこんな感じで、クリックしたらnoteの投稿画面に飛んでデフォルトで設定した内容が入ってるようになる。

サンプルとして、デフォの内容をSTUDIOのサイトに置き換えてみるとこのコードを設置すればOK

https://note.mu/intent/post?url=https://studio.design/ja/&hashtags=STUDIO,note

この方法なら、ボタンのデザインを自由に簡単にいじれるので試してみて下さーい！

#STUDIOTips #STUDIO #note