「noteで書く」ボタンの設置・仕様

更新:

ウェブサイト・ブログなどに設置する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-url
自サイトのページのURLを指定する。 未記入(空白)または data-url 属性を削除すると、自動的にそのページのURLが代入されるようになっている。
data-hashtags
任意のハッシュタグを最大10個まで指定できる。 各ハッシュタグはカンマで区切る。

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
自サイトのページのURLを指定する。
hashtags
任意のハッシュタグを最大10個まで指定できる。 各ハッシュタグはカンマで区切る。

URL、hashtags ともにURLエンコードが必要。 ただし、「:」「/」「,」など半角英数字はURLエンコードしてもしなくても動作するようである。

ボタンを自作する場合、note のロゴデータやイメージカラーについては ブランドリソース – noteヘルプセンター を参照すると良い。 ロゴデータは、EPS、SVG、PNG形式が用意されている。

エメラルドグリーンのような色は16進数で #41c9b4 と規定されている。 ただし、公式SNSボタンに実際に使用されているグリーンは #2cb696 となっている。