This is a simple little block of code that will add some engagement icons/links to your Ning Network. I created 2 versions, a vertical and a horizontal. All of the links are ready to go for a Ning Network. All you have to do is copy/paste to a text box.

The icons may not be the best for everyone. You can find great royalty free icons here:

You will see the licensing for each icon in upper left of screen.



Working Example:

Profile Add Blog Add Forum Add Event Add Group Add Music Add Photo Add Video
Profile +Blog +Forum +Event +Group +Music +Photos +Videos



Wide Text Box - Horizontal Version (screenshot)


  • Edit Text Box and click on HTML button.
  • Copy/paste code into Text Box and Save.
  • Done.


Narrow Text Box - Vertical Version (screenshot)


  • Edit Text Box and click on HTML button.
  • Copy/paste code into Text Box and Save.
  • Done.



The sweet little iphone icons were put together by

`-kol on deviantART


You may want to upload the icons to your site to insure optimal loading time:

If you would like access to many tips of this quality, work, and support, head over to Jen's Premium Tip Group!





Views: 1062

Replies to This Discussion

Looks great!


Thank you once again Jen! I installed and customized it to my taste.


I'd like to get rid of the tabs I am using the icon menu to replace without having to hide the pages themselves (Blog, Forum, Events, Groups, Photos, Videos). Yes, I realize that if I do so it will affect my SEO somewhat, but I'm working on making my home page less "busy" (as one member put it) or cluttered.

Really looks great! If you delete a tab, Google will still crawl the pages. So it shouldn't hurt your SEO.



So I can delete a tab without losing the page?

To my knowledge:

The only way to remove a module page by deleting a tab, is to delete a Ning App tab. Test one that doesn't matter. To remove a full module, you'd do that from Features Layout. See what I mean?

Now, if you add a new page via the Tabs Settings, I'm not sure. I've never tested removing a tab for a page that was added via the Tabs. So be careful if you remove a page tab.



I wasn't sure if removing the tabs would delete the Ning created features, but my blog, photos, videos, etc. are still there. If it were possible to create an entire row of those icons for everything in that menu, I would do it in a heartbeat. Hahaha! They look so neat.


Thanks once more, Jen. 

Glad it worked out.



I love this so much!! Feels like using iPad.

Thank you Jen!

Happy you like them! ;-)

Best to you,


Hey Jen. I moved the icons to the left column so that members can navigate to different areas of my site since I have removed the Ning tabs. What I would like to be able to do is center the icons in the text box. Tried using div tags to center, but it's not working. I would appreciate your advice here.



Hi Thunder,

It's due to the 2nd column width. Since the table is currently set to 100% in available width, and the icon column is set to 71 pixels (<td width="71"...), the 2nd column is taking on the full width that is left in column area. The easiest thing to do is just adjust the one number for your table width, and make it something like 70%. Or, to make it completely precise you would need to add a column width to every row for column #2. Try this first - just changing the table column width:

<table width="70%" cellspacing="0" border="0">




Thanks Jen. I set the table width to 1% and that's as close as I'm going to get to centering it. Looks better, so I'm pleased. :)



© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips