Hey there, this site is pretty old now. I've decided to leave it up as I put a lot of work into it and would hate to see it disappear.

Display Tags For 'facebook'

All Facebook Blog

Neal Grosskopf
9/18/2007 12:00:00 AM
A in depth blog regarding the social network Facebook. Worth a read if you are ever bored. Facebook is after all one of the top 20 visited sites on the internet everybody.

Facebook Developer Platform

Neal Grosskopf
1/30/2007 12:00:00 AM
Basically an API for Facebook. I'm not sure if this is even useful or not. It appears to me to be xml files you read and link to on your own personal site.

Facebook Lexicon

Neal Grosskopf
4/15/2008 12:00:00 AM
Facebook Lexicon is a service of Facebook's that tells you how hot keywords are on Facebook's walls. This includes every single user's wall on the site. The link I posted above compares a few people's first names - neal, emily, tyler, chris. Looks like my name isn't very popular on walls.
URL:http://www.facebook.com/lexicon/index.php?q=neal, emily, tyler, chris

Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS

Neal Grosskopf
2/8/2010 10:45:00 PM
Screenshot of the New Facebook home page

New Facebook Home Page

Above is a screenshot of the new Facebook home page. One change on the new page is showing all types of updates rather than just status updates.

Facebook has once again decided to redesign their home page. These types of changes usually result in millions of users joining groups titled "I hate the new design" or something similar. Being a web designer I sympathize with Facebook.

One thing they changed with the recent redesign was removing the "status updates only" option on their home page. I'm now forced to sift through every group, fan page, image and application post my friends have made. Facebook does give me the option to hide specific applications but with 1000's of apps out there, it isn't practical to hide each and every one. Enter Stylish.

Hacking Facebook's CSS

Using a Firefox addon called Stylish I was able to sift through Facebook's HTML & CSS and determine if they did a good job giving their home page elements proper class names and IDs. For whatever reason Facebook uses custom HTML attributes. One of these was called data-ft. The first value in that attribute is a number that represents various home page types. The example below uses "46" which is plan ol' vanilla status updates:

<div class="GenericStory UIStory clearfix aid_718391393" data-ft="{"sty":"46","actrs":"718391393","fbid":"328181226116","s_obj":"11","s_edge":"1","s_prnt":"11"}" id="div_story_1630882208_328181226116"></div>

Show Status Updates Only

By adding the code below into Stylish it will hide ALL types of updates on the Facebook home except for regular status updates:

@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("facebook.com") { .GenericStory { display: none !important; } #pagelet_intentional_stream div[data-ft*='sty":"46'] { display: block !important; } }

Below is an example of this would be entered into Stylish:

Screenshot of Stylish

Other Update Types

You could also substitute the number 46 above with one of the below to show only these types of updates by default:

Attribute Value Table
Update Type Number Value
Fan Page Added 161
Application 237
Friend Added 8
Group Added 21
Photo Added 65
Photo Album Added 247
Video Added 128

To Each His Own

Some people may love seeing everything their friends do on Facebook. I'm more interested in what they have to say and the rest just feels like noise. Feel free to take this code and make it your own.


Emulate Facebook By Preloading Previous & Next Photo Gallery Images

Neal Grosskopf
4/11/2011 8:32:00 AM

I've always looked to Facebook when it comes to adding new features to my own website. I mean, why not? Certainly 500(estimate/exaggeration) developers must be smarter than 1. I also look at it like a learning experience trying to emulate all their awesome features.

I've already emulated their photo tagging functionality so while I was working on that project, I thought, why not steal their image preloading idea as well.

You may have noticed that when browsing photo albums on Facebook, images seem to load super fast when clicking the next/previous buttons or hitting left/right on your keyboard. There's a reason for this. Facebook is preloading the previous and next image.

Firebug's Net Panel

Firebug's Net Panel

Using Firebug's net panel you can see how each time I hit next, Facebook loads one image ahead and one image back. That means I always have the next and previous images loaded ahead of time.

On To The Code...

The code in it's simplest form is easy, especially with jQuery.

var nextimage = "/images/some-image.jpg"; $(document).ready(function(){ window.setTimeout(function(){ var img = $("<img>").attr("src", nextimage).load(function(){ //all done }); }, 100); });

setTimeout Explanation

The reason I wrap this in setTimeout is to take it out of the linear flow of JavaScript as Steve Sounders explains -

use setTimeout to kick off long executing code - If you have a function that takes a long time to execute, launching it via setTimeout allows the page to render and resources to download without being blocked.

Further Reading


<< Back