概要

ライブ一覧タグは、未来の配信予定のライブおよび過去の配信済みのライブを一覧で表示する機能です。各ライブのクリッカブルエリア（画像やテキスト）をクリックすると、そのライブの視聴ページに遷移します。ライブ視聴ページなどにこのタグを埋め込んで頂くことで、ライブを視聴したユーザーを他のライブに誘導することができます。

__________2022-06-20_23.11.48.png

設定方法

1. 共通タグを埋め込んでください

2. ライブ一覧タグを対象のページに埋め込んでください

<div class="tagfab-list" data-shop="ショップID1[,ショップID2,...]" data-count="10"></div>

使用可能な変数

data-shop
ライブ一覧を表示するショップIDをご指定ください。カンマ区切りで複数のショップIDをご指定いただくことが可能です。
※ ショップIDの確認方法
data-streamer
ライブ一覧を表示する配信者IDをご指定ください。カンマ区切りで複数の配信者IDをご指定いただくことが可能です。
※ 配信者IDの確認方法
data-count
ライブ一覧に表示するライブの数（1~100）をご指定いただくことが可能です。デフォルトでは10個が表示されます。
data-column
ライブ一覧の列数を3〜6列でご指定いただくことが可能です。デフォルトの場合は5列で表示されます。
data-aspect
サムネイルの画像比率をご指定いただくことが可能です。

デフォルト（720×405）の場合

5×6 とご指定いただいた場合

square とご指定いただいた場合
data-recent
以下の値をご指定いただくことが可能です。
- next
  未来の配信予定のライブを配信日時の降順で表示します。表示するライブが data-count で指定された数に満たない場合は、過去の配信済みのライブも表示します。
- prev
  過去の配信日設定のライブを配信日時の降順で表示します。

__________2022-06-20_23.14.59.png

特記事項

ライブ一覧のリンク先を固定したい場合はショップ情報の「ライブ閲覧ページURL」で URL をご指定ください。
必ずライブ動画タグが存在する HTML 内でご利用ください。
ライブ動画タグ（<div id=”tagfab” ...></div>）にて、data-theme 属性と data-width 属性で指定した値はライブ一覧タグのコンポーネントに引き継がれます。
ライブ一覧を表示するページでライブ動画を再生させたくない場合は、以下のように条件を設定してください。
- URL パラメーターに live_id を設定しない
- ショップ情報の「ライブ閲覧ページURL」を指定する
ライブ一覧は、data-shop で指定されているショップのライブが、data-count で指定した数だけ配信日時の降順で表示されます。
ライブ一覧に表示される条件は以下の通りです。
- ライブIDの公開設定が「公開」であること。（詳細はこちら）
- 現在表示中のライブではないこと（live_id が一致しないこと）
- data-recentの設定に適合すること
  - data-recentの設定がない場合は、data-recent="prev"と同じ挙動です
ライブ一覧の表示項目は以下の通りです。
- ウェイティング画像
- 配信日時
- タイトル
ライブ一覧は PC の場合 5 カラムで表示されます。
ライブ一覧はモバイルの場合 2 カラムで表示されます。
ライブ一覧でライブの画像またはテキストをクリックすると、ライブ視聴ページに遷移します。
ページ遷移の際、ページのドメイン、パス、live_id 以外のパラメータは維持されます（URL の live_id を書き換えます）。ただし、ショップ情報の「ライブ閲覧ページURL」を指定した場合は、ご指定の URL に live_id パラメータを付加して遷移します。
ライブ一覧の見た目はテーマ管理画面にてテーマを作成し、適用することができます。下記ページの「使用方法」と「ライブ一覧コンポーネントのカスタマイズ項目（grid 表示、list 表示共通）」の項目を参照ください。
https://tagsapi.info/2021/02/06/template/

よくある質問

Q.ライブ一覧タグは１ページに複数設定することができますか？

A.以下のように複数設定することが可能です。

<!DOCTYPE html>
<html>
  <head>
  :
  </head>
  <body>
    :
    <div id="tagfab" data-theme="sample" data-width="700" /></div>
    :
    <div class="tagfab-list" data-shop="ショップID-A" data-count="10"/></div>
    :
    <div class="tagfab-list" data-shop="ショップID-B" data-count="10"/></div>
    :
    <div class="tagfab-list" data-shop="ショップID-C" data-count="10"/></div>
    :
　  <script src="https://api.tagfab.jp/live.js"></script>
    :
  </body>
</html>

Q. ライブ一覧にサムネイルが表示されません。

A. 管理画面のショップ情報の必須項目やストリーマー情報のストリーマー名が未入力の場合、ライブ一覧のサムネイルが表示されないことがあります。

Q. 複数のショップがあるときはどのように運用すると良いでしょうか？

下記のように記載すれば、今までと同じように１つのライブ一覧に複数のショップをまとめることができます

<div class="tagfab-list" data-shop="ショップID-A,ショップID-B" data-count="10"/></div>

下記のように２つのタグを同一ページに記載すれば、ショップごとにライブ一覧を分割できます

<div class="tagfab-list" data-shop="ショップID-A" data-count="10"/></div>
<div class="tagfab-list" data-shop="ショップID-B" data-count="10"/></div>

また、ページをそれぞれ分けることもできます

ページA：

<div class="tagfab-list" data-shop="ショップID-A" data-count="10"/></div>

ページB：

<div class="tagfab-list" data-shop="ショップID-B" data-count="10"/></div>