Bad Dinosaur!

You Should Check This Out

CollegeJobConnect | Better Undergraduate Recruiting

Wednesday, September 22, 2010

Enhance Your Brand: Create a Custom Facebook Page

Edit: I got published ... in Bulgaria! Capital.bg - Kak Da Napravim Fenstranica Vuv Facebook


My startup wanted to add a custom Facebook landing page. Having visitors click through and seeing the standard "Wall" is apparently lame (that is what our undergraduate member tell us). Here is how we implemented a custom Facebook landing page to give a more personalized greeting and to show our company's character (spoiler: we are nerds):
  1. Create a public Facebook page
    (login to Facebook > Ads and Pages > Create Page)

  2. As mentioned, make sure your page is set to "public"
    You want anyone to be able to view your page, regardless if they are logged in to Facebook or not. (Edit Page > Settings)


  3. Add the FBML application so you can create your custom tab
    Via FBML: Add advanced functionality to your Page using the Facebook Static FBML application. This application will add a box to your Page in which you can render HTML or FBML (Facebook Markup Language) for enhanced Page customization.


  4. Create your landing page image.
    Here is what we did: First, we made sure we created a new Adobe Photoshop document that was roughly 520px wide (this is approximately the width you get for your Facebook pages).


    We want fans to get behind what we are doing so we highlighted our request for visitors to "Like" our page (#1). We also wanted to quickly explain what we do (#2). Next was to show our logo (#3). Finally, have a little fun, make it memorable, add a part that can be updated periodically with new content (#4).


    For #1: I took a screenshot of the Facebook Like button (Shift+Cmd+4) and placed the image on a new layer. Then I added a drop shadow. Next, on a new layer, I added text with a Dakota font, linked these two layers, and then using free transform, I rotated both layers.


    For #2: I mostly just followed this tutorial to create the Post-It note, and this tutorial to create the Scotch tape (why a sticky note needs to be held up by tape, you got me).


    For #3: It's our logo, just plug-n-play.


    For #4: I love legos, and wanted something that was funny, but hit on our vision: i.e. help undergrads connect with companies and find jobs. I found a lot of content on Flickr through a Creative Commons search and then just added some text. To get the fade effect, check out this tutorial. We plan to update this with a series of postings, you know, to keep it fresh. If you'd like to contribute, please send submissions to jeff@collegejobconnect.com.


  5. Upload your image to an image hosting service (Picasa, Flickr, etc.).
    I uploaded our completed image to Picasa and then clicked through to get its URL. I copied that URL, which is about to come into play.

  6. Add the image to your FBML custom tab.


    Click "edit" on your FBML application, and add a "Box Title" (title of your page's tab) and add an image tag with the source set to the hosted URL from above. Ex. our title was "Welcome" and our FBML was:

    <img src="http://lh4.ggpht.com/_57TjKlYGT9E/TJktZ1UHO8I/AAAAAAAAASw/5OC_0GT-X8s/cjc-fb-welcome-underlined.png" alt="CollegeJobConnect" />

  7. Finally, make this custom page the default landing page.
    Click to edit your page, then click to edit your Wall settings. For the "Default Landing Tab for Everyone Else" setting, select your newly added FBML tab (it will be the title you just entered)


That is basically it. We've seen a greater "Like" rate from our page's visitors after we added the landing page. You can see our final image here and our Facebook page here (don't forget to "Like" us!). Hope it helps, please email me with any questions, thanks.

5 comments:

Anonymous said...

Are you a designer? Is this achievable for a DIYer?

Jeff said...
This comment has been removed by the author.
Jeff said...

I do do design work, but I definitely believe this is achievable for a DIYer. You can put together a simple landing page if you aren't as familiar with Illustrator or Photoshop, no need for the slanted text, faded images, etc. Really what you want to convey is what your FB page is about, and instruct the visitor to "Like" your page in order to see more information and content.

I recently created another FB landing page that you can view here: http://www.facebook.com/CollegeJobConnect - this is pretty simple, just some desaturated company logos with some big text and instructions to like the page. Let me know if I can help with anything else, thanks!

Nixon said...

Hey Jeff, I suggest that you update the tutorial, since facebook pages don't support tabs anymore. Also in my opinion it would be better to make a video, not a text like it is.

Anonymous said...

Hey Nixon,
In my opinion you should make the video.

Post a Comment

Post a comment ...