How To Add Member Count Modules

[Bizz ( John )]

DEMO PAGES: http://bizzssite.ning.com/        LAYOUT EXAMPLES: http://bizzssite.ning.com/member-count-modules-demo-page

Demo image

This little tip will provide you with a way to add member counts to various places around your site. I have added a demo on my homepage and also a page which shows the various looks of them.

NOTE: Your members page must be viewable to public if you want non members to see the counts.

First option is adding a count into the Module Header for when you add a latest members, featured members module to a page using the add content.

We can add these modules using the add content option on a page via our site&pages section and to make a member count show up we just need to add the code for the count that you want. You will only need to add this once and anytime you add a member module to a page the count will be added to the top.

This code goes in your custom code end of page section via site&pages, choose which one you want to use.

NOTE; If you have named your members page anything else but members then you will need to change the parts in bold for the name you called your member page.

<script>
// Show Member Count
x$(document).ready(function() {
x$('<div/>',{ class:'MemberCount-load'}).prependTo('.section-members .module-name');
x$('.MemberCount-load').load('/members .membersListPage .module-name');
});
</script>

<script>
// Show Featured Member Count
x$(document).ready(function() {
x$('<div/>',{ class:'MemberFeatureCount-load'}).prependTo('.section-members .module-name');
x$('.MemberFeatureCount-load').load('/members/list/featured .membersListPage .module-name');
});
</script>

Next we can create our own modules for the counts if you prefer and these can be added very easily.

First we just need to add the custom code which will fill the divs when we add them, you only need to add this code once.

Go to your site&pages then add the code below into the custom code end of page section.

<script>
// Show Member Count
x$(document).ready(function() {
x$('.MemberCount-Module').load('/members .membersListPage .module-name');
x$('.MemberFeaturedCount-Module').load('/members/list/featured .membersListPage .module-name');
});
</script>

Next we add our divs to any page you want to display the counts.

1. First you go to a page where you want to add a module to in site&pages.
2. Next on the page you click on the Add Content buttom and choose html box, you can give it a title if you wish
3. Paste in or type the holding div for the one you want to use ( These are listed below )
4. If you want both in a module then just copy both divs in.

Two divs for the above

<div class="MemberCount-Module"></div>
<div class="MemberFeaturedCount-Module"></div>

You can use this on how ever many pages you want just by adding the divs as described above.

Now we can use some css to change the look of the member counts so you can change the font size colour etc.

For our member count above members modules we can simple target the text like this

/** Show the member count above the latest members module **/
.MemberCount-load .module-name{ font-size:0.85em; margin-bottom:4px;text-align:left}

And if you want it to look different on other pages as I have done for the homepage you just add the page name to the start of the code and add your adjustments to it.

/* Using different settings for the home page module added */
.page-home .MemberCount-load .module-name {font-size:0.75em; margin-bottom:2px;text-align:right }

For our custom modules we can target them like this and again if needed copy the line again and add a page name before the code if you want it to be different on that page.

/* Color Change As The Original Module Name In Members Page Was White **/

/* Member Count*/
.MemberCount-Module .module-name{ color:black }

/* Featured Member Count*/

.MemberFeaturedCount-Module .module-name{ color:black }

If you have added both of them to a single module you can easily join then together so you only need to add a style one time so they look the same and we do this by adding the line before the parts in brackets seperated by a comma. Then any style you add will be the same for both.

/* Same style for both divs text**/
.MemberCount-Module .module-name, .MemberFeaturedCount-Module .module-name{ color:black }

Hope you find this useful

John :-)

[Matthew Aukai Wright]

Hey there. This will be awesome to put on the sign in and sign up page. Do you know How I can do that? 

[Kyryl_Ning_Support]

Hi there!

This solution is using javascript in order to place the numbers on the sign in sign up page that is why it cannot be used on the sign in and sign up page, as no custom javascript is allowed on those pages. You can put the numbers there with CSS, however, they won't be changed automatically, and you would have to update the data manually. Also with new sign up sign in page, you can put those numbers in disclaimer but still you would have to update the data manually.

Best wishes,

Ning Team. 

[Matthew Aukai Wright]

Oh what is the code so I can put the number there? I don't mind updating it manually. :) 

[Kyryl_Ning_Support]

Hi there!

Please point on the screenshot of the sign-up page where the number of members should be inserted. So I could provide the right code.

Best regards,

Ning Team.

[Matthew Aukai Wright]

Hey there Kyryl it is above the sign in and sign up picture on the main page. https://storage.ning.com/topology/rest/1.0/file/get/48529474?profil...

Can I change that blue header to a rainbow picture? Can I also add how many video, pics, etc is on there?

[Kyryl_Ning_Support]

Hi there!

You can place the information about the videos etc, without the code just under the picture you have on sign up page. Just open the Social Site manager, and proceed to the Legal Documentation, click it and scroll the page the bottom and you will see the disclaimer. Just put the numbers and picture you want there.

Best regards,

Ning Team. 

 

[Matthew Aukai Wright]

Hi there Kyryl I put a text to see if it will go into the front page where people can sign in and sign up and it doesn't, it goes to its own page. :/ 

[Kyryl_Ning_Support]

Hi there!

If you put the text into disclaimer field in legal documentation the part of it would be shown on the sign-up/ sign-in page. Of course, there is the limit of characters that could be shown there and if you have exceeded it the link to the full version would be shown and teh preview as well. However, it should enough of place to show the stats you wish to present there like members count, video count etc.

Best regards,

Ning Team.

[Matthew Aukai Wright]

I did and it is still not showing up. Can you please check to see if I did it right on my website :( http://rainbow.ning.com

[Kyryl_Ning_Support]

Hi there!

Also, you should have the "show disclaimer preview enabled" under the sign in/sign up settings. It could be found at the bottom of the Members Management section. I have enabled it for you right now.

Best regards,

Nign team.