Kyle Ford
Kyle Ford
Rate this post

Tabs

Network Creators often tell us that they want to add extra navigation tabs to their social networks, usually to link to things like companion websites, e-commerce shops or contest pages. In the past, this required you to request a copy of your network’s source code from us and manually merge new releases. That is now a thing of the past.

A few releases ago, we introduced support for Google Analytics to offer Network Creators more flexibility in monitoring traffic and statistics on their network. We implemented this feature by offering a simple text field into which Network Creators can cut and paste their Google Analytics code (just visit the “Manage” tab, then the “Add your own tracking code” link at the bottom). But buried within that innocent little box is a powerful secret…the JavaScript snippets you paste there needn’t be limited to stats tracking code 🙂

What does this mean? You may be familiar with Greasemonkey, a popular Firefox extension that lets users “rewrite” websites on the fly, using JavaScript to alter the site’s existing behavior/style. For example, a Greasemonkey script might change a page’s background color to something more readable, or move a button to a location that makes more sense.

Think of this Google Analytics box as an unofficial “Ningmonkey” of sorts (apologies to our maintenance page mascot). By inserting snippets of JavaScript, you can open up a new world of customization on your network without needing a copy of the source code. This lets you tweak to your heart’s content while still receiving automatic feature updates as soon as they’re released.

We’ll do a series of posts highlighting some handy JavaScript snippets for you to use on your network. If you already have Google Analytics (or other) code in the box, you can just paste any new snippets below what’s already there.

So without further ado…

Here’s a snippet you’d use to add a new tab at the very end of your existing navigation tabs:

<script type= “text/javascript”>
var newtab = document.createElement(‘li’);
newtab.innerHTML = ‘<a href=”https://www.ning.com”>My Cool New Tab</a>’;
var reftab = document.getElementById(‘xg_tab_main’);
if(reftab) {parentNode.appendChild(newtab); }
</script>

Note that you’ll want to change the URL (it’s https://www.ning.com above) and the tab name (it’s My Cool New Tab above).

And here’s a snippet you’d use to add a new tab that appears to the left of an existing tab:

<script type= “text/javascript”>
var newtab = document.createElement(‘li’);
newtab.innerHTML = ‘<a href=”https://www.ning.com”>My Cool New Tab</a>’;
var referencetab = document.getElementById(‘xg_tab_video’);
if(referencetab) {referencetab.parentNode.insertBefore(newtab,referencetab);}
</script>

Again, note that you’ll want to change the URL (it’s https://www.ning.com above) and the tab name (it’s My Cool New Tab above). In addition, you’ll want to change the xg_tab_video part. As you might guess, in the above example your new tab will appear before the “Videos” tab. Use xg_tab_photo to have it appear before the “Photos” tab. Other tab options include: xg_tab_main, xg_tab_profile, xg_tab_members, xg_tab_forum, xg_tab_groups, xg_tab_invite and xg_tab_manage.

Happy tabbing!