EC-CUBE商品ページへのmixiチェックボタン導入方法

      2011/09/06

ECサイト×ソーシャルメディアpart5

ソーシャルプラグイン最終章、本日は、

EC-CUBE商品ページへのmixiチェックボタン導入方法

をご紹介します。

まずは、下の図をご覧下さい。

EC-CUBEへのmixiチェックボタン導入方法

前回までのFacebook、Twitterのボタンは、コードをコピーするだけで対応が出来ましたが、mixiチェックボタンは少々難易度が上がります。

というのも、mixiは識別キーなるものを取得しなければ、動作がしません。識別キーを取得するために、mixi上でデベロッパー登録が必要になります。

    1. デベロッパー登録

まず、こちらからデベロッパー登録を行います。下記に必須事項を記入します。
[mixi] Developer登録_変更※ログインしたmixiアカウントに紐づきます。

    1. チェックキーの発行

mixi Developer Dashboardにアクセスをしトップメニューから「mixi Plugin」左メニューから「新規サービス追加」をクリックします。
[mixi] 登録サービス一覧 | mixiチェック
利用規約を同意のうえ、必要事項を記入します。
[mixi] 新規サービス追加 | mixiチェック
内容を確認し、「作成する」をクリックします。[mixi] 新規サービス追加 | mixiチェック-1登録が完了したら、識別キーは「こちら」をクリックします。[mixi] 新規サービス追加 | mixiチェック-2

    1. mixiチェックボタンのカスタマイズ

対象URLは、ECサイトのドメインを入力。プロフィール画像表示はレイアウトが崩れてしまうので、チェックを外す。最後にタグ取得ボタンを押すと、下図のようにタグが現れます。
[mixi] EC-CUBEテスト | 登録サービス詳細 | mixiチェック

ここで、注意しなくてはいけないのは、商品詳細ページごとに対象URL設定しなければいけません。また、例によって、下記コードをコピーして頂くと上手くいきます。

<iframe scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”overflow:hidden; border:0; width:120px; height:20px” src=”http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2F◯◯◯.◯◯<!–{$smarty.server.REQUEST_URI|escape}–>&service_key=△△△&show_faces=false&width=120″></iframe>

◯◯◯.◯◯はECサイトのドメインを△△△は、識別キーを入れてください。
以上で、mixiチェックボタンの発行は完了です。

EC-CUBE商品ページの編集

最後にEC-CUBEへの導入ですが、Ver2.11.1の管理画面からご紹介します。

デザイン管理>PC>ページ詳細設定>商品詳細ページ>編集

の順に辿って頂くと下図のページに行きますので、上記のコードを該当箇所に貼りつけます。

EC-CUBEページ編集

私が記述した箇所は、179行目のtwitterボタンの記載のある部分のすぐ下です。

これで、Facebook、Twitter、mixiと日本における3大ソーシャルメディアのプラグインの導入が完了致しました。

次回以降も、ECサイトとソーシャルメディアを掘り下げていきたいと思います。

 -EC-CUBE, mixi

  関連記事

no image

EC-CUBEインストール手順(2.12)

先日、EC-CUBE2.11のインストール方法をご紹介しました。 去る2012年5月31日に新バージ

no image

EC-CUBEのバージョンアップ方法って?

先ほどのスマートフォン向けテンプレートの記事を書きながら、ふと思いました。 そういえば、EC-CUB

no image

ECサイトおねだり機能無料サービス

先日、ECサイトの販促支援機能として、おねだり機能についてご紹介しましたが、仕組みはそんなに難しくな

no image

EC-CUBEスマートフォン向けテンプレート搭載!

2011年8月10日、EC-CUBEがスマートフォン向けのテンプレートを強化した新バージョン2.11

no image

ECサイトによるソーシャルプラグイン52%が導入

ウェブモバイル業務専門の人材サービス事業を展開するサポタントは8月10日、ECサイトによるソーシャル

no image

EC-CUBEのデザインテンプレート変更手順

EC-CUBEオーナーズストアを眺めていてデザインテンプレートのカテゴリを発見したので試してみました

no image

EC-CUBEインストール手順(2.11)

国産オープンソースECの代表格EC-CUBE(ECキューブ)のインストール手順をご説明します。 まず

no image

EC-CUBE公式エバンジェリスト制度?

EC-CUBEを開発する株式会社ロックオンがリリースを発表しました。 全国各地で「EC-CUBE」の

no image

mixiページ公開!Facebookページの対抗馬になるか!?

本日2011年8月31日、株式会社ミクシィより「mixiページ」が発表されました。 今までは、コミュ

no image

スマートフォン対応ECサイト構築のために

2011年に入ってからというもの、一気にスマートフォンブームが到来した気がしております。 ECサイト

Logicool Flowが素晴らしすぎる話

数年ぶりにキーボードとマウスを買い替えました。 デバイスが増えてきて、MacとWindowsとタブレ

Benq BL2420PTで突然「シグナルが検出されません」と出たら・・・

BenQ 23.8インチワイド 高解像度モデル (2560×1440/IPSパネル/DisplayP

嫌われる勇気

嫌われる勇気―――自己啓発の源流「アドラー」の教え posted with ヨメレバ 岸見 一郎,古

マンガでやさしくわかるアドラー心理学

マンガでやさしくわかるアドラー心理学[Kindle版] posted with ヨメレバ 岩井俊憲,

1億円の壁を越えるビジネス思考

1億円の壁を越えるビジネス思考: 年商1000万円に満たない会社の売上を数年で10億円にまで成長させ