Wix・Webflow・Squarespace・Shopifyにリアルタイムの取引成績を埋め込む方法

リアルタイムの取引ウィジェットは、短いHTMLコードにすぎません。どのホームページ作成サービスにも貼れますが、貼り付け用の要素の名前はサービスごとに違い、それぞれに独特のクセがあります。

このページは、手順つきの早見表です。使っているサービスを探し、4つの手順に沿って進め、最後に注意点を1つ確認してください。WordPressについては別のガイドがあります。

📋 貼り付けるコード

コードはShowMyTradesで取得します。口座を連携し（MetaTrader、cTrader、TradeLocker）、公開してから、ダッシュボードでウィジェットを開いてコードをコピーします。すべて無料です。

<iframe
  id="smt-equity-a1b2c3d4e"
  src="https://showmytrades.com/widget/YOUR-ACCOUNT-SLUG?type=equity&theme=light"
  width="100%"
  height="400"
  loading="lazy"
  frameborder="0"
  style="border-radius: 8px; width: 100%;">
</iframe>
<script>
(function() {
  var iframe = document.getElementById('smt-equity-a1b2c3d4e');
  window.addEventListener('message', function(e) {
    if (e.data?.type === 'widget-resize' && e.source === iframe.contentWindow) {
      iframe.height = e.data.height;
    }
  });
})();
</script>

コードは2つの部分からできています。<iframe>がウィジェット本体です。<script>はウィジェットの高さをページに伝える役割で、これがあるとフレームが中身に合わせて伸び縮みします。このスクリプトを実行するサービスとしないサービスがあり、そこが各サービスで押さえておくべきクセです。

コードではなくURLの入力を求めるサービスもあります。その場合はsrc="…"の中のURLだけを使ってください。そのURLがウィジェットそのものです。

🟦 Wix

1. エディターでAdd Elements（要素を追加、「＋」ボタン）をクリックします。
2. Embed Code（埋め込みコード）を選び、続けてEmbed HTML（HTML埋め込み）を選びます。
3. Enter Code（コードを入力）をクリックし、コード全体を貼り付けてUpdate（更新）をクリックします。
4. 要素をドラッグして好きな幅と高さにし、公開します。

注意点：Wixは貼ったコードを独自のフレームで囲み、そのサイズはドラッグで決めた大きさになります。ウィジェット側からはこの外側のフレームを変えられないため、ここではスクリプトが効きません。高さは手動で、ウィジェットに必要な高さより少し大きめに設定し、モバイル表示でも確認してください。高さが固定のウィジェット（統計カード、統計インライン）なら、Wixでもいちばん簡単に収まります。

🟪 Webflow

1. Add（追加）パネルを開き、Code Embed（コード埋め込み）を探します。
2. チャートを表示したい位置までドラッグします。
3. コード全体を貼り付け、Save & Close（保存して閉じる）をクリックします。
4. サイトを公開します。

注意点：Designer（デザイナー）の中ではスクリプトが動かないため、キャンバス上ではウィジェットが途中で切れて見えたり、プレースホルダーが表示されたりします。正しくサイズが変わるのは公開後のサイトなので、そちらで確認してください。Code Embedを使うにはWebflowの有料プランが必要です。

⬛ Squarespace

1. ページを編集し、Add Block（ブロックを追加）をクリックします。
2. Code（コード）を選びます。
3. 種類がHTMLになっていること、Display Source（ソースを表示）がオフになっていることを確認し、コード全体を貼り付けます。
4. 保存します。

注意点：ログインして編集している間は、安全のためにSquarespaceがブロックを無効状態で表示することがあります。実際の表示はプライベートウィンドウで公開ページを開いて確認してください。スクリプトやiframeを含むコードブロックは、カスタムコードに対応したプランで使える機能で、いちばん安いプランでは使えません。

🟩 Shopify

1. Online Store → Themes（オンラインストア → テーマ）を開き、Customize（カスタマイズ）をクリックします。
2. チャートを表示したいページのテンプレートを開きます。
3. Add section（セクションを追加）をクリックし、Custom Liquid（カスタムLiquid）を選びます。セクションの中に置く場合は、Add block（ブロックを追加）から選びます。
4. コード全体を貼り付けて保存します。

注意点：Custom Liquidがあるのは現行世代のテーマ（Online Store 2.0）で、現在Shopifyが配布している無料テーマはすべてこれに当たります。古いテーマの場合は、Pages（ページ）でページを編集し、<>ボタンでエディターをHTMLに切り替えてから貼り付けてください。

EAやシグナルを売る商品ページなら、チャートの置き場所を決める前に販売ページでEAのフォワード実績をリアルタイムに見せる方法を読んでおいてください。

🧩 そのほかのサービス

📐 あとで困らないための設定

コードをコピーする前に、ShowMyTradesのウィジェット作成で次の項目を設定しておきます。

🖼️ コードを受け付けないなら画像を使う

コードをまったく貼れない場所もあります。カスタムコードが使えない無料プラン、マーケットプレイスの商品ページ、メールマガジンの配信ツールなどです。どの口座にも11種類の自動更新画像が用意されていて、画像ならどこにでも貼れます。

ウィジェット作成で自動更新画像を選び、種類とテーマ（ライト、ダーク、透明）を決めて、画像のURLをコピーします。ホームページ作成サービスの通常の画像要素で追加し、画像から口座ページへリンクを張ってください。

画像は取引データが変わると自動で描き直されます。ただし操作はできないので、リアルタイムのウィジェットを置けない場所に限って使ってください。

❓ よくある質問

ウィジェットの中にスクロールバーが出ます。なぜですか？

フレームが中身より低く、スクリプトでも高さを調整できなかったためです。Wix、Google Sites、Framerでは、高さを手動で大きめに設定してください。それ以外のサービスでは、<script>の部分まで貼り付けたかを確認してください。

パソコンでは問題ないのに、スマートフォンでは途中で切れます。

幅をピクセル指定でコピーしています。ウィジェット作成に戻って幅を100%にし、コードをコピーし直してください。

1つのページに複数のウィジェットを置けますか？

はい。ウィジェット作成で1つずつコピーしてください。コードごとに固有のidが付いているので、互いに干渉しません。

新しく取引するたびにコードを更新する必要がありますか？

いいえ。ウィジェットはページが読み込まれるたびに、ShowMyTradesからデータを取得します。

ホームページ作成サービスの無料プランでも使えますか？

ウィジェット自体は無料です。コードを貼れるかどうかはサービス次第で、Webflow、Squarespace、Carrdではカスタムコードが有料プラン限定です。その場合は、自動更新画像を使えば無料で載せられます。

これらのサービス向けに、ShowMyTradesのアプリやプラグインはありますか？

ありません。必要もありません。コードを貼ること自体が連携の方法です。

🔗 関連ガイド

• 認証済みの成績をどこにでも埋め込む：すべてのウィジェット、形式、オプション
• WordPressに取引成績を載せる方法：Gutenberg、Elementor、Divi、クラシックエディター
• 運用実績ページの作り方：ウィジェットのまわりに何を載せるか
• フォーラムの署名、メール、チャットに取引成績を載せる：画像形式の詳細

無料で口座を連携し、ウィジェットをコピーして、使っているサービスに貼り付けてください。登録前にコードを見てみたいなら、ウィジェット作成を開き、公開中の口座を1つ選んでみてください。