サービスサイトへ

このセクションの記事

embed機能 開発ガイドライン

  • 更新

embedとは

embedとは、noteの記事内にサービスの貼り付けられる機能です。
（noteでは主に「埋め込み機能」と表現しています）

下記の手順に従っていただくことで、サービスをnoteの記事に埋め込むことができます。

※ 原則、「貴社サービスのユーザー」が、「貴社サービスを通じて」行った投稿、販売している商品をnoteに埋め込むことで、貴社サービスユーザーがnote上で活動の場を拡げることを目的とした申請に絞って承認しております。

※ 埋め込みに対応しているサービス一覧は、以下ヘルプページをご覧ください。

▼ テキスト記事に埋め込みできるサービス一覧

 

embed機能利用手順

embed機能の利用にあたっては、まずサービスの内容がnoteの世界観にマッチしているかを審査させていただきます。

  1. note embed利用規約をお読みいただき、サービスが利用規約に反しないものかご確認ください。
  2. note embedデザインガイドラインをお読みいただき、ガイドラインに沿ったembedのイメージを作成ください。
    embed01.png
  3. こちらの申請フォームからサービスの内容と2のイメージ図を申請ください。
  4. note運営チームで申請いただいた内容を確認後、審査結果を担当者さま宛にメールにて連絡させていただきます（通常2・3営業日）
  5. 審査結果に問題がなければ、下記の技術仕様を参照いただきembedを実装ください。
  6. 実装完了後、endpointのURLをメールにてご連絡ください。
  7. 運営チームにてURLの登録後、埋め込みが可能になります。

 

技術仕様

noteのembedは、oEmbedの標準仕様に基づいて設計されています。

実装手順

1. endpointのURLを決める

noteでは現在、embed機能利用手順 6. のとおり、審査通過後にendpointのURLをいただく形をとっています。noteのエディタ上で、埋め込みたいページのURLが貼られた際に、

https://example.com/○○○?url=埋め込みたいページのURL

にリクエストを送信するので、https://example.com/○○○ の部分をendpointとして申請ください。

※ https://example.com/○○○ の部分は自由に設定ください。
※ 一つのサービス（ドメイン）につき、endpointは一つにしてください。

 

2. 埋め込みたいページのheadタグ内にlink要素として application/json+oembed と endpoint のURLを入れる

※ 前述の通りリクエストは申請いただいたURLからおこないますので必須ではありませんが、oEmbedの仕様に準拠するため設置をおすすめします。

例:  <link rel="alternate" type="application/json+oembed" href="https://example.com/○○○?url=埋め込みたいページのURL">

 

3. endpoint を fetch したら json を返す形にする

例:
{
    version: "1.0",
    width: "100%",
    height: 243,
    type: "rich",
    provider_name: "example",
    provider_url: "https://example.com",
    url: "https://example.com/embed/123" //埋め込むembed自体のURL 例: https://note.com/embed/notes/n82a3922ad3b7
}

noteの仕様として必須要素は、width, height, provider_name, provider_url, url になります。
※ type は参照しておりません。

 

4. 実際に埋め込まれるページをつくる

例: https://note.com/embed/notes/n82a3922ad3b7

※noteではアカウントに対し独自ドメインを設定できるサービスを提供しており、endpointや埋め込まれるページに対してnote.comドメイン以外からのアクセスが発生します。この点を踏まえドメイン名でのアクセス制限等は行わないようお願いいたします。

 

注意事項

  • 申請いただいたembedに不備があった場合は、修正をお願いすることがあります。
  • 利用規約に反していると判断した場合は、申請を却下させていただきます。
  • 利用開始後、サービスの内容が利用規約に反していると判断した場合はご利用を停止させていただくことがあります。

 

関連記事