Current status of the Ning Platform is always available on the Ning Status Blog.

Tip: Hide and Show Social Sharing Buttons

You may have seen I provided a tip for showing and hiding the members bio and was asked if this could be done with the social buttons so here is the tip to be able to do that.

Note: This will work accross your whole site as these buttons will show above blogs etc if you have set them to show there as well. There are two options of code below which will allow you to choose between only showing this tip on profiles only.

You can see them working here: https://jr-images.ning.com/members/bizz

6181784252?profile=RESIZE_710xDesktop View

6181793277?profile=RESIZE_710x6181799290?profile=RESIZE_710xMOBILE VIEW

6179406097?profile=RESIZE_584x6181927477?profile=RESIZE_584xEXAMPLE OF ABOVE BLOG PAGE

6182531461?profile=RESIZE_710x6182536676?profile=RESIZE_710x

Ok so we need to add some code to do this so we add some css and custom code

 

First we add some css and this goes in your Design Studio > Custom CSS

/* SOCIAL SHARING HIDE SHOW*/
a.Social-more-switch{
display:block;
padding : 5px 0px;
text-align:left
}
  a.Social-more-switch:hover{
cursor: pointer;
text-decoration: none!important;
outline: none!important;
}
.socialHasSwitch .socialSharingList.menu{
margin-top: 30px;
}
/* Animation of icons */
.socialSharingListItemColored{
margin:3px;
transition: all ease-in-out 300ms;
}
.socialSharingListItemColored:hover{
transition: all ease-in-out 300ms;
margin-top: -1px;
}

 

 This goes in your Social Site Builder > Custom Code > End Of Page section

THIS CODE IS FOR SHOWING ACROSS WHOLE SITE

<script>
x$(document).ready(function(){
// SHOW HIDE WHOLE SITE
var socialTitle = 'Social Sharing';
x$('<a class="Social-more-switch" alt="More" title="Show / Hide">&#9776 Social Sharing</a>').prependTo('.socialButtons');
x$('a.Social-more-switch').closest('.socialButtons').addClass('socialHasSwitch');
x$('.socialSharingList').hide();
x$('a.Social-more-switch').toggle(
function(){
x$('.socialSharingList').slideDown(300);
x$(this).html("&#9660 Social Sharing");
},
function(){
x$('.socialSharingList').slideUp(300);
x$(this).html("&#9776 Social Sharing");
});
});
</script>

 

 

This goes in your Social Site Builder > Custom Code > End Of Page section

THIS CODE IS FOR SHOWING IN ONLY PROFILES ONLY

 

<script>
x$(document).ready(function(){
// SHOW AND HIDE PROFILES ONLY
var socialTitle = 'Social Sharing';
x$('<a class="Social-more-switch" alt="More" title="Show / Hide">&#9776 Social Sharing</a>').prependTo('.profileCoverArea-socialActions .socialButtons');
x$('a.Social-more-switch').closest('.socialButtons').addClass('socialHasSwitch');
x$('.profileCoverArea-socialActions .socialSharingList').hide();
x$('a.Social-more-switch').toggle(
function(){
x$('.socialSharingList').slideDown(300);
x$(this).html("&#9660 Social Sharing");
},
function(){
x$('.socialSharingList').slideUp(300);
x$(this).html("&#9776 Social Sharing");
});
});
</script>

 

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

kostasgr liked Alex - Rosas † Negras's discussion I managed to add group video calling, if anyone is interested I will post the codes
Tuesday
Jords updated their profile
Tuesday
Steve C replied to ⚡JFarrow⌁'s discussion
What is going on with Ning? What Do We have to Look Forward To?
"Ning is based in California but operations are in Kyiv, Ukraine. Due to the war, operations may…"
Jul 6
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"⚡JFarrow⌁  
I'm working on the stories and I don't have time to work on the video call you just…"
Jun 28
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"if you want I'll give you the codes privately and we'll see if the two of us can make it perfect"
Jun 27
Eva and ⚡JFarrow⌁ are now friends
NC for Hire
Jun 25
⚡JFarrow⌁ replied to Eva's discussion
For three days now, my networks, Ning 2.0 and Ning 3.0, are incorrectly visible
"Ug... thats not right..  ill send you my phone number in messages and we'll talk it over."
Jun 24
Eva replied to Eva's discussion
Help Help Help
" I just started a test network on Ning. I'm having the same problems there too! No photos, in…"
Jun 21
Eva posted a discussion
Jun 21
Eva posted a discussion
For three days now, my two networks, Ning 2.0 and Ning 3.0, have been displayed incorrectly, they…
Jun 21
⚡JFarrow⌁ replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"looks interesting"
Jun 20
⚡JFarrow⌁ updated their profile photo
Jun 16
More…

Meanwhile, you can check our social media channels