オンラインオークションを自分のウェブサイトに表示する方法

良いオークション埋め込みが表示するもの

4つだけ、それ以外は何もありません。

• 今開催中のロット。写真、タイトル、現在の価格、入札件数、そして各終了時刻まで実際に動くカウントダウン付きで。まだ始まっていないロットは、代わりに開始価格と開始までのカウントダウンを表示します。
• クリックでロットが開くこと。オークションサイト上で新しいタブに開くので、訪問者はあなたのページを離れずに入札できます。
• 何もないときは何も表示しない。開催中も近日開催もないときは、ブロックは自分で消えるべきです。先月のオークションや「現在オークションはありません」を表示する埋め込みは、すべての訪問者に「ここは暇だ」と伝えています。
• あなたの見た目。あなたのアクセントカラーと角のスタイルで、広告ではなくサイトの一部として見えるように。

避けるべきもの：オークションサイト全体のiframe（スクロールバーが2本、ヘッダーが2つ、スマートフォンで崩れるレイアウト）、撮った日に古くなるスクリーンショット、価格を見るために訪問者にあなたのサイトでログインを求めるもの。

2つの方法

スクリプト。ブロックを描き、最新に保つ<script>の1行です。これが普通の方法で、サイト作成ツールに「カスタムコード」「HTMLを埋め込む」「コードブロック」を追加する機能があればどこでも動きます。訪問者に代わってCookieを設定したり、フォントやトラッカーを読み込んだりしないものであるべきです。検討するどのウィジェットにもこれを求めてください。それをカバーしなければならないのはあなたのプライバシーポリシーだからです。

リンク付きのライブ画像。スクリプトを受け付けない場所もあります。メールの署名、メールマガジンの作成ツール、一部のサイト作成ツールの無料プラン、イントラネット。そこでは、サーバー側で数分ごとに描き直され、オークションへのリンクで包まれた画像が役目の大半を果たします。開催中のロット数と入札の終了時期を示し、何週間も前に送ったページやメールの中でも最新のままです。

コードの1行

Auctifyで作られたオークションサイトなら、無料のAuctionAmigoウィジェットは1行です。

<script async src="https://auctionamigo.com/w.js"
  data-site="your-sale.myauctify.com" data-shape="horizontal"
  data-colour="#ffd23f" data-corners="8" data-background="light"></script>

your-sale.myauctify.comをあなたのオークションサイトのアドレスに置き換えてください。https://はあってもなくてもかまいません。独自ドメインでも同じように動きます。このサイトのホームページにあるデザインツールが、あなたの色と形を入れた1行を書き出し、コピーする前に結果を見せてくれます。属性は次のとおりです。

2分ごとに更新され、Cookieは設定せず、何も保存せず、フォントもトラッカーも読み込みません。自分のシャドウルートの中に描画するので、あなたのスタイルとウィジェットのスタイルは互いに干渉しません。サイトに開催中も近日開催もないときは何も描画しません。入札はオークションサイトで行われ、ウィジェットの中で行われることは決してありません。

どの形を、ページのどこに

まずは3か所ではなく1か所から。ほとんどの訪問者が見るのはホームページの最初の画面の下で、すべてのページに出るフローティングウィジェットがその次です。ロット数はスペースに収まる数に。狭いサイドバーには12より3のほうが見栄えがします。

どこに貼るか、ツールごとに

どのサイト作成ツールにも外部のコードを入れる欄がありますが、名前はまちまちです。以下のメニュー名は執筆時点で各ツールが使っているもので、デザイン変更で場所が変わるので、見つからなければツールのヘルプで「埋め込みコード」「カスタムコード」を検索してください。機能がプランに依存する場合はそう書いています。決めつける前にご自身のプランを確認してください。

1. WordPress

   ブロックエディターで、表示したいページにカスタムHTMLブロックを置き、1行を貼り付けます。サイドバーならウィジェットエリアに。この点とプラグインの問題を扱ったWordPressサイトでオークションを運営するための別のガイドがあります。

