Add a Tab With Javascript

Meta

Instructions

You can use a tracking code JavaScript hack to add a tab to your social network which goes to another site. This is a somewhat advanced trick, though, so please proceed only if you’re familiar with JavaScript.

1. Before you begin, you need to decide on the following attributes for your new tab:
   
   • Label
   • Location to link to
   • Relative placement in the existing navigation menu
     
     
   (For this example, we'll be adding a new tab named "custom", which links to a specific member profile page, and is placed before the default "groups" tab in the navigation menu)
   
   
2. From the following list, locate that tab that should reside directly to the right of your new tab (you'll need to specify the text highlighted in blue for your code):
   
   • Main: xg_tab_main
     
   • My Page: xg_tab_profile
     
   • Members: xg_tab_members
     
   • Forum: xg_tab_forum
     
   • Groups: xg_tab_groups
     
   • Pages: xg_tab_page
     
   • Photos: xg_tab_photo
     
   • Videos: xg_tab_video
     
     
3. In the following code replace TAB_ANCHOR with the text that you’d like to appear on the tab and TAB_LINK with the page you’d like to link from the tab and TAB_ID with the value you found in step #2.

   <script type= "text/javascript">var newtab = document.createElement('li');
   newtab.id='xg_tab_custom1';
   newtab.innerHTML = '<a href="http://TAB_LINK">TAB_ANCHOR</a>';
   
   var referencetab = document.getElementById('xg_tab_forum');
   if(referencetab) {
   referencetab.parentNode.insertBefore(newtab,referencetab);
   }
   </script>
   

4. Your code from step #3 should looks something like this:

   <script type= "text/javascript">var newtab = document.createElement('li');
   newtab.id='xg_tab_custom1';
   newtab.innerHTML = '<a href="http://YOURNETWORKNAME.ning.com/page/page/show?id=2041178%3APage%3A71">custom</a>';
   
   var referencetab = document.getElementById('xg_tab_groups');
   if(referencetab) {
   referencetab.parentNode.insertBefore(newtab,referencetab);
   }
   </script>
   

5. Log into your social network as the Network Creator
6. Click on the “Manage” tab
7. Scroll down the page and click on “Track Statistics” as noted in this screenshot.
8. Paste the changed code into your tracking code box and click “Save”
9. View your site and you should now see your new tab!

Many times, you'll want to use your new tab to link to an existing location on your network. If you do this, you'll notice that your new tab doesn't highlight when it's been selected. In fact, depending on where you are linking your new tab to on your network, one of the default tabs will usually be highlighted after you click on your new tab. To fix this, follow the steps below:

1. Identify the tab that shouldn't be highlighted with you select your network's new tab.  Find this tab from the list below. (you'll need to specify the text highlighted in blue for your code):
   
   • Main: xg_tab_main
     
   • My Page: xg_tab_profile
     
   • Members: xg_tab_members
     
   • Forum: xg_tab_forum
     
   • Groups: xg_tab_groups
     
   • Pages: xg_tab_page
     
   • Photos: xg_tab_photo
     
   • Videos: xg_tab_video
     
     
2. In the following code, replace TAB_ID with the text you found in step #1 and TAB_LINK with the location your new tab links to:
   

   <script>
   var currentpage = window.location;
   if(currentpage == 'TAB_LINK')
   {
    document.getElementById('TAB_ID').className='';
    document.getElementById('xg_tab_custom').className='this';
   }
   </script>

3. Your code from step #2 should looks something like this:
   

   <script>
   var currentpage = window.location;
   if(currentpage == 'http://YOURNETWORKNAME.ning.com/page/page/show?id=2041178%3APage%3A71')
   {
    document.getElementById('xg_tab_page').className='';
    document.getElementById('xg_tab_custom').className='this';
   }
   </script>

4. In the "Track Statistics" code for your network, paste your new code directly below the previous block of code you generated above and click "Save"
   
   
5. View your site and your new tab should now highlight properly!  Congratulations!