Drupal Association members fund grants that make connections all over the world.
Fanlala is the leading social entertainment and lifestyle website for tweens and teens featuring original content, personalized music, the latest in entertainment news and cool community features.
Members can play celebrity-related games, create celebrity quizzes, watch safe content featuring Teen Hollywood celebrities, and build profiles around the stars and activities they love. Fanlala provides a safe online community that delivers teen content when and where our members want it.
Previously, Fanlala was developed on the PHP-based social network platform SocialEngine. Fanlala outgrew the capabilities of this platform when additional community features and types of content were desired.
Fanlala extends across a wide variety of content, including original videos, news articles, quizzes, polls, photo galleries and games. Our members want to easily share and interact with the content they love. We require a content management system that allows us to handle a large volume of content, while still being easy to maintain and administer.
After considering alternatives, such as WordPress, or a smaller framework, Drupal was chosen for its focus on content management, a vibrant community, a vast array of contributed modules and powerful extensibility. Fanlala is primarily a content-driven product, making it a perfect fit for Drupal.
While Fanlala was running on Drupal 6 for about four years after the initial migration from SocialEngine, the site was recently upgraded to Drupal 7 to take advantage of all the important API and UX improvements.
Upgrading from Drupal 6 to Drupal 7
In upgrading to Drupal 7, Fanlala needed to shed a lot of the custom code and cruft used in the previous Drupal 6 version. Much of this could now be done with either contrib modules, or directly with the core installation.
It was important for us to support as many of the native core and contrib features as possible, to leverage the work of the Drupal community. Features such as custom entities, database abstraction, Rules, Context and Views were relied upon to rapidly build out the product. As a result, we were able to reduce our reliance on custom code dramatically in the upgrade (about a 25% decrease).
Because of the wide amount of functionality to be created, we used a modified agile approach. Developers met daily and discussed the individual components each were working on, and we met weekly with product stakeholders, designers, and managers to keep everyone informed. Our original timeline for the project was approximately 6 months, but it ended up being extended to 8 months, to accommodate for additional functionality that was desired.
Fanlala features a wide variety of original content. Each content type had to be approached individually, but had to work with each other to provide a similar experience. The complexity was greatly reduced by using Drupal's core entity, bundle and field functionality, supported by a variety of contrib modules.
Clubs act as repositories for content that revolve around stars, movies and TV shows. We decided early on that it would be necessary for each type of content to be grouped into one or more clubs. Drupal's built in taxonomy system allowed us to classify content by one or more terms (clubs). Using the contrib module, Hierarchical Select, members and admins alike could easily sort through the clubs and tag content.
All of Fanlala's originally produced videos are hosted on YouTube. We needed to be able to easily import these videos into a node and add our own descriptions and metadata. The Media module, with the Media: YouTube extension, was a perfect fit, and allows our administrators to post our exclusive videos, as well as allow members to post and tag their own favorite videos.
Quizzes are a popular feature that allow visitors and members to test their knowledge across a wide variety of topics. In the Drupal 6 version of the site, we decided that there were no contrib solutions (including Quiz module) that would completely meet our needs. As a result, we developed a custom module to create a new quiz node type. Using the Form API we were quickly able to create the functionality we needed.
Fanlala features a variety of licensed online games for our members. In order to keep the latest games on our site, we use the Feeds module to import an RSS feed of the latest games and create nodes from them. Feeds, using the contributed XPath parser, makes creating complex mappings to content fields simple.
Because our members are under the age of eighteen, we are extremely concerned with their safety on our website. We require that any content created by our users (quizzes, videos, comments, profile posts, etc) be approved by our team before appearing on the site. To manage this approval process, we use Views and Bulk Operations (VBO) to allow us to publish all the user content on our site. VBO allows us to mass-publish content from a single page.
When migrating to Drupal 7, we also wanted to breathe new life into the overall design of the site, which had been relatively unchanged since its creation. In addition, we wanted to lay the groundwork for a responsive layout, optimized for mobile and tablets, in the future. We decided to use the Zen base theme (version 5.x) because it is a pure HTML5 base theme and supported responsive layouts out of the box. Our administrators do not need the ability to modify the layout or design on the fly, so we didn't want a theme that would add a lot of overhead (both in terms of performance and UI). Zen ended up being the most appropriate choice for us. The CSS was written using SASS, which makes the code extremely manageable and extensible.
To keep our members engaged, we encourage them to perform tasks around the site to earn points (Fan Bucks). These include watching videos, taking quizzes, inviting friends, etc. We use the Bunchball gamification system to track our users points and award them trophies and rewards. The Rules module handles when the Bunchball service is called and points are awarded. Using a custom rule reaction, we can call the Bunchball API and award the correct number of points to our users.
To track the engagement of users on our site, we have a feed that logs when users log in, or post or like content, etc. On the Drupal 6 site, this was powered by the Activity module. The volume of activity we were logging over time was too much for Activity to handle and it started causing database crashes due to slow query times. In the Drupal 7 version of the site, we wanted to fix this and found the excellent entity-based module Message. Using Message, combined with Rules, we were able to quickly create a feed of our members' activity.
Our audience is focused on the tween and teen demographic, so we must be especially careful with the information we collect about our users. In order to comply with the Children's Online Privacy Protection Act (COPPA) we have a custom registration process powered by CTools plugins and the form wizard functionality. These plugins allow for a different registration process, depending on the age of the user. If a user is under 13, we require parents verify their identity using a credit card.
Optionally, members may subscribe to a premium product giving them access to additional features. We evaluated the solutions currently available and ultimately decided that we needed to create our own subscription management module, using entities to store and retrieve the data.
We leveraged Spaces to allow parents to override the permissions of their children. Parents can set whether or not their children have access to various features on the site, such as posting content and comments.
SEO is very important for our site, since it is focused mainly on bringing in new users through organic search traffic from our original content. We used a variety modules to optimize our site, including: Google Analytics, Google News, Metatag, Page Title, Pathauto, Redirect and XML Sitemap.
This site was migrated by a two-developer team, Brian Ropp (bropp) and Joshua Ellinger (westwesterson), with Dave Cooper assisting in testing and facilitating communication with our designer, Casey Tong.