Posts Tagged ‘Programming’

How to (fully) integrate WordPress with Facebook

03 Jan

There are a number of Facebook tutorials, including my own offering examples of FBML to add additional functionality to a Facebook fan page.

However, on many occasions these tutorials fall short of the mark, with no server side functionality currently available via FBML, connecting to databases, or consuming information from other sources is difficult.Third party services fill the gap, but are often expensive, or cumbersome to implement.

One of the most common questions I get asked regarding FBML is how to integrate a WordPress blog, or blog posts on a Facebook fan page tab. This tutorial takes you through the steps of doing just that, with no third party application required.

For my own Facebook page, I have opted to offer exclusive content (not available on my main blog) via Facebook. In addition to that, fans and non fans see a different opening tab, giving them incentive to ‘Like’ the page.

Here’s what we are going to end up with:

1). A tease and reveal tab created via a Facebook application
2). Exclusive content which is only available to Facebook fans
3). Some added spice in the form of Facebook Javascript (FBJS) to cycle the posts elegantly.

Here’s what the final result looks like:

See the example live here. (Obviously) you’ll have to fan this page to see the posts.

Step by Step

Here’s what we need to do. Step by Step.

1). Create a new WordPress category to house the exclusive content
Find the new category ID
Exclude the category ID from your RSS feed and main blog
4). Obtain a Facebook application key and application secret
5). Download the latest Facebook libraries.
6). Setup a directory in the root of your WordPress install
7). Ammend and upload the required files
8). Change Facebook application settings to point to your new files.

Step 1. Create the new category

A relatively simple process, creating a new category in WordPress is as simple as going to the category section and adding the details. Further information (for those who need it) can be found on the codex.

Doesn’t really matter what you call this. The important part of the process, is working out what the unique “category ID” for the newly created category is.

Step 2. Find the new category ID

The category ID can be found simply from within the WordPress admin section. When you have created the new category simply hover over its name, and you’ll see this in the toolbar..


Unsurprisingly, cat_ID represents the new category ID. Keep this handy, as you are going to need it to exclude the category from your main blog.

Step 3. Exclude the category

There are three places we are going to remove this category. One is the sidebar of your WordPress blog, the other is inside the main blog loop – and finally the third is your RSS feed.

1) Removing from the sidebar

See Under ‘ Hiding the category for the sidebar‘ in this post, which uses a very similar technique to create a custom newsletter using WordPress.

2 & 3) Removing from the main loop and RSS

I’ve used a custom plugin that I’ve created to handle this. You can download it here, but please remember to set the $category_id_to_remove variable at the top of the plugin prior to upload. It looks something like this for you code junkies curious.

add_filter('pre_get_posts', 'exclude_category');

function exclude_category($query) {


$category_id_to_remove = '-1127'; // this should be changed to the catID

$query->set('cat', $category_id_to_remove);
return $query;

Ammend,  upload and install in the usual way that plugins are installed. To test that you have successfully excluded the category, simply create a post and assign it to that category. It shouldn’t appear in either your RSS feed, or your main blog. Sorted.

Step 4. Facebook app keys

To obtain Facebook application keys, you’ll have to create an application first. Visit this URL to begin the setup of a fresh application.  You can call this whatever you like. Accept the terms and click next, you may be required to fill in a captcha prior to moving on. You’ll be presented with a number of options, which we will have to fill in later. Right now, the only tab you are interested in is the “Facebook integration” option. You should be able to click on that to obtain both the ‘application secret’ and ‘application key’. Save these as you’ll need them for later steps.

Step 5. Facebook API Libraries

Facebook don’t make things terribly easy for developers, as there’s a fair bit of hunting around before finding the API libraries for PHP. They do however make life much easier for getting the information out of the Graph API.

These are currently housed at Githubs, and are available via this download link.

Download and extract the class (facebook.php). (As this file may change / get updated). I have however included this at time of writing in the main demo download below.

Bear in mind that this is the new Graph API – and not the old Restful API.

Step 6. Setup a directory

You can do this locally, prior to installation. You’ll need a directory for images, and the main code files which I’ve already written for you.

Download the full zip folder here.

These connect through to WordPress etc . Should look something like this.

Facebook.php – The main API class downloaded earlier
incfunctions.php – Any additional PHP functions (I’ve used a trimming function to shorten my posts)
Index.php – The main FBML page used by Facebook
tinthumber.php – A generic image resize PHP script, makes things pretty.

Step 7. Ammend the files

The only file that you will have to deal with is “index.php” everything else should be fine as is. The following are the sections of code that may need tweaked.

Lines 7 & 8:

$appapikey = ‘YOUR API KEY HERE”;
$appsecret = ‘YOUR APP SECRET HERE’;

refer to Step 4 if you can’t remember what these are.

Line 9:

$main_app_location_http = ‘’;

Change this to whatever server domain you’ve installed on. Will be the same as the domain for your WordPress install, inside a sub directory.

Line 48:

$number_of_posts = 5;

Change this to determine the number of WordPress posts that will be shown / cycled through inside your FBML application.


AND $wpdb->term_taxonomy.term_id IN(1127)

Change 1127 to be the same category ID that you determined in Step 2.

Line 110:

Determines what image / HTML to show to visitors who aren’t currently fans of your page..

Save the file with your settings, and upload it. At this point viewing the URL in the browser ( should show you the content shown at line 110.

Step 8. Change Facebook settings

Now that your application has been created, and uploaded, all that is left to do is to perform a few tweaks to the application page to set it all up. Log back into Facebook and follow these steps:

To set the app settings

1) Visit the following Developer Apps URL
2) Select the application name that you set in step 4 and click edit settings.
3) Click Facebook Integration
4) Set the canvas page name to anything you want
5) Set the canvas URL to the HTTP location you uploaded everything to. (Will be the same as the variable $main_app_location_http used earlier.
6) Set canvas type to FBML
7) Set tab name to ‘Extra content’
8) Set tab URL to ‘index.php’

