nkjmkzk.net

powered by Kazuki Nakajima

Facebookのソーシャル・チャネルを利用した広告アプリをForce.comで構築

私はFacebookが持つ機能の中で、企業活動につなげることができるパワーを次の3つに分類しています。

  • Social Profile(ソーシャル・プロファイル)
  • Social Channel(ソーシャル・チャネル)
  • Engagement

この中のソーシャル・チャネルに注目した広告アプリをForce.com上に構築し、それをひとつのデモにまとめました。ソーシャル・チャネルとは、Facebookの友達間をLikeやComment、Shareといった機能によって情報がねずみ講式に広がっていく伝播を意図しています。

このデモのユースケースは、下記の通りです。

  • 店舗マネージャはあらかじめ商品情報を広告アプリの管理画面から登録しておく。
  • とある小売店に訪れた消費者が商品を購入する際、店員が「もしFacebookでこの商品を購入したことを共有していただいたら10% 割引しますよ」とオファーする。
  • 消費者は自身のスマートフォンを用いて広告アプリのMobile Webサイトにアクセスする。
  • 消費者は自身が購入する商品をタップし、それだけでFacebookへの共有(広告)が完了する。

そのデモがこちらです。

このデモで技術的にキーとなる箇所は下記の2点です。

  • 登録した商品情報から、消費者がスマートフォンでアクセスするMobile WebサイトのHTMLを生成する
  • Mobile WebサイトからFacebookのAPIを呼び出してワンタッチで消費者のFacebook Wallに「この商品を買いました」というエントリーを投稿する

HTMLを生成する部分は、実際にはHeroku上で稼働するPHPアプリケーションがForce.comのREST APIにアクセスし、必要な商品情報を取得、jQuery Mobileでデザインされたレイアウトにその商品情報を並べるという仕組みで実装しています。

Facebookへの連携部分は、Mobile WebサイトでFacebookのJavascript用SDKをインポートし、Facebook Wallへ投稿をおこなうダイアログの表示ファンクションをfbPublishStoryとして下記のように定義しておきます。

<!-- Load facebook sdk -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
        appId      : 'あなたのApp ID', // App ID
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
    });
};

// Load the SDK Asynchronously
(function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/ja_JP/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document)
);

function fbPublishStory(product_name, photo_url, shop_url) {
    discountCode = code;
    FB.ui({
        method: 'feed',
        name: product_name + 'を買いました。',
        link: shop_url,
        picture: photo_url
    }
    return false;
}
</script>

そしてあらかじめ取得しておいた商品情報からリストを作成し、そのリストのonclickイベントに前述のFacebookのダイアログ表示のファンクションを紐付けます。

<div data-role="page" id="page_product_list" data-theme="d">
    <div data-role="header" data-backbtn="false" data-theme="d">
        <h1><?php echo LABEL_PRODUCT_LIST; ?></h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="false" data-filter="true" data-split-icon="gear" id="list_product">
        <?php
        if (is_array($sugoid_product_list['records'])){
            foreach ($sugoid_product_list['records'] as $k => $v){
                ?>
                <li>
                    <a onclick="fbPublishStory(
                                    '<?php echo addslashes($v['Name']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__discount_rate__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__code__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__description__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__photo_url__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__url_to_buy__c']); ?>'
                                );" class="product_button" id="<?php echo $v['Id']; ?>" href="#">
                        <img src=" <?php echo $v['sugoidiscount__photo_url__c']; ?>" />
                        <h3><?php echo htmlspecialchars($v['Name']); ?></h3>
                        <p>通常価格<?php echo $v['sugoidiscount__price__c']; ?>円から<?php echo $v['sugoidiscount__discount_rate__c']; ?>% OFF</p>
                    </a>
                </li>
                <?php
            }
        }
        ?>
        </ul>
    </div>
</div>

このデモのポイントは、下記の通りです。

  • ソーシャル・チャネルで関心度の高い広告を伝播していくことができる(一般的な広告より、知り合いが購入したアイテムというのは関心度が高いと考えられる)
  • コードを書くのはMobile Webサイトだけ。アプリケーションへのサインアップ、ライセンス管理、商品登録、APIといった部分はForce.comが提供するフレームワークをそのまま利用して開発をスキップできる
  • さらに、Mobile WebサイトはHerokuを使うことで無料でスタートできる

最小限の労力でソーシャルパワーを装填したアプリを開発する。そんなデモでした。

without comments

Written by 中嶋 一樹

10月 11th, 2012 at 5:37 pm

Leave a Reply