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

Rosas † Negras replied to Bizz's discussion
Ning: Why does it not show who added music or a tab for My Music ? Essential For Moderation
"here is the reason I chose to upload only I"
11 hours ago
⚡JFarrow⌁ replied to Bizz's discussion
Tip: Resize your Social Channels Video
"awesome... thanks Bizz!"
12 hours ago
Bizz posted a discussion
Either I am totaly missing something but l can't seem to see anywhere that says who added a playlis…
12 hours ago
Bizz replied to Bizz's discussion
Tip: Profile Themes And Code
"Oh not sure if you seen the Game Of Thrones theme but I will be adding a small series of these and…"
15 hours ago
Bizz replied to Bizz's discussion
Tip: Profile Themes And Code
"Thanks, yes this is the first version of this and will be adding more to it so members can also cha…"
15 hours ago
J.Ayvar replied to Bizz's discussion
Tip: Profile Themes And Code
" Wow, I was pending this update and finally see it. Everything that can be done creatively in Ning…"
17 hours ago
Rosas † Negras replied to Bizz's discussion
Tip: Resize your Social Channels Video
"thank you very much my Master"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"I waited two days ... and today the answer I have to pay ... I told him that I would have a discuss…"
yesterday
Bizz posted a discussion
If you use the css section quite a bit like I do you may find the box a little limited in it's heig…
yesterday
Bizz posted a discussion
Ning have changed the layout for the social channels and so we have a small video in the middle of…
yesterday
Bizz replied to Bizz's discussion
Tip: How I added Music To A Page
"Thanks Charles, no unfortunatly not it just a way to get the music page onto a page
 "
yesterday
Bizz replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"The agent has got this wrong as that is what you pay for. Have you got it set that the option to re…"
yesterday
More…

Meanwhile, you can check our social media channels