Save changes and click ‘Back to My Apps’ at the top of the page.

To add the application to your fan page

1) Click Application Profile Page
2) Click ‘Add to my Page’ – if you an admin of several fan page, select the appropriate one.
3) Visit your fan page
4) Click the + icon beside your tabs, and select ‘Extra Content’

Voila! That should be you up and running now, having created your first Facebook FBML application. Simples!

You should be able to expand upon the code that I’ve provided, and I’ll be adding to my own offering as I now have a fair idea how things work. Next stage will be to perhaps syndicate some RSS, or integrate my Twitter account.

Articles which proved to be useful:

Facebook JS slider – I’ve used a large proportion of this code to give the sliding left and right effect.

How to detect fan of a Facebook page. – Hooray for the REQUEST object giving additional information from Facebook. var_dump to the rescue.

Some things developers need to know when developing for Facebook

JQuery isn’t supported, Facebook don’t allow you to link to external scripts when creating a canvas application. Instead a JS library called FBJS is used. That said – an open source project to mirror JQuery functionality inside Facebook looks promising.

Body tag’s are not allowed inside FBML canvas.

When creating an application for a tab, some functionality will be restricted, particularly user auth calls as tabs can’t redirect.

$is_fan = $_REQUEST['fb_sig_is_fan']; this code works out if the current user session is a fan of the page or not without needing to find the user ID. The above paragraph explains why userId can’t be fetched normally.

Facebook tab widths for designs are 520px.


You can of course change the images which are used, and the surrounding HTML to create your own custom FBML app. Standard WordPress programming can be used because of the inclusion of the core libraries at the top of the script, so those of you familiar with writing plugins or custom code should be right at home. Let me know your thoughts in the comments.

How to (fully) integrate WordPress with Facebook is a post from: Webdistortion


Just Make It Faster

19 Dec

As a user, how often have you thought “I wish this web service was faster.”  As a CEO, how often have you said “just make it faster.”  Or, more simply, “why is this damn thing so slow?”

This is a not a new question.  I’ve been thinking about this since I first started writing code (APL) when I was 12 (ahem – 33 years ago) on a computer in the basement of a Frito-Lay data center in Dallas.

This morning, as part of my daily information routine, I came across a brilliant article by Carlos Bueno, an engineer at Facebook, titled “The Full Stack, Part 1.”  In it, he starts by defining a “full-stack programmer“:

“A “full-stack programmer” is a generalist, someone who can create a non-trivial application by themselves. People who develop broad skills also tend to develop a good mental model of how different layers of a system behave. This turns out to be especially valuable for performance & optimization work.”

He then dissects a simple SQL query (DELETE FROM some_table WHERE id = 1234;) and gives several quick reasons why performance could vary widely when this query is executed.

