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="http://api.ning.com:80/files/NvWHU5oq4TbYM4AosQVZgvrIr0tXwN-sh3PF2ngbQc0w6PZ7Rk0-yx49PCQAo*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


More Ning Design Help

UPDATE:  as an exercise, I pretended that I had never done this before and followed my own tip to add slightly modified version of this to the bottom of Beautiful Nation Project as a demo.

As always, if you are ever in need of Ning Help, feel free to get in touch with me.  Always happy to assist Ning cummunity managers with their networks. 

Tell Me What You Think

The gadget spec URL could not be found
ċ
index.html
(1k)
Jaybird Farrow,
Mar 31, 2014, 2:22 PM
v.1