BASE商品をブログに埋め込みたい

 BASEの商品を他のサイトに埋め込みたい

無料でネットショップが持てるBASEですが、BASEショップの商品をブログなどで紹介して販売へつなげたいと思う方も多いと思います。

今回は、BASEショップの商品をwixやアメブロ、amebaowndなどへ埋め込む方法をご紹介します。

商品を埋め込むためのコードを取得

BASEの商品を埋め込む方法として以前は、各商品ページに埋め込みコードを発行する機能がありましたが現在はなくなっています。

それではどうするかというと自分でコードを作成します。

埋め込み用の雛形コードを保存

商品ページのURLを変更する事で汎用的に利用できるので下記のコードを保存しておいてください。

スマホ表示の事を考えて横幅220か380を選択するのが良いと思います。
ここでは380サイズにします。

BASEの商品ページのURLをコピー

BASEの商品ページを開いて、アドレスバーのURLをコピー

BASE商品の埋め込みコードを生成

先ほどの汎用コードの【商品詳細ページのURL】を上記でコピーしたURLに置き換える。

これで埋め込み用のコードが完成しました。

この埋め込み用コードを各サイトへ設定していきます。

wixにBASE商品を埋め込みたい

wixにウィジェットを追加

wixエディタの編集画面でBASE商品を埋め込みたい場所に以下の方法でウィジェットを追加します。

「追加」　→　「埋め込み」　→　「ウィジェットの埋め込み」

追加したwixウィジェットに埋め込みコードを設定

amebaowndにBASE商品を埋め込みたい

amebaowndのBASE連携では制限がある

amebaowndではBASEとの連携機能が用意されており、amebaownd内でショップページを作成する事ができます。

ただこの機能だと必要最低限の販売機能しかないため、デジタルコンテンツ販売ができないや、商品オプション機能がないなどの制約があります。

またomebaowndから商品登録したものはBASEにも登録されますが、BASEから登録したものはamebaowndには登録されないというシステムなのでBASE連携では実現できないことも多いのです。

ここでは連携機能ではなく、BASEの商品をamebaowndに埋め込みたい場合の方法を説明します。

amebaowndにブロックを追加

amebaowndの編集画面でBASE商品を埋め込みたい場所に左側にある「html」ブロックを追加します。

amebaowndのhtmlブロックに埋め込みコードを設定

さきほど、生成したBASE商品の埋め込みコードをamebaowndのhtmlブロックに設定し「OK」をクリック。

完成です！

アメブロにBASE商品を埋め込みたい

アメブロにもBASE商品を埋め込みたいという場合、残念ながら「iflame」タグの使用が禁止されているので、先ほど生成したコードは利用できません。

ただしアメブロには「リンクカード」が用意されているのでリンクカードを利用します。

やり方は、アメブロの編集画面（通常表示）でBASEの商品ページのURLを貼り付けるだけです。

簡単ですね！

その他のブログなどにBASE商品を埋め込みたい

htmlで編集投稿できるものなら、html編集モードにし、先ほど生成したBASE商品埋め込みコードを記述するだけでできます。