How to Make Your Ning Site Location Aware
Post date: Mar 31, 2014 9:15:56 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)
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.