2. Wix

   エディターでパーツを追加 → コードを埋め込む → HTMLを埋め込む。要素に1行を貼り付け、サイズを調整します。Wixは埋め込みコードを独自のフレーム内で実行するので、インラインの形（横長、縦長、スカイスクレイパー）を選び、要素をその形に必要な大きさにしてください。フローティングウィジェットはそのフレームから出られません。サイト全体のコードは設定 → カスタムコードに入れますが、Wixではドメインを接続した有料プランで提供されています。

3. Squarespace

   ロットを表示したい場所にコードブロックを追加し、1行を貼り付けます。Squarespaceがコードブロック内のスクリプトを実行するのはビジネスプラン以上で、パーソナルプランではコードブロックはHTMLだけを表示し、スクリプトは何もしません。すべてのページに一度に入れるなら設定 → 詳細設定 → コードインジェクション → フッターで、プランの条件は同じです。

4. Jimdo

   Jimdoクリエイター：ウィジェット / HTML要素に1行を貼り付けます。Jimdoの新しいエディターでは、有料プランにHTML要素があります。インラインの形を選び、要素に余裕を持たせてください。

5. Webflow

   Embed要素をページにドラッグし、その中に1行を貼り付けます。サイト全体のコードはSite settings → Custom code → Footer codeに入れますが、公開には有料のサイトプランが必要です。

6. Shopify

   オンラインストア → テーマ → カスタマイズで、ロットを表示したいセクションにカスタムLiquidブロック（テーマによってはカスタムHTML）を追加し、1行を貼り付けます。ウィジェットはオークションサイトへリンクするだけで、ショップのカートには何も追加しません。

7. WeeblyとGoogle Sites

   Weebly：埋め込みコード要素。Google Sites：挿入 → 埋め込む → 埋め込みコード。どちらもコードを独自のフレーム内で実行するので、インラインの形を使い、要素をそれに合わせた大きさにしてください。

8. プレーンなHTML、または開発者に頼む場合

   ブロックを表示したい場所に1行を貼り付けるか、フローティングの形なら</body>の直前に。data-targetを使えば、タグは1か所に置いたまま、セレクターで指定した任意の要素にウィジェットを描画できます。

スクリプトが使えない場所

メールの署名、メールマガジンのツール、一部のサイト作成ツールの無料プラン、ほとんどのイントラネットはスクリプトを取り除きます。そこではライブ画像を使ってください。開催中のロット数と入札の終了時期を示す、サーバー側で数分ごとに描かれるバナーを、オークションへのリンクで包んだものです。HTMLでは<img>を<a>で囲み、メールマガジンのツールでは「画像を追加してリンクを設定」です。画像は描き直されるので、2週間前に送ったメールでも現在の数が表示され、オークションが終われば、古い情報ではなく、オークションサイトへの訪問を促すだけの画像になります。

ライブ画像にできないこと：個々のロットを価格付きで見せること、カウントダウンすること。これは第一の選択肢ではなく代替手段で、スクリプトを動かせるウェブページよりも、メールにこそふさわしいものです。

動作を確認する

スマートフォンとパソコンで、ページをプライベートブラウジングのウィンドウで開いてください。1〜2秒以内にロットが見えるはずです。何も表示されない場合、原因は3つのうちのどれかです。ウィジェットはどの場合も意図的に黙っています。訪問者がエラーを目にすることが決してないようにするためです。

• オークションサイトに開催中も近日開催もない。ロットを出品するか、入札が本当に始まっているかを確認してください。
• オークションサイトが非公開モードになっているので、何も公開されていない。非公開のサイトはどこにも表示できません。
• アドレスが間違っているか、サイト作成ツールがコードに与えた要素が小さすぎて描画できない。data-siteのつづりを確認し、それから要素を大きくしてください。

次に、オークションサイトで入札があってから2分待ち、あなたのページの価格が動いたことを確認してください。それ以降、手入れするものは何もありません。オークションが終わればブロックは自分で消え、次のオークションはそのロットが出品されると現れます。

よくある質問