Fantastic example of Ning API use

Govloop have always impressed me with their innovative use of the Ning platform. Whilst browsing it today I noticed some neat navigation features and innovative use of pages. It looks like they used the Ning API to do this. I must say, I'm impressed. Up until now I thought the Ning API was a bit pants but seeing this makes me think again!

What Govloop have done is address one of the biggest problems I have with the Ning platform and that is acccessibility of content. Great job Govloop. Very desirable!

See http://www.govloop.com/ and example page http://www.govloop.com/acquisition

Favorite

0 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by Mal Jones on February 6, 2012 at 11:27am

Hi everyone! I'm Mal and I was part of the Forum One team that worked on the GovLoop project.

There are actually quite a few moving parts working together to make the Tabbed Content happen -

The API:

We're using the Ning Api to pull in tag/category specific blog posts and discussion threads. The API doesn't make things like the tabs happen, it just gave us the content we wanted under the tabs.

We worked closely with Devin and the Ning team (over the holidays even!) testing, testing, debugging, and testing some more. The API really has a lot of power and a lot of information available to us creators.

Also, you'll notice that we're pulling in content from other GovLoop sites (like insights.govloop.com). For that we're using https://developers.google.com/feed/. It solved a lot of cross-domain issues we were running in to.

Javascript/jQuery:

We had to create a custom javascript file for GovLoop that could take the information from the API and display it like we wanted. This was the tricky part, and where we had to do most of the heavy lifting. You can find some basic guides around the web on how to pull content from APIs. Google is your friend with things like this, trust me.

For folks that are wondering: We're using JSON and PHP (http://developer.ning.com/docs/ningapi/1.0/examples/php/php.html)

Once we got all the information we wanted being feed on to the Custom Pages, we used jQuery (http://jquery.com) for things like showing/hiding tabbed content and displaying certain items at certain times. We used it to get the ‘utility nav’ in the top right working as well, so that we can clean up the main site navigation.

CSS:

The actual tabs themselves are just a styled list of links. As a matter of fact, all of the content is just on pages that we created and set up via the Ning Editor. Nothing fancy there!

Content Structure:

It seems like everyone is talking about the navigation/ease of browsing the new content, and that’s really the most important thing. Steve and Jeff had a very strong sense of how they wanted the content organized and we were able to use their ideas, our own expertise in Information Architecture and User Experience and Ning Platform to move content around to meet their goals.

The Homepage:

To make the tabbed area on the homepage, we identified the containers of content we wanted in the tabs (those are all just Ning Modules) courtesy of Firebug (so I can could look at the HTML). From their, we moved them to the center column, used some text boxes to surround the containers with another container (so we could target them with CSS and Javascript) and then created tabs.

Ning is actually very flexible when it comes to arranging things for navigation and creating custom pages, but it’s on us as Creators to know when enough is enough and not throw everything in the nav or into a sidebar. Less is More was something we repeated to ourselves quite a bit on this project and it seems to be paying off.

Long post for my first one, but I just wanted to give a little background and insight in to how we made the GovLoop changes! It was quite a bit of work, but the payoff shows what can really be done with Ning.

If you've got any general questions let me know and I'll try to answer what I can. We're glad you're enjoying the new look!