It reminded me of a client situation from my first company, Feld Technologies.  We were working on a logistics project with a management consulting firm for one of the largest retail companies in the world.  The folks from the management consulting firm did all the design and analysis; we wrote the code to work with the massive databases that supported this.  This was in the early 1990′s and we were working with Oracle on the PC (not a pretty thing, but required by this project for some reason.)  The database was coming from a mainframe and by PC-standards was enormous (although it would probably be considered tiny today.)

At this point Feld Technologies was about ten people and, while I still wrote some code, I wasn’t doing anything on this particular project other than helping at the management consulting level (e.g. I’d dress up in a suit and go with the management consultants to the client and participate in meetings.)  One of our software engineers wrote all the code.  He did a nice job of synthesizing the requirements, wrestling Oracle for the PC to the ground (on a Novell network), and getting all the PL/SQL stuff working.

We had one big problem.  It took 24 hours to run a single analysis.  Now, there was no real time requirement for this project – we might have gotten away with it if it took eight hours as we could just run them over night.  But it didn’t work for the management consultants or the client to hear “ok – we just pressed go – call us at this time tomorrow and we’ll tell you what happened.”  This was especially painful once we gave the system to the end client whose internal analyst would run the system, wait 24 hours, tell us the analysis didn’t look right, and bitch loudly to his boss who was a senior VP at the retailer and paid our bills.

I recall having a very stressful month.  After a week of this (where we probably got two analyses done because of the time it took to iterate on the changes requested by the client for the app) I decided to spend some time with our engineer who was working on it.  I didn’t know anything about Oracle as I’d never done anything with it as a developer, but I understood relational databases extremely well from my previous work with Btrieve and Dataflex.  And, looking back, I met the definition of a full-stack programmer all the way down to the hardware level (at the time I was the guy in our company that fixed the file servers when they crashed with our friendly neighborhood parity error or Netware device driver fail to load errors.)

Over the course of a few days, we managed to cut the run time down to under ten minutes.  My partner Dave Jilk, also a full-stack programmer (and a much better one than me), helped immensely as he completely grokked relational database theory.  When all was said and done, a faster hard drive, more memory, a few indexes that were missing, restructuring of several of the SELECT statements buried deep in the application, and a minor restructure of the database was all that was required to boost the performance by 100x.

When I reflect on all of this, I realize how important it is to have a few full-stack programmers on the team.  Sometimes it’s the CTO, sometimes it the VP of Engineering, sometimes it’s just someone in the guts of the engineering organization.  When I think of the companies I’ve worked with recently that are dealing with massive scale and have to be obsessed with performance, such as Zynga, Gist, Cloud Engines, and SendGrid I can identify the person early in the life of the company that played the key role. And, when I think of companies that did magic stuff like Postini and FeedBurner at massive scale, I know exactly who that full system programmer was.

If you are a CEO of a startup, do you know who the full-stack programmer on your team is?


Google spends a few more million, picks up Widevine DRM software firm

05 Dec
Two acquisitions in as many days? Say it ain't so! Prior to even unboxing Phonetic Arts, Google has now snapped up Seattle-based Widevine. Truth be told, you're probably taking advantage of the company's technology without even being aware of it -- it's used in over 250 million web connected HDTVs and streamers around the globe, and it's primarily designed to thwart piracy attempts while enabling consumers to enjoy content on a wider array of devices. As these things tend to do, neither outfit is talking prices, but it's fairly obvious why El Goog would want a firm like this in its portfolio. Moreover, it's borderline comical that Viacom's pushing an appeal in order to pit Google as an anti-studio, pro-piracy monster while it's spending hard-earned cash on a DRM layer. At any rate, Google's not getting into specific plans just yet, only stating its intentions to maintain Widevine's agreements, provide support for existing and future clients as well as "building upon [the technology] to enhance both Widevine's products and its own."

Google spends a few more million, picks up Widevine DRM software firm originally appeared on Engadget on Sun, 05 Dec 2010 13:20:00 EDT. Please see our terms for use of feeds.

Permalink Download Squad  |  sourceThe Official Google Blog, Widevine  | Email this | Comments

Programmer problem solving sequence

22 Oct

From Phillipe Leybaert:

2010 developer’s problem solving sequence:

  1. Google
  2. Coworkers
  3. StackOverflow
  4. RTFM
  5. Think

Local Storage And How To Use It On Websites

