記事一覧ウィジェットを利用する

©ノアドット株式会社

高橋 理恵

森勇人

高橋 理恵

ノアドット株式会社

東芝でSIerを3年経験し、2005年にヤフー入社。法人向けサービスの営業、Yahoo!ニュースのビジネス開発の業務を担当。ノアドット事業の立ち上げに関わり設立とともに出向し、2017年秋にノアドットに転職。現在は主にインサイドセールス、カスタマーサポートの業務を担当。クアラルンプール在住。

高橋 理恵の記事一覧を見る

森勇人

ノアドット株式会社

IDGジャパンでコンピュータ雑誌の編集者を経て、2004年にヤフー入社。ヤフーでは編成部門のち、企画部門にて「R25」「X BRAND」のサービス責任者を務める。その傍らnor.事業の立ち上げにも関わり、ジーニー社を経てノアドット社にジョイン。広告業務を中心に売上全般の管理を行っている。

森勇人の記事一覧を見る

「記事一覧ウィジェット」機能を使うと、任意の記事一覧の見出しをお持ちのウェブサイトから簡単に配信できます。

以下は大日本印刷様の記事一覧ウィジェットご利用例で、「FUN'S PROJECT」ページ内の「クリエイティブニュース」というコーナーがウィジェットを使って実現されています。

そのほかデモページでも実際のイメージをご覧いただけます。

記事一覧ウィジェットは、HTMLページのテンプレートにタグを追記するだけで簡単に実装できます。タグの基本構成は、以下の通りです。

<div class="(Widget Type)"></div>
<script async src="https://www.nordot.jp/js/widgets-2.0.0.js" charset="utf-8"></script>

記事一覧ウィジェットのタイプには以下の2種類があり、divタグのclass属性の値としてWidget Typeを指定することで選択します。(<script>タグのほうは、DOM構築前の実行を避けるためHTMLの<body>タグ内の最終行に追記することを推奨しています)

  • nordot-post
    nor.のCMSで検索機能を使ってコンテンツホルダーの記事を絞り込み、その見出しをそのまま取得したい場合は、こちらのnordot-postという値を指定します。
  • nordot-curation
    CMSで検索機能を使ってコンテンツホルダーの記事を絞り込んだうえで、さらに編集者の目検で絞り込んだもの(手動でキュレーションの作成を行ったもの)の見出しを取得したい場合は、こちらのnordot-curationという値を指定します。

いずれのWidget Typeでも、divタグ内でclass属性のほかにdata属性を指定することで、表示内容のカスタマイズが可能です。 詳細は以下をご覧ください。

■ nordot-post

nordot-postタイプでは、下記のdata属性を指定可能です。

※文字列のコピー&ペーストが可能なPDFファイルもあります。

data属性のうち「data-source-id」は必須項目で、nor.のCMSで以下の手順で確認できます。

1. 当該キュレーター・ユニットの「Home」画面で、検索窓を使って任意の絞り込みを行い、「Save this Search」ボタンを押して検索結果を保存します。
2. 保存された検索結果(=ソース)にマウスのカーソルを乗せると歯車のアイコンが表示されるので、クリックすると「Edit Source」ウィンドウが表示されます。
3. 表示されたウィンドウの「Get the RSS」欄にRSSのURLが表示されるので、下記例のようにdata-source-idを確認します。

RSSのURL例:https://this.kiji.is/-/feed/posts/rss?source_id=0123
上記例の場合のdata-source-id:0123

また、「data-curator-unit-id」は必須項目ではありませんが、これを指定しない場合は収益を取得できないため、収益を受け取りたいキュレーター・ユニットのIDを指定することをお薦めします。

下記はサンプルコードです。

<div class="nordot-post" data-curator-unit-id="1111" data-source-id="0123" data-width="640" data-font-family="'Meiryo',sans-serif" data-show-title="true" data-title-bg-color="#000000" data-title-color="#ffffff" data-title="Jリーグ速報" data-limit="7" data-target="_blank" data-bg-color="#ffffff" data-border-color="#000000" data-hover-color="#8f9499" data-post-title-one-line="false" data-post-title-font-size="1.6rem" data-post-title-color="#000000" data-show-unit-name="true" data-show-published-at="true" data-byline-font-size="1.2rem" data-byline-color="#8f9499" data-show-thumbnail="true" data-thumbnail-width="100" data-show-description="true" data-description-font-size="1.2rem" data-description-color"#8f9499" data-description-length="70">JavaScriptをOnにしてください</div>
<script async src="https://www.nordot.jp/js/widgets-2.0.0.js" charset="utf-8"></script>
■ nordot-curation

nordot-curationタイプでは、下記のdata属性を指定可能です。

※文字列のコピー&ペーストが可能なPDFファイルもあります。

data属性のうち「data-curator-unit-id」は必須項目で、配信したいキュレーションを作成したキュレーター・ユニットのユニットIDを指定します。

下記はサンプルコードです。

<div class="nordot-curation" data-curator-unit-id=“1111” data-width="640" data-font-family="'Meiryo',sans-serif" data-show-title="true" data-title-bg-color="#000000" data-title-color="#ffffff" data-title="Editor's Picks" data-limit="7" data-target="_blank" data-bg-color="#ffffff" data-border-color="#000000" data-hover-color="#8f9499" data-post-title-one-line="false" data-post-title-font-size="1.6rem" data-post-title-color="#000000" data-show-unit-name="true" data-show-published-at="true" data-byline-font-size="1.2rem" data-byline-color="#8f9499" data-show-thumbnail="true" data-thumbnail-width="100" data-show-description="true" data-description-font-size="1.2rem" data-description-color"#8f9499" data-description-length="70">JavaScriptをOnにしてください</div>
<script async src="https://www.nordot.jp/js/widgets-2.0.0.js" charset="utf-8"></script>

ぜひご活用ください!

data-target」属性の値に「_modal」を指定する場合の追加設定

モーダルウィンドウで記事を表示する際、広告配信が正しく行われて収益を確実に受け取っていただくために、必ず別途「モーダルオプションを利用する」の「1. ads.txtを更新する」の設定を行ってください。

また、ウィジェット機能で「data-target」属性の値に「_modal」を指定するだけでなく、ウィジェット機能とは別にモーダルオプション機能も同一ページ内で併用する場合には、「モーダルオプションを利用する」の「ウィジェット併用時の注意」をご確認ください。