# 最新の投稿 teaser をあなたのウェブサイトに埋め込む **URL:** \ **Category:** Administrators\ **Tags:** embedding, how-to\ **Created:** [2018 年 3 月 7 日午前 6:56 UTC](https://meta.discourse.org/t/embed-latest-post-teasers-into-your-website/82388 "2018-03-07T06:56:11Z")\ **Posts on this page:** 1\ **Showing post:** 1
**Author:** ![modius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/modius/32/108600_2.png) [@modius](https://meta.discourse.org/u/modius)\ **Post date:** [2018 年 3 月 7 日午前 6:56 UTC](https://meta.discourse.org/t/embed-latest-post-teasers-into-your-website/82388/1 "2018-03-07T06:56:11Z")
Discourse フォーラム（ **labs.daemon.com.au** ）のコンテンツを、当社の公開ウェブサイト（ **www.daemon.com.au/labs** ）に動的に読み込む必要がありました。 コードは、Discourse から選択されたカテゴリの最新コンテンツを取得し、当社のウェブサイトに適合するマークアップでラップしてからページに挿入します。その後、コードをより汎用的にするためのいくつかの変更を加え、異なる Discourse フォーラムからのコンテンツを異なるウェブサイトに読み込む際に簡単に再利用できるようにしました。 Discourse フォーラムには多数のデータエンドポイントが存在します。例えば、[最新トピック](https://labs.daemon.com.au/) にアクセスすると、そのページに必要なデータを返す [`latest.json`](https://labs.daemon.com.au/latest.json) エンドポイントが読み込まれます。これにより、Discourse のコンテンツを独自のウェブサイトで表示することが可能になります。 > **[Daemon Labs](https://labs.daemon.com.au/)** > > Experiments of the daemonites and their friends ## 開始前に Discourse からリモートでコンテンツを読み込むには、Discourse のエンドポイントを当社のウェブサイトから利用可能にする必要があります。これは Discourse の「管理」設定で行うことができます。 管理者権限を持つアカウントで Discourse にログインし、「管理」パネルの「設定」タブに移動します。 ![](https://global.discourse-cdn.com/meta/original/3X/8/7/8765c570351c6cc4016cba82d012447967e2223b.png) 左側のナビゲーションから「セキュリティ」を見つけてください。その後、右側の「cors origins」フィールドを探します。Discourse のコンテンツを表示するウェブサイトの URL をこのフィールドに追加します（今回の場合：`http://www.daemon.com.au/`）。変更を保存してください。 ![](https://global.discourse-cdn.com/meta/original/3X/8/6/86fdce3f26ea887c64332320ecc2009ac37cd82f.png) ## エンドポイント Discourse は無数のデータエンドポイントを生成するため、リモートで表示したいコンテンツに応じて適切なエンドポイントを見つけることが重要です。カテゴリページの URL の末尾に `/l/latest.json` を追加すると、そのカテゴリの最新投稿を含むエンドポイントが表示されます。例えば、`https://labs.daemon.com.au/c/design/l/latest.json` は `https://labs.daemon.com.au/c/design` のエンドポイントです。 ## HTML & JavaScript 必要なエンドポイントが揃ったので、次にサイトがそのエンドポイントを読み取れるようにし、有用な情報を取得して正しく表示できるようにします。この例では、「デザイン」カテゴリからユーザー #1、#2、#3 のいずれかが投稿した最新の 3 件の投稿を、当社のサイトの `#div` 内に表示することを目指します。また、「デザインカテゴリについて」の投稿は表示しないようにします。 参考：この例では、デモ用に必要なスタイルを提供するため、デフォルトの Bootstrap v4.0.0-beta.2 を使用していますが、使用は完全に任意です。 ```plaintext Discourse 埋め込み
``` ## 完成例 ![](https://global.discourse-cdn.com/meta/original/3X/8/7/8776617da9422b699628336143796312bb178b3b.png) この JavaScript は汎用性が高く、異なるウェブサイトで再利用できます。ただし、ご自身のニーズに合わせて一歩一歩調整することをお勧めします。特に HTML マークアップ部分は、お持ちのサイトのマークアップに合わせてカスタマイズする必要がある可能性が非常に高いです。 お楽しみください！ h/t @sesemaya [Embed latest topics from Discourse on your website - development - Daemon Labs](https://labs.daemon.com.au/t/embed-latest-topics-from-discourse-on-your-website/540) --- _[View the full topic](https://meta.discourse.org/t/embed-latest-post-teasers-into-your-website/82388)._