EmojiSup Widget

こういう絵文字リアクションのバーを自分のサイトにも置きませんか。

無料のリアクションウィジェットは一分で設置できます。登録も、アカウントも、こちら側での設定も必要ありません。

設置のしかた

サイトの HEAD に次を追加します。

<script src="https://api.emojisup.org/widget.js?4"></script>

バーを表示したい場所の BODY に次を追加します。

<div data-emojisup></div>

設置はこれで終わりです。読み込まれたスクリプトは自分のスタイルシートを読み込み、ページ内から data-emojisup 属性を持つ要素を探し、そのそれぞれにリアクションのバーを描きます。

ウィジェットの識別子

識別子はページのアドレスから作られます。そのため一つのページに複数のウィジェットを置けますし、ページごとに別々のカウンターが保たれます。utm_source や fbclid のような広告用のパラメータは無視されるので、広告から来た訪問者にも他の人と同じ数字が見えます。

識別子は自分で指定することもできます。

<div data-emojisup id="my-article-42"></div>

識別子が変わると、ウィジェットは新しいものとして始まり、カウンターはゼロに戻ります。

設定

設定はどれも同じ要素の属性で、すべて省略できます。

data-emojisup-set — 挙げたリアクションだけを表示します。カンマで区切ります。

<div data-emojisup data-emojisup-set="👍,❤️,🔥,🤣"></div>

data-emojisup-theme — 色を選びます。既定は light、暗い背景には dark、訪問者のシステム設定に合わせるなら auto です。

data-emojisup-size — 大きさを決めます。s、既定の m、l のいずれかです。

data-emojisup-align — 並びを寄せます。left、center、right のいずれか。指定しなければリアクションはブロックの幅いっぱいに広がります。

<div data-emojisup data-emojisup-theme="dark" data-emojisup-size="l" data-emojisup-align="center"></div>

同じウィジェットを、ダークテーマ・リアクション四つ・中央寄せにするとこうなります。

あとから読み込まれる内容

ページの後から届く内容の中にウィジェットがある場合は、その内容が入ったあとで次を呼びます。

<script>
    emojiSup.update();
</script>

ページをもう一度見直して、新しいウィジェットを動かします。カウンターの更新を止めたいときは emojiSup.destroy() を呼びます。

ウィジェットが保存するもの

ウィジェットが置くクッキーは ev_user_id 一つだけで、有効期間は一年です。中身はランダムな識別子だけです。これがあるので、その訪問者がどのリアクションを選んだかを覚えていられ、ページを読み込み直しても選択が残ります。リクエストのたびに、バーが置かれているページのアドレスを送ります。カウンターをページごとに分けるためです。名前もメールアドレスもフォームの入力も送りません。

カウンターが更新されるのは、タブが開いていて画面に見えているあいだだけです。背景のタブではサーバーへの問い合わせを止め、数分間クリックがなければ自分から間隔を広げます。

よくある質問

本当に無料ですか。 はい。アカウントを作る必要もありません。

一つのページにいくつ置けますか。 必要なだけ置けます。それぞれに別の id を付けてください。

訪問者はリアクションを変えられますか。 変えられます。ウィジェットごとに一人一つで、別のものを押せば票が移り、同じものをもう一度押せば取り消されます。

サイトを作り直してもカウンターは残りますか。 ページのアドレス、または自分で付けた id が変わらなければ残ります。

jQuery は必要ですか。 不要です。このスクリプトに依存関係はなく、大きさは約 45 KB です。