今回は、Facebook,Twitter,mixiといったソーシャル・ネットワーク・サービスに対し「いいね」よりもっと具体的な「欲しい」「もってる」「おすすめ」といったワードで商品の拡散ができる便利なソーシャルボタンの設置方法を説明します。

こちらはECサイトのデザイン編集初心者でも簡単にソーシャルボタンを導入できる詳細版MakeShop編となります。
HTMLタグなどの編集に慣れている方は、最速1分でソーシャルボタンを導入可能な[nanapi:41983]をご覧下さい。

手順

  • 1章 ソーシャルボタンを設置する[ 8 steps ]
  • 2章 ソーシャルボタンの動作を確認する[ 6 steps ]

1章 ソーシャルボタンを設置する

STEP1: MakeShop管理画面にログインします

まずは、MakeShopにログインして下さい。[赤枠1]

MakeShopはこちら : https://www.makeshop.jp/main/login/index.html

※MakeShopアカウントに関しては、GMOメイクショップ株式会社までお問い合わせ下さい。

STEP2: 独自デザインを開きます

ログイン後、管理画面ヘッダーの独自デザインをクリックして下さい。[赤枠2]

STEP3: 商品詳細画面管理を開きます

ヘッダーの内部ページデザインにマウスを移動すると、詳細メニューが表示されます。そのメニュー内の商品詳細画面管理をクリックします。[赤枠3]

STEP4: 商品詳細ページを選択します

編集するカテゴリーと、デザインを選択して下さい。[赤枠4]

今回は例として、全ての商品ページの一般ショップデザインを選択しますが、実際にはソーシャルボタンを配置したい任意のページ、デザインを選択して下さい。

STEP5: HTMLが表示されたことを確認します

編集するカテゴリーを選択すると現在適用中のHTMLが表示されます。[赤枠5]

※編集ボタンの機能等は、こちらのMakeShopのマニュアルをご確認下さい。

STEP6: 表示されたHTML内にソーシャルボタンタグを挿入します

下記のソーシャルボタン設置用のタグをソーシャルボタンを表示させたい場所にコピー&ペーストします。[赤枠6]

ソーシャルボタン設置用のタグーーーーーーーーーーーーーー

i.ntere.st

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

コピー&ペーストする際に改行などが入らないように気をつけて下さい。また、スペースなど必要な部分の削除も行わないで下さい。

今回は、ソーシャルボタンを個別商品写真の横に並んでいるお気に入りボタンの下に表示させたいので、HTML内にある[WISHLST]タグがある行のすぐ後にソーシャルボタン設置用のタグをコピー&ペーストします。[緑枠※]が[WISHLIST]タグです。

※お気に入りボタンの配置は初期デザインのものとなります。

上記[赤枠6]にソーシャルボタン設置用タグをコピー&ペーストするとショップではそれに対応し商品詳細ページの下記画像[赤枠※]部分にソーシャルボタンが表示されます。

※[WISHLIST]の場所

今回使った初期のデザインでは空行も含めて上から36行目に[WISHLIST]があります[黄色部分]。お使いのデザインにより、場所が変わりますので、その点ご了承下さい。

STEP7: 変更を適用します

ソーシャルボタン設置用タグを挿入後、適用ボタンをクリックし変更を適用します。[赤枠7]

適用を確認するダイアログが表示されますので、確認し問題がなければ同意して下さい。

STEP8: ソーシャルボタンを確認します

適用の完了後、ソーシャルボタンの確認のためショップを見るをクリックしショップを開いて下さい。[赤枠8]

「プレビュー」と、「適用してショップをみる」からでは正常にボタンが表示されないため、一度適用しその後ショップを見るからご確認下さい。

今回はSTEP4での設定から、全ての商品の詳細画面にソーシャルボタンを設置したので、画像のように任意のカテゴリーを選択[赤枠9]した後に、個別の商品画像[赤枠10]をクリックし商品の詳細画面を開きます。

設置した場所にボタンが表示されているかを確認して下さい。今回は[赤枠※]の部分に表示するように設置し、確認できました。

2章 ソーシャルボタンの動作を確認します

次にボタンの動作を確認していきます。

STEP1: 設置したいずれかのボタンをクリックします

欲しい、もってる、おすすめのいずれかのボタンをクリックしてください。[赤枠1]

STEP2: ログインするSNSを選択します

初めてのクリックの場合にはFacebook, twitter, mixiのアカウントを利用してi.ntere.stにログインが必要となりますので、いずれかへのログインをうながされます。[赤枠2]からSNSを選択してください。

ログインは各SNSサービスのダイアログに従って下さい。

各SNSのアカウントに関しては、それぞれの運営までお問い合わせ下さい。

STEP3: ソーシャルボタンの使い方の表示を確認します

ログイン後、ソーシャルボタンの使用方法が表示されます。正常に表示されるかご確認下さい。

STEP4: 閉じるボタンをクリックし、説明を閉じます

説明が正常に表示されていることを確認した後、左下の閉じるから説明のウィンドウを閉じます。[赤枠4]

STEP5: もう一度ソーシャルボタンを押します

もう一度、ソーシャルボタンをクリックします。[赤枠5]

STEP6: ソーシャルボタンの色反転とクリック数表示を確認します

クリック後、クリックしたボタンの色反転と、数字の変化を確認して下さい。[赤枠6]

ここまで正常に確認できれば、ボタンは正常に動いています。何か不具合などがあった場合は、info[アット]tattva.jpまでお問い合わせください。

以上でECサイトにソーシャルボタンを導入する方法【MakeShop編】は終了です。

レポート機能

ソーシャルボタンのクリック数などのレポートが必要な場合は、システムを提供している株式会社tattva[info アット tattva.jp]までお問い合わせ下さい。