Tip: Prevent Non Members Clicking On The Social Buttons And Display Member Only Option Message

[Bizz]

So here is a little tip so that non members cannot use the Social Buttons and when hovered over will display a message.

If you want to try it out just go to my site and find some some pages with Social Buttons On then hover over them and you will see the message. By the way If you have added my tips for hiding the profile stuff under the drop menu then this will still work as will display when you try to open the Social Menu.

My Site: https://jr-images.ning.com

First a little bit of custom code which goes in your Social Site Builder > Custom Code > End Of Page Section

<script>
x$(document).ready(function() {
if (ning.CurrentProfile === null){
x$('<div class="social-msg"></div>').prependTo('.entry-socialActions, .banner-socialActions, .socialActions');
}
});
</script>

Next some CSS which goes in your design studio custom css. If you do not want the Why not Sign Up Bit in the text then edit the css like this

Remove the parts in bold in this part

content: "MEMBER ONLY OPTION \A \A Why not sign up ?";

so it looks like this

content: "MEMBER ONLY OPTION";

 

/** NON MEMBER HOVER ON SOCIAL BUTTONS **/
.socialButtons, .entry-socialActions,
.banner-socialActions, .socialActions{
position:relative;
}
.social-msg{
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}

.social-msg:hover::before{
content: "MEMBER ONLY OPTION \A \A Why not sign up ?";
white-space: pre-wrap;
display: flex;
height:100px;
transition: All ease-in-out 300ms;
z-index:1000;
}
.social-msg::before {
content:" ";
display:flex;
height: 0px;
width: 250px;
background-color: rgba(65,105,225,0.85);
color: white;
border-radius: 10px;
transition: All ease-in-out 400ms;
align-content: center;
align-items: center;
justify-content: center;
box-shadow: 2px 4px 8px rgba(0,0,0,0.5);
z-index:1000;
position:absolute;
left:20px;
}