ウェブサイト・ブログなどに設置するSNSのボタン（ソーシャルプラグインなどとも呼ぶ）としては、日本では Twitter、facebook、はてなブックマークが有名で、よく見かける。
実はnoteにも公式のSNSボタンが用意されている。 【noteカイゼン】ソーシャルプラグイン「noteで書くボタン」をリリースしました によると2019年5月22日にリリースされていたようである。
詳しい仕様については、note公式の開発者向け情報の 「noteで書く」ボタン に記されている。
一番簡単な方法は指定のHTMLタグ（コード）を貼り付ける方法。
<a href="https://note.com/intent/social_button" class="note-social-button" data-url="https://example.com/test.html"></a> <script async src="https://cdn.st-note.com/js/social_button.min.js"></script>
以下の属性を指定できる。
data-hashtags は以下のように記述する。
<a href="https://note.com/intent/social_button" class="note-social-button" data-url="https://example.com/test.html" data-hashtags="設置,サンプル"></a> <script async src="https://cdn.st-note.com/js/social_button.min.js"></script>
以下表示例。
表示領域は横80px×縦20pxとなっている。 形状は横長（horizontal）のみで縦長（vertical）はない。
noteの形式上仕方ないが、カウント（引用）数などの数字の表示はない。
公式ボタンが気に入らなかったり、自サイトの他のボタンとデザインを合わせたい場合は、ボタンを自作し、そこに「noteで書く」のリンクを貼ることもできる。
以下はテキストにリンクを貼った場合。
<a href="https://note.com/intent/post?url=https://example.com/test.html&hashtags=%e8%a8%ad%e7%bd%ae,%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab" target="_blank" rel="noopener">noteで書く</a>
引数の仕様は以下の通り。
URL、hashtags ともにURLエンコードが必要。 ただし、「:」「/」「,」など半角英数字はURLエンコードしてもしなくても動作するようである。
ボタンを自作する場合、note のロゴデータやイメージカラーについては ブランドリソース – noteヘルプセンター を参照すると良い。 ロゴデータは、EPS、SVG、PNG形式が用意されている。
エメラルドグリーンのような色は16進数で #41c9b4 と規定されている。 ただし、公式SNSボタンに実際に使用されているグリーンは #2cb696 となっている。