11 Oct

Smashing-magazine-advertisement in Local Storage And How To Use It On WebsitesSpacer in Local Storage And How To Use It On Websites
 in Local Storage And How To Use It On Websites  in Local Storage And How To Use It On Websites  in Local Storage And How To Use It On Websites

Storing information locally on a user’s computer is a powerful strategy for a developer who is creating something for the Web. In this article, we’ll look at how easy it is to store information on a computer to read later and explain what you can use that for.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Adding State To The Web: The “Why” Of Local Storage

The main problem with HTTP as the main transport layer of the Web is that it is stateless. This means that when you use an application and then close it, its state will be reset the next time you open it. If you close an application on your desktop and re-open it, its most recent state is restored.

This is why, as a developer, you need to store the state of your interface somewhere. Normally, this is done server-side, and you would check the user name to know which state to revert to. But what if you don’t want to force people to sign up?

This is where local storage comes in. You would keep a key on the user’s computer and read it out when the user returns.

C Is For Cookie. Is That Good Enough For Me?

The classic way to do this is by using a cookie. A cookie is a text file hosted on the user’s computer and connected to the domain that your website runs on. You can store information in them, read them out and delete them. Cookies have a few limitations though:

  • They add to the load of every document accessed on the domain.
  • They allow up to only 4 KB of data storage.
  • Because cookies have been used to spy on people’s surfing behavior, security-conscious people and companies turn them off or request to be asked every time whether a cookie should be set.

To work around the issue of local storage — with cookies being a rather dated solution to the problem — the WHATWG and W3C came up with a few local storage specs, which were originally a part of HTML5 but then put aside because HTML5 was already big enough.

Using Local Storage In HTML5-Capable Browsers

Using local storage in modern browsers is ridiculously easy. All you have to do is modify the localStorage object in JavaScript. You can do that directly or (and this is probably cleaner) use the setItem() and getItem() method:


If you read out the favoriteflavor key, you will get back “vanilla”:

var taste = localStorage.getItem('favoriteflavor');
// -> "vanilla"

To remove the item, you can use — can you guess? — the removeItem() method:

var taste = localStorage.getItem('favoriteflavor');
// -> null

That’s it! You can also use sessionStorage instead of localStorage if you want the data to be maintained only until the browser window closes.

Working Around The “Strings Only” Issue

One annoying shortcoming of local storage is that you can only store strings in the different keys. This means that when you have an object, it will not be stored the right way.

You can see this when you try the following code:

var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom'; = 'Lightning McQueen';
console.log( car );
localStorage.setItem( 'car', car );
console.log( localStorage.getItem( 'car' ) );

Trying this out in the console shows that the data is stored as [object Object] and not the real object information:

Console-e1285930679229 in Local Storage And How To Use It On Websites

You can work around this by using the native JSON.stringify() and JSON.parse() methods:

var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom'; = 'Lightning McQueen';
console.log( car );
localStorage.setItem( 'car', JSON.stringify(car) );
console.log( JSON.parse( localStorage.getItem( 'car' ) ) );

Console2-e1285930703974 in Local Storage And How To Use It On Websites

Where To Find Local Storage Data And How To Remove It

During development, you might sometimes get stuck and wonder what is going on. Of course, you can always access the data using the right methods, but sometimes you just want to clear the plate. In Opera, you can do this by going to Preferences → Advanced → Storage, where you will see which domains have local data and how much:

Storage-opera in Local Storage And How To Use It On Websites
Large view

Doing this in Chrome is a bit more problematic, which is why we made a screencast:

Mozilla has no menu access so far, but will in future. For now, you can go to the Firebug console and delete storage manually easily enough.

So, that’s how you use local storage. But what can you use it for?

Use Case #1: Local Storage Of Web Service Data

One of the first uses for local storage that I discovered was caching data from the Web when it takes a long time to get it. My World Info entry for the Event Apart 10K challenge shows what I mean by that.

When you call the demo the first time, you have to wait up to 20 seconds to load the names and geographical locations of all the countries in the world from the Yahoo GeoPlanet Web service. If you call the demo a second time, there is no waiting whatsoever because — you guessed it — I’ve cached it on your computer using local storage.

The following code (which uses jQuery) provides the main functionality for this. If local storage is supported and there is a key called thewholefrigginworld, then call the render() method, which displays the information. Otherwise, show a loading message and make the call to the Geo API using getJSON(). Once the data has loaded, store it in thewholefrigginworld and call render() with the same data:

