Hennessy Artistry 2013

This is an ticket distributing app.

1. User A joined the game
2. invite 2 of his friends, like and join the game within 30 min
3. they got total of 3 tickets.

Simple yet complex workflow. Looks simple, but there are:

• 10 groups within one day only
• 20 days, user cannot take 2 tickets
• expiration after 30 mins to “re-open” the table for others
• The presentation of inviter and invitee are different

The last point cause us under estimated the project quite a bit. We do not expect testing such interactions between users can be so complex to test. Other than that, a few technical issues to highlight:

DNS issue

We found page loading time is very long, around 5s to load a page, or switching language, even on AJAX request cases. We understand that we do lots of facebook data exchange like user info, signed request, access token, extended access token, so some loading time is understandable, but 5s loading time is still too much. So we quickly start basic performance tuning on the server. The server is using Redhat, so we plug easy fix like APC, mysqltuner.pl, reduced 5ms, great.

The application do lots of slot, seats, tables counting, so we dig into mysql tuning. index already in, so we increase innodb cache, jump table cache size etc.. No luck.

Then we found that our dev environment is serving pages under 1 second, which pointing to network issue. But direct links like images are working fine, super fast. So lets ping facebook.com: 200ms, which seems normal to me. graph.facebook.com? 200ms. Wait a minute, my local is having 2.8ms ping?

So I just hardcoded /etc/hosts:
31.13.68.49 graph.facebook.com www.facebook.com

BLOOM! reduced from 5s to 1s.

Facebook notification api

https://developers.facebook.com/docs/games/notifications/ seems simple thing. You POST to an url with user’s access token, JSON returning result, nice and easy. You generate your app access token, save it in code, reuse it every time.

Post to their wall, extended access token

Traditionally, Facebook provides a share dialog: https://developers.facebook.com/docs/reference/dialogs/feed/. That covers some use case, but:
Thumbnail will be small square 75x75
That is an user action
So facebook provides another permission called “publish_actions” and you can use api to post to user’s wall given that the user granted such actions. API ref: https://developers.facebook.com/docs/reference/api/post/ example: https://developers.facebook.com/docs/php/howto/postwithgraphapi/

Beware that you need to use individual user’s access token, and access token is subject to expire, the default token expire very soon, or as long as user logouts. You can use setExtendedAccessToken() https://developers.facebook.com/docs/reference/php/facebook-setExtendedA... to get a roughly 2 month token, so you will want to store this unknown length token with the user’s information.

About apprequest

Screenshot: https://developers.facebook.com/docs/reference/dialogs/requests/ is a popup where facebook list user’s friends and “invite” them to join. Please note one important concept here: Facebook is sharing an app instead of sharing a page. The user being invited via apprequest will have an invitation in their notification center, and click on it will redirect him to app’s page, not a fan page. And this URL is not customizable. This important properties of apprequest introduce another need redirecting users from app page to fan page.

So there is an un-documented fb_source=notification in URL parameters on app page if user’s referral is notification center, so developers may use window.top.location.href to redirect user from iframe back to fan page. What a mess.

Facebook tab + mobile

Last, Facebook tabs are not visible on facebook mobile fan page. Facebook do provide a “mobile URL” that you can fill in, but up until now, I still do not see how that URL will be used. But we do have a mobile page, so marketers can use 2 URLs for different device.

我們Document On Ready為 Audi 發佈了 https://www.facebook.com/AudiHK/app_137123389829201 已經一般時間了
這是一個 facebook tab 內的遊戲
目的在於介紹他們的新車

Document On Ready have launched https://www.facebook.com/AudiHK/app_137123389829201 for a while now
A facebook iframe app, which is not exactly a site building project we usually do
Aiming to promote their new car

我們主要負責技術開發的部份
和其他網頁設計師合作，一邊試驗 iframe 遊戲的限制
一邊將可玩性推到極限
一邊絞盡 facebook 的爛文檔
一邊為順暢的使用者登入體驗修正
當然也有為神聖的 IE 專門調敎一番

We mainly focus on the technical development
Working with other web designers, reaching the limits of iframe games
While pushing the gamify element
Crunching facebook's rotted developer docs
While smoothing user's login experience
And last of course, the holy IE special force comes in

正式進軍「Campaign」，「banners」一類時間性更強的巿場
And we officially joined the "Campaign", "banners" market