ホーム>コンテンツ

Square オンラインビジネスで埋め込みコードを使い外部コンテンツおよびウィジェットを追加する

[埋め込みコード] のセクションを使用すると、さまざまな追加機能をオンラインサイトに追加できます。数回のクリックでカスタムの連絡先フォームを作成できるほか、イベントの登録や予約サービスを追加したりGoogleカレンダーを表示することもできます。

この記事では、Google AnalyticsやFacebookなどではなく、イベントカレンダーや Google mapを埋め込む方法について説明しています。ヘッダーコードの使用法についての詳細はこちらのこちらの記事をご覧ください。

設定方法はとても簡単です。

  1. 外部サイトから埋め込み可能なコードを取得のうえ、クリップボードまたはプレーンテキストファイルにコピーします。
  2. ウェブサイトの標準ページに埋め込みコードセクションを追加します。
  3. 外部サイトのコードを[埋め込みコード]セクションに貼り付け、外観を好みに合わせてカスタマイズします。
  4. ウェブサイトを公開してサイト訪問者が新規セクションを確認できるようにします。

sos-embed-code-section-jp

サイトエディタにアクセスし、コードを埋め込むページを選択してから、左側にある [セクションを追加] をクリックします。リスト内の [埋め込みコード] セクションをクリックしてから、右上の [追加] ボタンをクリックしてそのページの上に配置します。

sos-embed-code-section-added-new-JP

画面左の [埋め込みコード] をクリックしてコードを追加し、セクションの外観をカスタマイズします。

画面左の設定を利用してをクリックして外部サイトのコードを追加し、セクションの外観をカスタマイズします。

[コンテンツ] では以下のオプションを利用可能です。

タイトル - タイトルテキストのフォント設定、サイズ、色を変更します。切替スイッチでタイトルをオフにして、セクションに表示させないようにすることもできます。
説明 - タイトル下部の説明テキストのフォント設定、サイズ、色を変更します。こちらも必要がなければオフに切り替えます。
埋め込みコード - ここに外部サイトのコードを貼り付けて、ページのセクションに追加します。

[カスタマイズ] では以下のオプションを利用可能です。

レイアウト - 埋め込みコードに使用できるレイアウトは複数あります。どれを選ぶかは、追加する内容や必要なスペースによって異なります。上のテキストを含むレイアウトでは埋め込み商品のスペースが広くなりますが、右側のテキストを含むレイアウトでは狭い領域になります。これは後で変更できるので、どれを選択すればよいかわからない場合は、現時点で最適そうなものをクリックしてください。
セクションスタイル - セクションの配置(左や中央)を変更し、背景色や画像を設定します。

ep-embed-code-iframe

[埋め込みコード] セクションを使用してページに Googleカレンダー を追加する例を示します。Googleはiframeと呼ばれる技術を使用して埋め込み可能なコードを自動的に生成し、直接リンクを介してカレンダーを表示します。これは外部のコードをウェブサイトに埋め込む際に使用する非常に一般的な方法ですが、他のほとんどの方法も大体同じように機能します。必要な作業は外部のサイトからコードをコピーして、[埋め込みコード] に貼り付けるだけです。

重要:無効なコードや不完全なコードを貼り付けると、ウェブサイトに問題が発生するおそれがあります。レンダリングされたコードが表示されない場合や、何か問題が見受けられる場合は、埋め込みコードフィールドに完全なコードがすべて含まれていることを再度ご確認ください。ウェブサイトを公開して、追加したコードが想定どおりに機能するかどうかも併せてご確認ください。たとえば、コード全体を貼り付けなかったり、誤って余分な文字を挿入したりすると、予期しない結果が発生する可能性があります。それでも原因がわからない場合は、ページから埋め込みコードセクションを削除して、もう一度公開してみてください。セクションを削除すると問題が解決する場合は、コードプロバイダーにお問い合わせの上、セクションの正しい使用方法をご確認ください。

埋め込みコードの使用から発生する問題については、外部連携を含む幅広い用途と潜在的な問題が絡んでいるため、詳細なトラブルシューティングはSquareより提供することができません。