Facebook Platform for Mobile Web apps

hastywittedmarriedInternet and Web Development

Dec 8, 2013 (3 years and 6 months ago)

76 views

Facebook Platform for Mobile Web apps
More than 350 million people access Facebook on their mobile devices. Now with Facebook Platform for Mobile Web apps, these mobile users can
discover and interact with apps and games while on the go. Facebook Platform for Mobile Web apps allow developers to build with HTML5, so people can
enjoy their favorite facebook.com apps and games seamlessly across their desktops, phones, and tablets.
Huffington Post
The Huffington Post is a leading social news and opinion site, and a top destination for people interested in news, blogs and original
content. Huffington Post uses Facebook Social Plugins such as the Like button to create personalized experiences for website visitors.
Now, designing a Mobile Web app with Facebook Platform for Mobile allows them to extend a highly personalized experience to people
wherever they are, as the news is happening.
Partner testimonials
Goals
Help Huffington Post visitors discover and
engage more with the content that’s most
relevant for them. Customize the stories based
on each visitors’ likes on Facebook, their local
geography and the stories their friends like.
Implementation overview
The Huffington Post Mobile Web app was
created as a new project, with a team focused
solely on providing a fully personalized view
of the news. They repurposed their existing
web-oriented infrastructure and got a working
version up and running quickly so they could
begin testing and optimizing its performance.
Because they were working with HTML and
Javascript, they were able to iterate quickly
and often on design and functionality. They
also used jQuery and iScroll to provide a clean,
simple experience on tablets.
Key learnings
▶ Build a custom experience but optimize for all devices
A single HTML5 app will work across devices and
resolutions, so be sure the experience is great for each
one.
▶ Use custom HTML and CSS with libraries like iScroll
This allows for greater control over design and
architecture, which helps elevate the experience from
“website” to “app”.
▶ Use Local Storage for persistent elements
Using Local Storage eliminates the need to execute
lookups each time the user opens a persistent element
such as geographical location. Local Storage could also
be expanded to support offline mode.
Huffington Post
Mobile Web app
Facebook Platform for Mobile Web apps
More than 350 million people access Facebook on their mobile devices. Now with Facebook Platform for Mobile Web apps, these mobile users can
discover and interact with apps and games while on the go. Facebook Platform for Mobile Web apps allow developers to build with HTML5, so people can
enjoy their favorite facebook.com apps and games seamlessly across their desktops, phones, and tablets.
Moblyng
Moblyng develops HTML-based social games for smartphones, tablets and the web. People have downloaded over 10 million Moblyng
apps, including popular game titles like Dungeon Quest, and Cricket Wars. Because Moblyng develops exclusively on HTML5, the social
distribution provided via Facebook Platform for Mobile provided an easy way to ramp up usage quickly.
Goals
Build engaging social games that expand
Moblyng’s existing reach to Facebook mobile
users, and allow them to play anytime,
anywhere with their friends.
Implementation overview
Moblyng wanted to make their Javascript more
flexible and easy to maintain, so they followed
an Model-View-Controller pattern. To enable
native hardware performance for mobile
browsers, they used WebKit CSS extensions for
animations. In terms of design and usability,
the choice was to simplify and emphasize the
social nature of the games. On the backend
they used node.js and php-fpm via nginx, and
for data primarily membase,and mongoDB for
centralized logging.
Key learnings
▶ Speed matters
Limit art and extra screens to speed up game load
time and make entry experience smoother. Reduce
the amount of network requests and run performance
optimization using fiddler regularly.
▶ Incorporate key Facebook social elements
Create more personalized experiences by including
familiar Facebook features (e.g. friends bar,
leaderboard) and displaying social data (like friend’s
names and pictures).
▶ Optimize the social experience
Both your game and relevant social elements should be
fast and smooth. If it’s difficult for people to find their
friends or share your game the overall experience will
suffer.
Partner testimonials
Moblyng
Mobile Web app