Loading...

Forum Index > Support - English > Growing a Large and Successful Social Network on GROU.PS: Tip #1

Chidi and Chika Nwaogu 5 years ago
ActivityRank: 108
This tutorial will be great for those not using the Splash/Welcome screen. Permit me to say that if you're creating a social network and you want to provide an incentive for a potential member to register for an account, it is a bad practice to make use of the Splash screen.

And here's my reason: Some people might decide to register for an account after reading a fascinating blog article on your social network by one of your users or you. Some might decide to sign up for an account after watching the latest musical video of their favorite artist they have long waited for. Which ever the case, the Splash screen will inhibit this.

The Splash screen prevents a potential member from having access to any page on your network, other than the splash screen. For example, if you try visiting http://<yourgroupname>.grou.ps/videos while using the splash screen, you will be brought back to the splash screen. Every page shows you the Splash screen.

Looking at the practice of other larger and established social networks, you'll discover that you can access some contents like profile pages of users, fan pages etc, without having to be a registered user. Just that certain contents are hidden or not visible to you.

For example, you can search on Twitter on what people are tweeting or the trending topics, without having to be a registered member yet. This and many more gives the potential member a reason to want to own an account and be an active member on your network.

Now, are you making use of a Splash screen, you can deactivate it or turn it off at: 
http://<yourgroupname>.grou.ps/admin/looknfeel/splash

Now uncheck the "enable welcome page" checkbox.



You just made the right decision. Now, you should ease up a little on your site privacy. Too much privacy control is bad and too little is bad too. This is what I mean, you should be able to allow non-members or non-logged in visitors to view the contents of all or most of your apps, but of course they will be limited to only viewing, thus they can't contribute. 

For example, to allow non-members or non-logged in members to view your Photo app, go to: http://<yourgroupname>.grou.ps/admin/modules/photos and check the "Anyone" radiobox for the "Who can read the content?" option.

Congratulations, you just made the second right decision in just a couple of minutes.



Now, to the main content of this tip:


Using Two Different CSS

Using two different CSS for your group allows your network have different feels when logged in and not logged in. This is best for groups that want to hide some contents from non-members and display it to members, using the display: none; and display: block; CSS codes respectively.

For example, this is how the Video app page on LAGbook looks like to a member when logged in:



Now, let's take a look at how the Video app page on LAGbook looks like to a visitor not logged in:



These are but the same pages, how d'you they look different. Look closely, you'll discover that the elements on the both pages differ. For example, the sidebar on the right hand side doesn't exit on the Video page when not logged in. Also, the Friend suggestion and the Featured Video suggestion is not displayed either to a visitor who isn't logged in. This was achieved with the display: none; CSS code on the CSS used on LAGbook for non-logged in members. Be patient, I'll explain how to do it in the later words of this tip.

Now this great practice isn't only practiced on LAGbook, but the well-established Facebook also implement this practice. For example, take a look at the LAGbook fanpage on Facebook for a non-logged in Facebook visitor and for one who is logged in below and you'll spot the same practice too:

For a logged in member:



Now, for a non-logged in visitor:



If you take a look at Facebook and LAGbook, Ads are being displayed to logged in members and not to non-logged in visitors. You don't want to start advertising to potential members, do you? That will turn them off immediately. 

Now, this is how to achieve this. To use two different CSS for your network, you'll have to use the code below:

{if $access_isGroupMember eq true}

<link rel="stylesheet" type="text/css" href="<the link to your default CSS on GROU.PS goes here>"  id="groups_template_style" media="Screen"/>

{else}

<link rel="stylesheet"type="text/css" href="<The link to an external hosted CSS that will work for Non-logged in Visitors goes here>media="Screen" />

{/if}


This should go into your Template HTML replacing your the link rel to your current CSS, which should look basically like this: <link rel="stylesheet" type="text/css" href="<Your CSS link on GROU.PS>"  id="groups_template_style" media="Screen"/>.

You can host the external CSS that will work for non-logged visitors on free file hosting/sharing services like Dropbox.com (in fact this is the service LAGbook makes use of). Here's a link to the external CSS that works for non-logged in members on LAGbook: http://dl.dropbox.com/u/92231135/nonmembers%20(1).css

Notice, the {if $access_isGroupMember eq true} ... {else} ... {/if} code. 

This code is powerful. This helps GROU.PS detect if a viewer is logged in or not, and executive certain codes.  In the HTML code above, GROU.PS will detect if the viewer is logged in or not, and apply your different CSSs when applicable.


{if $access_isGroupMember eq true}

<HTML to execute when logged in>

{else}

<HTML to execute when not logged in>

{/if}


It isn't only only CSS link rels that can go into this {if $access_isGroupMember eq true} ... {else} ... {/if} code. Divs, tables, Ps, Spans, Forms, virtually anything can go into it.  if $access_isGroupMember eq true} ... {else} ... {/if} code just ensures that the applicable HTML code(s) is executed if a viewer is logged in or not. 


Using the {if $linkto_chat eq true} code

This is probably another great code provided by GROU.PS. It allows you to detect if the chat box is visible or not and then execute applicable HTML codes. For example, when you visit your message dashboard at: http://<yourgroupname>.grou.ps/dashboard/messages, your chat box is not visible. 

Now, you may want to display or execute some HTML codes when the chat box is not visible (eg. the Message Dashboard page) and when the chat box is visible (eg. the Home/News Feed page). Here's the code that does the magic.


{if $linkto_chat eq true}

<HTML to execute when logged in>

{else}

<HTML to execute when not logged in>

{/if}


To be continued on Tip #2...


Excerpts from the forthcoming book: The GROU.PS Founder's Companion: 100 Tips on Growing a Large and Successful Social Network on GROU.PS

okorochigozie 5 years ago
ActivityRank:

hi bro the code is confusin
Katin femi 4 years ago
ActivityRank: 2
Please how do i get the professional template as Lagbook. I truly need it. Please any body that can give me usefully information will be appreciated.
mp admin 4 years ago
ActivityRank: 2
Hey Emre my forums have been broke for over a week i have four accounts with u guys and just bought a fifth a platinum annual and plan on buyig 30 to 50 platinum annual plans, talk to jennifer i worked with her for 2 months on pricing... If i do not get a response soon I will take my 18k a year elsewhere email on this specific account is admin@thesexyescort.com
Reduan 31 months ago
ActivityRank: 6
Sometime money cannot buy everything you want bro.. You must learnt how to code too..  learnt how to use HTML, CSS and many more.. you can do more then you can imagine..

Top Contributors

1366
mephIStO
1171
jimbowales2011
897
asukru.goksu
590
Emre Sokullu
577
netgay