自サイト上でのいいね！でクーポン即発行 SmartPopupBox
スポンサーリンク
SmartPopupBoxは、「いいね！してくれるとクーポンプレゼント」タブ＆ポップアップを簡単に自サイトに設置できる、スクリプト設置型のプラグインです。スマートフォン対応。
2015/5/4更新：SmartPopupBoxの開発スタッフにより、新たなzotaboxというサービスが開始され（いいね！でクーポン機能はプレミアム機能）、これまでのSmartPopupBoxのトップページが見られなくなりました。ただ、SmartPopupBoxの新規登録は↑のリンクから可能です。
画面のはじっこに「クーポンを獲得」タブを見せて、タブをクリックすると以下のような画面を見せて「いいね！」を促します。
まだスタートアップの段階のサービスなのか、2ヶ月位前に見つけた時はうまく動かなかったのですが、久々に試してみたらばっちり直って動きました。
よくある欧米のプラグイン（MailChimpとかYotpoとか）のように、上級機能などは有料になるなどのプランが今後出てくるかもですね。
Welcartにクーポンを設置するカスタマイズ（記事はこちら）と合わせれば、がっちり販促出来そうです。
もくじ
1. SmartPopupBoxに登録
登録は至って簡単。トップページのGet Started For Freeをクリック。
新規に名前やメールアドレスを入れて登録してもいいですし、FacebookかGoogleアカウントで登録も可能です。
以上で完了。その後に会社名などを入れたりと面倒臭い登録はありません。
2. 手順に従ってクーポン作成
後は手順に従って、クーポンを作成するだけです。メニューは至ってシンプル。設定項目も多くないので、適当にやっても大体出来るでしょう！
Your Coupons （クーポン作成）
最初はクーポン作成。
画面右入力フォームに、ちょいちょいっとクーポン情報を入力。右上のSaveで保存です。
クーポンは複数作成することが出来ます。クーポン開始日やアクティブ・非アクティブを駆使すれば、使われたクーポンの効果の測定にも役立つかも。
ワンタイムクーポンは、Welcartでのカスタマイズで私はそこまで出来ていませんので（データベースが大変なことになりそう？）、とりあえず一つのクーポンコードで対応。
Social Accounts（SNS設定）
ここでは、自社のFacebookやTwitterアカウントを登録。
登録されたSNSを通じて、「いいね！」されたりツイートされたりした時に、クーポンが発行される仕組みです。ここを飛ばすと、閲覧者は何も出来ませんので、設定必須です。
Popup and Tab（ポップアップとタブ）
ここではタブの見た目と、ポップアップ時のテキストを編集することが出来ます。
左側はタブの色と表示位置、右はポップアップ時のテキストを入れておくところです。こちらは動作確認しながらでも大丈夫です。
テキストは標準では英語なので、例えば「Get a coupon」を「クーポンをゲットする」と、全て日本語を入れておきましょう。
右下の「Coupon Tooltip」は、「いいね、ツイートすればクーポンコードを取得できます。既にいいね！をして下さっている場合には、一度いいね！をキャンセルしてから、もう一度いいね！をして下さい」という説明部分です。
Embedded Code（埋め込みコード）
ここまで来たら、あとはコードを埋め込むだけ。
サイトの</body>の直前に、表示されたコードをコピペしておけばOK。
WordPressなら、aタグだけをテーマに書き込み、スクリプト部分は別に.jsファイルを作っておいて、wp_enqueue_scriptを使ってfunctions.phpで読み込めばよりベターでしょう（ここではその方法は割愛）。
Blocked urls（タブを表示させないURL設定）
フォルダ単位や個別ページでスクリプトを動かさない場合の設定が出来ます。
/*フォルダ単位*/ /account/ /*個別ページ*/ /specific_page.html
WordPressだったら、必要なページだけで読み込まれるように、テーマ内で最初から条件分岐をしておいたほうが、無駄な動作がなくなっていいかも？
3. 動作チェック
コードを埋め込んだところの手順で、設置は完了しています。Localhostでも動くので、コードを設置したら動作確認をしてみましょう。
タブをクリックすると、こんな感じに。あ、真ん中の日本語切れてますね（今気付いた）。
上の画像では「いいね！をしてクーポンをゲットする」という日本語を下のほうに入れてありますが、Twitterのアカウントも設定しているので、ツイートでもクーポンは取得出来るようになっています。
この画面から、いいね！（またはツイート）をすると、クーポン表示で以下の画面。
これでばっちりです。
もし英語の表示が残っていたら、Popup and Tab（ポップアップとタブ）の手順に戻り、表示されているテキストがどこに対応しているか見ながら、日本語に直しておきましょう。
4. まとめ
Facebookアプリの規定はコロコロ変わり、やれ「いいね！」を条件にしたらいいのダメなのとうるさいので、アプリと関係ない外部プラグインで気軽に「いいね！」でクーポンコードを発行出来るのはかなり便利。
まだまだ発展中のサービスではありますが、チェックしておいて損はないかと思います。もちろん過去拙記事の「Welcartでクーポン機能を実装させる方法」も合わせて宜しくどうぞ。
こんにちは、いつも勉強させてもらっております。
このsmartpopupboxの記事を参考に自社サイトでクーポン機能をつけてみたのですが、モニターの解像度？の関係かクーポン表示のポップアップが文字切れなどを起こしてしまいます。
なにかいい解決方法はありませんでしょうか？
どの部分が「文字切れ」なのかが解りかねますが、当記事のように表示される文字数が結果的に少なくなってしまう場合もあるようです。開発者の方ともメールをしたことがありますが、気さくにメールに応じて下さるので、お問い合わせなさってみては如何でしょうか。新しいプラグイン（zotabox）のほうをオススメされるかもしれませんが・・・