TalentioがoEmbedに対応した話

こんにちはTalentioの佐藤です。

採用管理システムのTalentioでは採用ページを作ることができます。

先日この機能をアップデートし、ブログ等にURLを貼り付けるだけで採用ページを埋め込めるようにしました。これにより採用ページの共有が簡単にできるようになります。

例えば、このブログ ( はてなブログ ) にTalnetioで作成したページのURLを貼るとこのようになります。

これはoEmbedという規格に沿って実装することで実現しています。

oEmbedとは

埋め込みコンテンツの規格です。メタデータのフォーマットや取得フローを定義しています。ドキュメントはこちらです。

コンテンツの提供者と利用者がこの規格に沿って実装をすることで、通常ページのURLから埋め込み用のコンテンツを取得できるようになります。今回のアップデートでTalentioはコンテンツの提供者として必要な実装をしました。具体的には次の実装をしています。

埋め込みコンテンツを表示するURLを追加
埋め込みコンテンツのメタデータを返すAPIを実装
メタデータ取得APIと採用ページの紐付け

それぞれについて詳しい内容を見ていきます。

1.埋め込みコンテンツを表示するURLを追加

埋め込み時に表示する画面のURLです。今回のケースではこのURLを追加しています。

2.埋め込みコンテンツのメタデータを返すAPIを実装

埋め込みコンテンツの表示に必要なデータを返すAPIを作ります。Talentioでは以下のようなデータを返すAPIを用意しています。

{
  "type": "rich",
  "version": "1.0",
  "provider_name": "Talentio",
  "provider_url": "https://www.talentio.co.jp",
  "html": "<iframe src=\"https://recruit.talentio.co.jp/r/1/c/talentio/embed/pages/21466\" width="100%" height=300 frameborder=0 title=\"株式会社タレンティオ | カスタマーサクセス\"></iframe>",
  "url": "https://recruit.talentio.co.jp/r/1/c/talentio/embed/pages/21466",
  "width": "100%",
  "height": 300
}

htmlには表示したいコンテンツを指定します。Talentioでは1で作成した画面を表示するiframeを設定しています。widthやheightは実際に描画する際のサイズを指定します。

APIのレスポンスに含めるデータについて、詳細はこちらを参照してください。

3.メタデータ取得APIと採用ページの紐付け

オリジナルのページにAPIのURLを指定したタグを設定し、2つを関連づけます。

実際にTalentioで作成した採用ページには以下のようなタグが設定されています。hrefには2で作成したAPIが指定されており、これにより採用ページとAPIが関連づいています。

<link href="https://open.talentio.com/oembed?url=https://recruit.talentio.co.jp/r/1/c/talentio/pages/21466&format=json" rel="alternate" title="oEmbed Profile of カスタマーサクセス" type="application/json+oembed">