skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

Custom Facebook landing pages

June 7th, 2010 by tamuwebmaster
TAMU Facebook Landing Page

For those not logged into Facebook or not fans of Texas A&M, they get this landing page. It's also the "Howdy" tab for current fans.

If you visit the A&M Facebook page and you’re not already logged in, or if you aren’t already a fan you’ll get a default “landing page” that we’ve developed and put online.

Landing pages are getting more and more use from retailers (Gap, Best Buy, Coke, etc) wanting to make a splash with visitors and get them to “like” their page. You’re also beginning to see this with universities as well. While many are still defaulting to the wall for non-fans, there are some that are beginning to build these splashes.

For us, it’s a mix of trying to get these folks either further into the A&M Facebook page (clicking on the Facebook wall sticker, or the fan photos link) but we also realize that some of these are going to be parents of current/future Aggies or future Aggies. We want to give them a quick and easy way to get to the info they need to help them as they make important decisions. So all of our links across the top jump to pages within the tamu.edu webspace.

Jenni and I must have looked at over 200 different retail and university fan pages and we’ve noticed a lot of retailers are adding video, so we added the video spot in the middle which also highlights our “It’s Time” campaign.

So how’d we do this?

  • FBML. As a page owner it’s as simple as adding the FBML app to your page. From there you can make it a tab or a box. In the “Settings” menu for our page, we set it so that the “Howdy” tab is the default tab for non-fans.
  • Big honkin’ image map. This is where you’ve got to do what you need to do to make it work. Because of the limits of FBML, HTML, and what you can and can’t do within Facebook and certain browsers, I went the image map route. I’ve seen some who use tables to design, and for the Finals one we recently did, some interesting CSS. For right now, the width is 760px wide, but there’s talk of it dropping down to 520px sometime in 2010. Also, all images must be hosted on an external server (not Facebook).
  • Speaking of CSS, the image map is handled by CSS. Facebook won’t let you do regular image maps in HTML, but does let it occur as background images in CSS. Also, Facebook has been off-again/on-again about external CSS file calls, so for us we include it all at the top of the code instead of hoping it will call and use and external CSS file.
  • FB and video. Facebook doesn’t allow/recognize HTML code for SWF files, but it will allow FBML SWF calls. Making this code edition and adding the right thumbnail, plus some absolute positioning (eckkk…) and z-indexing in the CSS gives us the video.

Yes and all of this coded and dumped into a FB box for them to render. With Facebook’s traffic being the way it is, these landing pages are getting to be more common. There are some great resources out there that I’ve used and might make it easier should you try to go this route.

  • The folks over at HyperArts offer several really good posts on customizing Facebook Pages with FBML and embedding YouTube/Flash in Facebook.
  • While image mapping is not the best way to do things, the CSS version really  helped me out a lot. And so does ImageMaps.com. This free online HTML/CSS image generator is full of point-click-and-define goodness.
  • FBML application. The nice thing is that once on your page, you can create as many as you want.
  • A Facebook test Fan page. Go out and set up your own fan page. I use it to build, refine and test out my pages before they ever go up on the public page. Typically I leave it “unpublished” to the world, but it still lets me work on it and view it as if it’s published.
Monday, June 7th, 2010 design, Social Media
Share this article

3 Comments to Custom Facebook landing pages

  1. Looks great, but how is this increasing the effectiveness of our page on Facebook to connect with {future students, former students, donors, future faculty, researchers, etc}?

    What about having a “enter your email address here [ ] to subscribe” box? given your stats that emails drive more response and are still more popular & effective than social media page updates?

    I’d like to see a “Tours” tab. Tours would let visitors take a video tour of the campus, the majors, the programs & departments, the research, the graduate opportunities, the global impact of TAMU, et cetera. Tours!

    Monty

  2. Monty Dickerson on June 7th, 2010
  3. Virtual tours are high on our list for the future. As far as email, I wish we could add a button: “Click here to receive Texas A&M’s undivided attention,” but we’d still have to work out whose attention would be undivided. But generally it’s best to respond to people using their own chosen medium, and many Facebook users prefer communicating through Facebook instead of email.

  4. mdmcginnis on June 7th, 2010
  5. “Also, all images must be hosted on an external server (not Facebook).”

    This actually changed about 3-4 weeks ago, when Facebook realized that background image mapped pictures were vulnerable to privacy violations if on 3rd party sites. They now pull the images onto their own servers, and after a few glitches, work just fine.

  6. Ryan Cohn on June 28th, 2010

Leave a comment

Categories

Archives