Outside-the-Box Pizza, Part 4: Social Integration with Twitter

In this series, we’re looking at Outside-the-Box Pizza, a web-mobile-social-cloud demo, from a variety of perspectives that include design, technologies, and techniques. The online demo is at http://outsidetheboxpizza.com. Here in Part 4, we’ll be looking at the social experience which in this app revolves around the use of Twitter.  We’ll look at three things:

• Social Media Strategy
• Gamification in the Online Experience
• Twitter Integration with @Anywhere

Social Media Strategy: “Pizza as Individual as You Are”

Outside-the-Box Pizza knows the power of the mobile and social phenomenon, and has crafted their company around appealing to the young, hip crowd who live the digital lifestyle. From Day 1, their strategy has been emphasizing the uniqueness and creativity of individuals. That’s why they have the name they do, and it’s why they provide some very unusual pizza toppings (like elk and mashed potato), shapes (square, heart), and sauces (BBQ, chocolate). This fits very well with today’s ever-growing mobile-and-social communities. Their tag line is, “Pizza as individual as you are”.

Outside-the-Box Pizza is savvy about modern online marketing and is very much aware of the important role social media plays in keeping an ongoing relationship with new and existing customers (see Flip the Funnel by Joseph Jaffe for more on that).

There are many ways to integrate with social networks: you can view/search content, post content, and allow sign-in with social identities. There are also many social networks to choose from. Outside-the-Box Pizza has chosen to focus their efforts around Twitter, where clients will tweet about unusual pizzas. Outside-the-Box Pizza will tweet as well.

Gamification in the Online Experience

Outside-the-Box Pizza is also very aware of the gamification phenomenon, in which adding a fun, compelling, and competitive element to an experience builds customer loyalty and increases return visits.

When a customer orders a unique pizza, Outside-the-Box Pizza wants them to tweet about it. On the Tweetza Pizza page, clients can see the twitter feed for #outsideboxpizza and, if they wish, sign in with a Twitter id and add their own tweets. Of course, they can also do this directly via Twitter itself, but there’s value in integrating it with the application. 

It isn’t necessary for users to identify themselves to view the Twitter feed, but in order to send tweets they do need to sign in. Clicking on the Connect with Twitter button brings up a Twitter sign-in dialog.

To promote the most interesting pizzas, Outside-the-Box Pizza has a section of the site called Cool Pizzas which is manually curated by an editor.

Twitter Integration with Twitter @Anywhere

Social network integration is possible from the front-end or the back-end of a web application. In this case, Outside-the-Box Pizza uses front-end integration. That is, all of the integration work is being done in the HTML/JavaScript layer that runs in the web browser. Twitter provides an easy-to-use API for this named @Anywhere.

The first step in using @Anywhere is to register an application. In doing this you’ll identify the ultimate deployment URL of your application and receive both a consumer key and a consumer secret which will be used to positively identify your application as legitimate.

In the web application, we load the Twitter @Anywhere JavaScript library with a script line like this in the section of the web site.

<script src="http://platform.twitter.com/anywhere.js?id=yxWqT5gTZ4pfhw&v=1" type="text/javascript">script>

The result of this is that we’ll have a JavaScript object named twttr that we can reference for various behaviors.

Connect Button

To add a Connect to Twitter button to the site, we turn a placeholder div into a live sign-in interface using this invocation on the twttr object:

<script>

    twttr.anywhere(function (T) {

        T("#login").connectButton({ size: "medium" });

    });

script>

Tweet Box

To put up a tweet box, we invoke it this way. This pre-loads the tweet box with the hashtag “#outsideboxpizza”.

twttr.anywhere(function (T) {

    var width = document.getElementById('logo').offsetWidth - 20;

    T("#tbox").tweetBox(

    {

        height: 60,

        width: width,

        defaultContent: "#outsideboxpizza "

    });

});

Twitter Feed

Although we can also use the twttr object to get the Twitter feed for our hashtag, we chose here to use jTweetsAnywhere jQuery library which encapsulates the logic and nicely formats the display for us. After loading its JavaScript and CSS scripts, this code gives us our feed:

    $('#tweetFeed').jTweetsAnywhere({

        searchParams: 'q=outsideboxpizza',

        count: 5,

        showTweetFeed: {

            showProfileImages: true,

            showUserScreenNames: true,

            showUserFullNames: true,

            showActionReply: true,

            showActionRetweet: true,

            showActionFavorite: true,

            autorefresh: {

                mode: 'auto-insert',

                interval: 30

            }

        },

        showTweetBox: false

    });

Summary

Social integration is a key concern for modern web software. Outside-the-Box Pizza focuses on Twitter integration in the front end, using the Twitter @Anywhere API. The result is an ongoing social touchpoint with customers. Through the use of gamification, what might be viewed as a commodity, pizza, has been made into a fun, creative experience that consumers want to brag about over Twitter.

Next: Part 5: Hosting The Front End in the Cloud