How to Make Your Ning Site Location Aware

posted Mar 31, 2014, 2:15 PM by Jaybird Farrow   [ updated Mar 31, 2014, 2:23 PM ]

Add a Ning Powered Location Widget

If you have looked around for a simple location aware widget to add to your Ning network, you have probably seen all sorts of garbage widgets loaded with ads and flash junk. This is why i have been working on a HTML5 solution that can be hosted on Ning's servers and not depend on external resources that make pages heavy. Below is a single block of code which will iframe the widget into your HTML box.

Code for Location Widget

Example of Ning Powered Location Aware Widget [View Demo]

(FYI educators and students are free to join BNation and follow the Voyage)

Ning Powered Location Aware Widget

Code For Ning-Powered/Hosted Iframed Location Widget

<iframe src="*GPUOaF9GfhMADyON-0lCQeILcY3LayKiRV/index.html" style="border:0px #FFFFFF none;" name="locateyourself" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="500px" width="500px"></iframe>

Just paste that code into a HTML box inside your page and adjust accordingly. The index.html file is attached below for those who might like to dissect it and make modifications.

Why "Ning Powered"?

When I say "Ning Powered" I mean all scripts and styles have been hosted on Ning servers so it should not weigh your site pages down like the other garbage out there. I am also working on a version that will not require your member to retrieve geolocation from their browser (which will be better for schools and private locations).

I figured I would share this with you all because I find it extremely helpful as a Community Manager who enjoys experimenting with web mapping and geolocating resources.

Some Practical Uses For Geolocation:

Finding locations to add to Photos and Videos on Network

Allowing members to provide more accurate locations to profiles and Groups

Jaybird Farrow,
Mar 31, 2014, 2:22 PM