【note】に“記事を書く”ボタンをウェブサイトに埋め込む方法【WordPress】

簡単にオリジナルの有料電子書籍が書ける【note】は、人気のプラットフォームです。
この【note】のボタンをウェブサイトに埋め込んで、リンク付きの記事をユーザーに書いてもらい、簡単に紹介してもらえるように出来ます。

僕も、動画制作関係の記事は【井上光貴 note】の方で上げています。
是非、見てみて下さい。

noteとは

noteは、文章、写真、イラスト、音楽、映像などの作品を投稿して、クリエイターとユーザをつなぐことができる、まったく新しいタイプのウェブサービスです。

つくった作品（ノート）は、通常のブログやSNSなどと同様に無料で公開することもできますし、手軽に売り買いすることも可能です。

・新作を発表して読者やファンと交流する。
・とびっきりの自信作のノートを売る。 
・あこがれのクリエイターのノートを買う。

クリエイターとファンの、まったくあたらしい交流のかたちをお楽しみいただければ幸いです。

引用 : note noteへようこそ

“記事を書く”ボタンを作る

まずは、完成形です。

手順としては、

【note】ボタン設置サイトを開く(noteへログイン及び新規登録)

“記事を書く”ボタンを作るサイトは、【note】が公式に提供しているウェブサイトで制作することが出来ます。
↓サイトは下記のリンクからどうぞ

URL : 「noteで書く」ボタンの設定方法 https://note.pieceofcake.help/hc/ja/articles/360000272622–note%E3%81%A7%E6%9B%B8%E3%81%8F-%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95

コードをコピー&貼り付けする

次に、任意のコードをコピーします。
コードは、3種類あり

1. シンプルなプレーンなボタンコード
2. ハッシュタグを設定できるボタンコード
3. 任意の画像に設定できるボタンコード

の3種類が提供されています。

シンプルなボタンコード

お持ちのウェブサイトの任意の場所にコピー&貼り付けをして【 data-url 】の後にご自身のウェブサイトのURLを張り付ければ完成です。
下のコードは、KOKO.BLOGのURLになっています。

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

ハッシュタグを設定できるボタンコード

note内で使用できるハッシュタグを追記出来るコード製作です。
基本的にシンプルなボタンコードと同じですが【 data-hashtags 】タグの後にハッシュタグを入れます
※区切る時は【 , 】で区切り最大10個まで使用可能。

<a href="https://note.mu/intent/social_button" class="note-social-button" data-url="https://kokonet-pro.com//" data-hashtags=井上光貴,note,ブロガー,ウェブ制作,動画制作"></a>
<script async src="https://cdn.st-note.com/js/social_button.min.js"></script>

任意の画像に設定できるボタンコード

任意の画像に変えて、オリジナルのボタンを製作しクリック率を高めることも出来ます。
下記は、noteから提供されているロゴ画像を使用しています。
※ソースコードの画像部分は、ご自身で加工されたものをご利用ください。

noteのロゴデータダウンロード : noteロゴデータ https://note.pieceofcake.help/hc/ja/articles/360000235582-note%E3%83%AD%E3%82%B4%E3%83%87%E3%83%BC%E3%82%BF

<a href="https://note.mu/intent/post?url=https://kokonet-pro.com/&hashtags=井上光貴,note,ブロガー,ウェブ制作,動画制作" target="_blank" rel="noopener"><img src="任意の画像コードを挿入"></a>

WordPressに埋め込む

WordPressに埋め込むときは、“カスタムHTML”に埋め込むことで表示されます。

まとめ

簡単にnoteのオリジナルの“記事を書く”のボタンが制作でき埋め込むことが出来ます。
このボタンをご利用のウェブサイトに埋め込んでおくことでウェブマーケティングが可能です。