if(localStorage && localStorage.getItem('thewholefrigginworld')){
} else {

'+loading+' '); var query = 'select centroid,woeid,name,boundingBox'+ ' from geo.places.children(0)'+ ' where parent_woeid=1 and placetype="country"'+ ' | sort(field="name")'; var YQL = ''+ encodeURIComponent(query)+'&diagnostics=false&format=json'; $.getJSON(YQL,function(data){ if(localStorage){ localStorage.setItem('thewholefrigginworld',JSON.stringify(data)); } render(data); }); }

You can see the difference in loading times in the following screencast:

The code for the world info is available on GitHub.

This can be extremely powerful. If a Web service allows you only a certain number of calls per hour but the data doesn’t change all that often, you could store the information in local storage and thus keep users from using up your quota. A photo badge, for example, could pull new images every six hours, rather than every minute.

This is very common when using Web services server-side. Local caching keeps you from being banned from services, and it also means that when a call to the API fails for some reason, you will still have information to display.

getJSON() in jQuery is especially egregious in accessing services and breaking their cache, as explained in this blog post from the YQL team. Because the request to the service using getJSON() creates a unique URL every time, the service does not deliver its cached version but rather fully accesses the system and databases every time you read data from it. This is not efficient, which is why you should cache locally and use ajax() instead.

Use Case #2: Maintaining The State Of An Interface The Simple Way

Another use case is to store the state of interfaces. This could be as crude as storing the entire HTML or as clever as maintaining an object with the state of all of your widgets. One instance where I am using local storage to cache the HTML of an interface is the Yahoo Firehose research interface (source on GitHub):

The code is very simple — using YUI3 and a test for local storage around the local storage call:

YUI().use('node', function(Y) {
  if(('localStorage' in window) && window['localStorage'] !== null){
    var key = 'lastyahoofirehose';
  if(key in localStorage){'#mainform').set('innerHTML',localStorage.getItem(key));'#hd').append('

Notice: We restored your last search for you - not live data'); } } });

You don’t need YUI at all; it only makes it easier. The logic to generically cache interfaces in local storage is always the same: check if a “Submit” button has been activated (in PHP, Python, Ruby or whatever) and, if so, store the innerHTML of the entire form; otherwise, just read from local storage and override the innerHTML of the form.

The Dark Side Of Local Storage

Of course, any powerful technology comes with the danger of people abusing it for darker purposes. Samy, the man behind the “Samy is my hero” MySpace worm, recently released a rather scary demo called Evercookie, which shows how to exploit all kind of techniques, including local storage, to store information of a user on their computer even when cookies are turned off. This code could be used in all kinds of ways, and to date there is no way around it.

Research like this shows that we need to look at HTML5′s features and add-ons from a security perspective very soon to make sure that people can’t record user actions and information without the user’s knowledge. An opt-in for local storage, much like you have to opt in to share your geographic location, might be in order; but from a UX perspective this is considered clunky and intrusive. Got any good ideas?


© Christian Heilmann for Smashing Magazine, 2010. | Permalink | Post a comment | Add to | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , ,


Greasemonkey Shows Off Political Colors

10 Oct

Memeorandum colored by Greasemonkey script

Andy Baio, a prominent blogger and creator of, has released a Greasemonkey script to visualize the perceived political bias of linked content on the political news aggregation site Memeorandum. If a site tends to link to more left-leaning stories, it’s colored blue. Right-leaning linkers are red.

With the help of Delicious founder Joshua Schachter, Baio used a recommendation algorithm to analyze the last three months of linking behavior for each news source. With that data stored in a Google Spreadsheet, Baio used the Ajax support in Greasemonkey to grab a JSON feed and colorize the links. Those with Firefox’s Greasemonkey extension and Baio’s script installed will see the colorized links when viewing Memeorandum. Baio also released a full-fledged extension that does not require Greasemonkey.

This is a great example of how Greasemonkey can be used to change the way you view a page. In Baio’s case, he wanted to see the perceived bias of a site at a glance so he could choose a balanced view. The code from this project is available under the free and open-source GPL license. You could use it to create other ways of visualizing data on the web.

GreasemonkeyIf you’re brand new to Greasemonkey, be sure to read my new Greasemonkey tutorial on the versatile Firefox extension. If you’ve ever written JavaScript before, you’ll quickly learn the ways of Greasemonkey, which essentially gives you the ability to insert your code anywhere in someone else’s site, but only for your own use on your local machine.

You don’t need to bite off as much as Baio, who admits this is his first Greasemonkey script. One of the biggest benefits I’ve found is that I can write code to pull out the important stuff already in the page. My tutorial shows a simple example of that, where I create a floating menu of all <h2> tags on the page. It turns out this is useful for long Wikipedia entries… and Webmonkey tutorials.

See also:

Comments Off on Greasemonkey Shows Off Political Colors

Posted in Politics


Microsoft Gets a Clue, Adopts jQuery

29 Sep

Could Microsoft be learning the way things work on the web? That big software company in Redmond will include JavaScript framework jQuery in its development environment. At the same time, Nokia announced that it will use jQuery for its mobile-browser development. That’s two more big companies to join Google, Amazon and thousands of other sites using jQuery.

Microsoft has long struggled to keep up with advances in JavaScript. In July the company announced an Ajax roadmap, which looked like Microsoft was going to eventually re-create all the features already in popular frameworks. Instead, Microsoft is going to incorporate someone else’s code, and it’s open source code at that.

How’s this for cool–Intellisense support for jQuery in ASP.NET:
Intellisense code includes jQuery

This is a great move by Microsoft to avoid creating its own jQuery-like framework. The company that seems to always require others to change is adapting to the way things already are on the web. It couldn’t have made a better choice in jQuery, which is a fast, nimble framework, two adjectives not often used to describe anything related to MS web development.

Scott Hanselman has a good overview of how jQuery/ASP.NET code looks. If you aren’t a .NET developer, but you’d like to use jQuery, check out my jQuery tutorial.

[Screenshot by Scott Hanselman]

See also:

Comments Off on Microsoft Gets a Clue, Adopts jQuery

Posted in Uncategorized


Google: ‘Beta’ Means What We Say It Means

25 Sep

gmail logoGoogle is probably the most prolific distributor of “beta” software in the world. Pingdom recently went through the entire stack of Google apps and found that nearly half of them (45 percent) are still officially at beta status.

Traditionally “beta” has been used to designate software that isn’t ready for prime time and may have bugs, yet millions of people use the four-year-old Gmail on a daily basis and, for most, Gmail is bug free. So why call it a beta?

The shorthand way of looking at software development is something like this: alpha = not ready, beta = still not ready, release candidate = still not quite ready and x.0 = finally ready.

So why would a company like Google want equate its products with what most people consider “not ready?” The answer is that Google doesn’t use the term beta according to the usual definition, it apparently has its own, private definition of beta.

In response to those questioning Google’s heavy, and possibly inappropriate, use of the word beta, a Google spokesperson tells NetworkWorld, “we believe beta has a different meaning when applied to applications on the web….”

The spokesperson never exactly gets around to what Google’s precise definition of the word beta is, but reading between the lines it would seem the company means something like “we’re still adding features.”

In which case, don’t expect most Google apps to ever come out of beta. Which isn’t really a problem, it is after all just a word — just be aware that Google has its own definition.

[Note that Webmonkey on the other hand is very much a beta in the traditional sense of the word. Try our RSS feed… see, beta.]

[via Slashdot]

See Also:

Comments Off on Google: ‘Beta’ Means What We Say It Means

Posted in Uncategorized


Load Content When Users Hit Page Bottom For Endless Scrolling

08 Sep

There’s a snazzy new feature we’ve seen a couple places that we just had to look into. When users reach the bottom of a page, more content is loaded. So, rather than users closing the window (or having to click a “next page” link), you can given them more to read. For sites with a significant amount of content, this makes for endless scrolling.

Example of endless scrolling

There’s a short delay, while an Ajax call, retrieves more content and pastes it below. Otherwise, it’s a smooth transition to the next bundle of blog posts, photos, or links. You can see endless scrolling in the wild at lifestreaming service, link-sharing site DZone, Google Reader (if you have an account), or this demo of the technology. Just scroll to the bottom of any of those pages.

If this is something you want to implement there’s a JQuery implementation for endless scrolling. As with many snazzy JavaScript tricks, you’ll need a server-side component to send the next set of data.

See also:

Comments Off on Load Content When Users Hit Page Bottom For Endless Scrolling

Posted in Uncategorized