ブログやサイトに毛穴詰まりチェッカーを埋め込む(無料ウィジェット)

スキンケアについて書いている人 — ブログでも、ニュースレターでも、クリニックのサイトでも、クライアントのストアでも — であれば、読者からはいずれ同じ質問が来ます。「でも、この保湿剤は毛穴を詰まらせない?」今なら、その答えを読者自身があなたのページ上で出せるようにできます。Pore Clogging Checker の無料の埋め込み版です。

ウィジェットでできること

ウィジェットは、コンパクトなフレームに収めた完全なアナライザーです。訪問者は成分リストを貼り付けると、マッチしたすべての成分に対する色分けされた 0-5 のコメドジェニック評価を受け取れ、評価手法の注記も展開して読めます。動作は完全に訪問者のブラウザ内。アカウント登録もアップロードも、貼り付けた内容の追跡もありません。

追加方法

HTML 2 行を、ページの任意の場所に置くだけです。

<div data-pore-clogging-checker></div>
<script src="https://porecloggingchecker.app/widget.js" defer></script>

これが統合のすべてです。ローダースクリプトは:

• data-pore-clogging-checker 属性を持つすべての要素を見つけ(data-pcc-widget を使っても構いません)、
• ホストされているチェッカーを指す iframe を挿入し、
• 解析の実行後も含めて、コンテンツに合わせてフレームのサイズを自動調整します。

<script> タグは、埋め込みポイントがいくつあってもページに 1 回置くだけで構いません。すべての場所にマウントされます。

設定オプション

コンテナの div に data 属性として設定を渡します。すべて省略可能です:

• data-locale — ウィジェットの言語を強制します: en、zh、ja、ko。デフォルトでは訪問者のブラウザ設定に従います。
• data-theme — light、dark、system(デフォルト)で見た目を制御します。
• data-prefill — 成分入力欄を事前入力します。記事で特定の製品をレビューするときに便利です:

<div
  data-pore-clogging-checker
  data-locale="en"
  data-theme="light"
  data-prefill="Aqua, Glycerin, Cocos Nucifera Oil, Isopropyl Myristate"
></div>

完全な埋め込みガイドでは、WordPress、Shopify、Squarespace、Wix、Ghost 向けの手順をステップごとに解説し、ライブプレビュー付きのインタラクティブな設定ツールも用意しています。

スタイルと配置のコツ

ウィジェットはページの幅を引き継ぐので、記事本文と同じコンテナに入れてください。製品レビューとその結論の間、または成分の深掘り記事のそばに置くのが最も自然に見えます:

<div style="max-width: 720px; margin: 2rem auto;" data-pore-clogging-checker></div>
<script src="https://porecloggingchecker.app/widget.js" defer></script>

フレームはサイト自身のライト/ダークテーマを使い、訪問者のシステム設定に合わせます。

無料である理由

このチェッカーは公共の利益のためのツールです。クライアントサイドで動作し、成分データを一切収集せず、ニキビのでやすい肌の人がより良い選択をできるようにするために存在しています。埋め込みに費用はかからず、API キーも不要で、レート制限を気にする必要もありません。すべての処理は訪問者のブラウザが担います。

開発者とカスタマイズしたい人へ

ローダーは依存ライブラリのないバニラ JavaScript 約 80 行です。セルフホストしたい場合や中身を監査したい場合はソースを読んでください。iframe は pcc:resize メッセージを送出するので、自分で高さを管理したい場合はそれをリッスンできます。

埋め込んでみたら、何を作ったかぜひ教えてください — hello@porecloggingchecker.app まで一報を。読者が評価の算出方法を尋ねたら、究極ガイドへ案内してください。