Feb
12
Posted by: Jens | February 12, 2012 | Leave a Comment
It was time to create a Facebook page for our Faculty. I will basically just give a recollection of my first steps developing on Facebook and what I learned throughout this process. You can see the first results at https://www.facebook.com/ubcgradschool
Given that I am currently developing a separate, fully integrated community site, we will not use Facebook as our main site for student engagement. Instead we will offer it to students to have an easy way to stay up to date with news from the Grad School through the update streams. Later on the community will be integrated with Facebook and function nicely together. Accordingly, students cannot post on the wall, but are allowed to comment on our posts. The page will still be engaging through polls and interaction with students, e.g. through virtual office hours, but we do not intend it to be a replacement for student counselling via phone or email. On Grad School level, in particular with research-based degree programs, most interaction becomes a very personalized experience quickly which with regard to student privacy etc. is not appropriate to discuss in an open medium such as Facebook. Moreover, we operate de-centralized with more than 100 program advisors which means that it would be an organizational challenge to answer specific program questions on a centralized page. Anyway, we decided to try this approach despite the many reports that claim a Facebook page has to be more than a news pushing service. Let’s see how it goes, it seems to work well for colleagues in other faculties such as Science…
I will not focus too much on the content strategy which will be driven by our overall communication strategy, but quickly look at page design and custom pagetabs, esp. a compelling landing page.
Design
The apparent problem is that there are not many design elements that I can control on a Facebook page. It basically comes down to the profile image which can simply be a square logo or use a larger height to become a vertical skyscraper ad. I opted for a slightly larger height to add UBC logo, “UBC Grad School” which is more descriptive than our Faculty name and a custom image. 342px height seemed appropriate to not push the page links too far down. To spice up the page over time my plan is to change the image every month.
Welcome page
This brings me to the question of how to do a custom welcome page. I first investigated apps for this because my assumption was that it is complicated. It turns out that it is very simple to create your own pages. Facebook calls it Canvas page which basically uses an iframe to bring your content into the Facebook wrapper. All you need to do is to host a standard HTML file that outputs your content in the maximum width of 520px and height of 800px (you can change this dynamically to avoid scrollbars, but as a start staying below 800px is way easier) and design it with standard HTML, CSS and Javascript. This actually opens up a lot of possibilities. First of all it offers way more design flexibility. Unfortunately, we are short on design time right now so I had to skip the wow factor of our welcome page and had to make do with my basic CSS skills. However, if you have the skills you are basically free to be creative. One idea I liked was to incorporate the page profile picture into the welcome page so that it extends from left to right. I will have to find the right imagery for that to give it a try. Like most landing pages it should include a strong call to action which in this case is most often to like the page to receive updates. Depending on the university unit, there might be other compelling calls to action. An alumni page could for example have a call to action to put yourself on the alumni world map or for prospective students it could offer customized information by email after signup. To keep it simple as a start I included what benefits liking our page will bring with regard to content in the update stream and I will refine this later. I added a variation of our student profile view (this comes directly out of our CMS and updates every 3 hours with other images) and our other social network links to finish the page.
From an institutional perspective it occurred to me that most UBC pages do not yet have custom welcome pages. In my opinion this is a unique opportunity because an integrated design framework for Facebook pages could be very beneficial for UBC. It would ensure that pages are following branding guidelines, provide support to units who otherwise could not develop such a page, the pages itself could be hosted in the digital asset repository and so on…
Custom pages
It is very common for pages to bring in content from other social networks. Tools like Involver, Social Revitalizer or Tabfusion allow you to incorporate Twitter feeds, other RSS feeds, YouTube, Flickr etc. However, the page owner has to grant rights to the app to access your information including your friends and some personal details. I will have to test how much information actually becomes available this way, but I simply did not like the idea that any company can monitor activity of our page fans and how they engage with our page. After discovering how easy it was to create a canvas page the question really was why I should not build my own app. Nothing easier than that… Inspired by this short tutorial, I decided to start with a YouTube integration to avoid having to upload videos multiple times to YouTube and Facebook video which is not only a nuisance, but screws up the reporting as well. The Zend library seemed a good starting point and within a couple of hours I had completed my code to integrate our YouTube channel completely into our page, including a random featured video out of a shortlist, all our playlists, uploads, favorites and any other channel I want to feature such as the main UBC EDU channel. The social plugins were quickly added, but required some quick fixes to my code to make use of the open graph tags so that titles, links and descriptions for each item were set correctly. Additional advantages are that I not only have full control how the videos are displayed and how the page is designed, but I can add features that other apps might not offer easily. The only thing that I have to finish once I have more time is pagination. The iframe integration allows me to include my own Google Analytics tracking on the page to monitor traffic on this site as part of our overall web statistics. Sweet… I am sure that apps like Involver provide several other features that my own script doesn’t, e.g. better social integration and profiling of users in the backend, but for now the frontend looks equally good and I will improve the rest over time when I learn more about Facebook’s features.
Integration with CMS
The next idea was to include some of the most popular content for prospective students into the page: the academic graduate degree program listing which receives more than 2 million pageviews per year on our website. If you don’t know it yet, I love our CMS (Drupal). I only had to create a new block display of the existing view and then I simply themed the output to fit Facebook’s requirement to be used in the iframe. Voila. You can find a fully functional degree search in our Facebook page plus ajax based filtering and pagination as well as cache management through Drupal. Right now I link to our site for the detailed information about each program, but it will only take a little time to change this to fully incorporate the program content into Facebook, including options to like specific programs, share programs with their friends and much more. Exciting! If you do not want to theme the view yourself, you can use a variety of modules that can apparently expose your entire web content into Facebook. I haven’t tested any of the modules, but it sounds like it could be worth a try.
UBC Facebook app
I have already been working on a content aggregator as part of the Drupal showcase which will go live soon. It is very easy to bring in a variety of content from disparate sources. My first test case was a video aggregator that does not only include videos from YouTube, but any video hosting site that has an API or content feed. The prototype is fully functional which means it will only take some effort to expose the aggregated content in Facebook. Stay tuned for a first app that will bring a variety of cool content directly to UBC pages.
Drawbacks
Pagetabs do not appear in any mobile apps. Hence, all of this will only be applicable to users who browse Facebook through their regular browser.
Comments
You must be logged in to post a comment.