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

 

 HERE IS ALL THE CODE ETC

You can also find the code here: https://jr-images.ning.com/general-forum/sharing-feature

Here is the code used for the Sharing Feature that I created and how to set it up.

Pages this will work on: Articles, Forum, Blog, Photos, Videos, Events and Groups ( note: for the groups it will not work on the pages in the group but will share the group from the group list page )

Note: If a page is marked for members only etc and not public then it will still be shared to the activity feed but content or images will not be visible as in the example below

Private Post Example

10091002297?profile=RESIZE_584x

First thing we need to do is add the code, first will be the CSS then we will add the main custom code, there are two options to add the main code so please only choose one of them.

Once the code is added it only needs to be done once so no need to add the code for each page instance. To add the share to the pages we will be adding modules for that.

Ok so let's add the CSS first which goes in your Design Studio > Custom CSS

 

/******* NEW SHARING LAYOUT V10.0 *******/

@media screen and (max-width: 769px) {
.feed-story .media-frame > .media-body {
overflow: visible!important;
}
}
.sharingContainer-Actual .activityFeed-close.activity-close{
display:none!important;
}
.sharingContainer-Actual .activityFeed-headline,
.sharingContainer-Actual .activityFeed-content.media-frame,
.sharingContainer-Actual .activityFeed-avatar{
pointer-events:none;
}
.sharingOverlay{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.5);
overflow:hidden;
z-index:9999;
}
.sharingOverlay.active{
display:block!important;
}
.sharingWrapper-container{
width: 100%;
height: 100%;
position: relative;
z-index: 10000;
overflow:auto;
}
.sharingWrapper-inner{
width:100%;
max-width: 500px;
background-color: white;
padding: 10px;
display: block;
border-radius: 6px;
border: solid 10px cornflowerblue;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: auto;
}
.sharingWrapper-inner h1{
background-color: royalblue;
color: white;
padding: 10px;
margin-bottom: 10px;
font-size:16px;
font-family: 'Roboto', sans-serif;
}
.sharingFooter{
padding: 10px;
border-top: solid 1px lightgray;
margin-top: 10px;
}
.sharing-footerButtons{
display: flex;
align-items: center;
align-content: center;
justify-content: space-between;
}
.sharingComplete-footer .sharing-footerButtons{
justify-content: flex-end;
}
.sharingButtons{
width: 100px;
border: none;
border-radius: 4px;
border:solid 3px #e3e3e3;
margin:4px;
font-family: 'Roboto', sans-serif;
}
.sharingButtons:hover{
background-color:royalblue;
color:white;
}
/* This is the title taken from the page or group being shared*/
.sharingPage-title,
.sharingPage-title a,
.sharingPage-title .groupHub-groupTitle,
.sharingPage-title .groupHub-groupTitle > span{
pointer-events:none;
background-color:transparent;
display:block;
font-size:20px;
color:#5336bb;
padding: 0px 4px;
text-align:left;
font-weight:bold;
font-family: 'Roboto', sans-serif;
}
.sharedTitle{
display:none;
}
.sharingPage-title .entry-title{
margin-bottom:15px;
}
.saySomething-div{
margin-top:15px;
}
.saySomething-div > h3{
font-size:12px;color: gray;
margin-bottom: 3px;
}
.saySomething{
width:100%;
}
.shareTools{
display: flex;
align-content: center;
align-items: center;
justify-content: flex-end;
margin-bottom:10px;
z-index:2;
position:relative;
}
/*The share button*/
.shareTools-share, .shareTools-share-group{
font-size: 12px;
background-color: #f0f2f0;
color: #606f5f!important;
padding: 4px 5px;
margin: 0;
border: solid 1px lightblue;
transition:0.2s;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
}
.shareTools-share >span, .shareTools-share-group >span{
font-size: 16px;
margin-left: 5px;
}
.shareTools-share:hover, .shareTools-share-group:hover{
background-color:royalblue;
color:white!important;
text-decoration:none!important;
transition:0.2s
}
.shareTools-share-group{
margin-top:4px;
margin-right:4px;
}
.shared-Group .activityFeed-headline .groupHeader-groupName {
margin-top:10px;
font-size:20px;
line-height:1;
}
/** hide the default site image so it doesn't show when loading the group image **/
.shared-Group .activityFeed-content a.media-img img{
display:none;
}
.shared-Group .groupHeader-image{
background-size:cover;
width:180px;
height:180px;
}
.shared-Group .activityFeed-detailTitle.create_status a + br{
display:none;
}
.shared-Group .activityFeed-detailTitle.create_status > a:first-of-type{
padding-bottom:2px;
}
.shared-Group .activityFeed-detail{
display:none;
}
.shared-Group .eventPage-image-wrapper{
text-align:center;
}
.sharedPost-activity .activityFeed-detailTitle.create_status {
display:block;
width:100%;
padding-top: 15px;
font-weight:600;
font-family:arial;
font-size:15px;
letter-spacing:0.02em;
}
.sharedPost-noImage .eventPage-image-wrapper img{ display:none!important }
.sharedPost-hasImage .eventPage-image-wrapper img{ display:block!important }

@media screen and (min-width: 969px) {
.sharedPost-activity .activityFeed-detailTitle.create_status {
padding-top:5px;
}}
@media screen and (max-width: 481px) {
.sharedPost-activity .activityFeed-detailTitle.create_status {
padding-top:40px;
}}
.sharedPost-activity .feedEvent-createStatus .activityFeed-headline{
padding-right:2px;
}
/* Stops the status link from being clicked **/
.sharedPost-activity header:nth-child(1) > a:nth-child(2){ pointer-events:none}
.shared-Group header:nth-child(1) > a:nth-child(2){ pointer-events:none}
/*Removes the add comment link for shared items **/
.sharedPost-activity .activityFeed-commentFormDisplay,
.shared-Group .activityFeed-commentFormDisplay{
display:none;
}
.sharedPost-activity.sharedEvent .eventPage-image-wrapper img{
width:180px;
height:180px;
}

 

For the custom code we have two options, as there is quite a bit of code. The first option is just to add straight into your custom code box. The second option is to add the code to your file manager then link to it from the custom code box which will save space.

OPTION 1  This code goes into your Social Site Builder > Custom Code > End Of Page  ( do not copy this line with the code )

 

<script>
//SHARING VER10 CODE JBIZLEY 2022
x$(document).ready(function(){
x$('.discussionDetailPage .entry-content,.articleDetailPage .entry-content, .blogDetailPage .entry-content').each(function() {
if (x$(this).find('img').length <= 0) {
x$(this).closest('body').addClass('sharing-noImage');
} else {
x$(this).closest('body').addClass('sharing-hasImage').removeClass('sharing-noImage');
}
});
x$('.blogDetailPage .blogDetailPage-image').closest('body').addClass('sharing-hasImage');
x$('.articleDetailPage .articleDetailPage-image').closest('body').addClass('sharing-hasImage');
x$('.photoDetailPage').closest('body').addClass('sharePhoto sharing-hasImage');
x$('.videoDetailPage').closest('body').addClass('shareVideo sharing-hasImage');
x$('.eventDetailPage').closest('body').addClass('shareEvent sharing-hasImage');
if (ning.CurrentProfile === null){
x$('body').addClass('visitor');
}else {
x$('body').addClass('isMember');
}
const sharingWrapperContainer = x$('<div class="sharingOverlay"><div class="sharingWrapper-container"><div class="sharingWrapper-inner"><section class="sharingContainer-Part1"><header class="sharingHeader"><h1 class="sharingTitle">Sharing</h1></header><div class="sharingStart-container"><h3 class="sharingPage-title"></h3><span class="sharedTitle"></span><span class="sharingLink"></span><div class="saySomething-div"><h3>Say Something About This ?</h3><textarea class="saySomething" placeholder="You can add a short message about the post here..."></textarea></div><footer class="sharingStart-footer sharingFooter"><div class="sharing-footerButtons"><button class="shareCancel sharingButtons" title="Cancel">Cancel</button><button class="shareThis-button sharingButtons" title="Share This">Share</button></footer></section><section class="sharingFinish"><h1 class="finishTitle">Sharing Complete</h1><footer class="sharingComplete-footer sharingFooter"><div class="sharing-footerButtons"><button class="sharingFinish-close sharingButtons" title="Finish Sharing">Finish</button></div></section></div></div>').prependTo('body').hide();
let shareContainerActual = x$('.module-name:contains("sharingContainer-page")').closest('.section-activity').addClass('sharingContainer-Actual').hide();//this is the actual activity section
let hasSharing = x$('.sharingContainer-Actual').closest('body').addClass('sharingAvailable'); // if an activity has been added to a page for sharing
let shareActivitySection = x$('.sharingContainer-Actual .feed-story, .sharingContainer-Actual .activityFeed-updateButton,.sharingContainer-Actual .activityFeed-moreOldItemsButton').hide();
let attachActivity = x$('.sharingContainer-Actual').appendTo('.sharingActivity-container');
let shareOptions = x$('<div class="shareTools"><a class="shareTools-share" title="Share Post" href="#/" >Share This<span>&#8634</span></a><a class="shareTools-share-group" title="Share Group" href="#/" >Share Group<span>&#8634</span></a></div>').insertBefore('.discussionDetailPage-mainSection .entry-headline, .videoDetailPage .entry-headline, .photoDetailPage .entry-headline, .articleDetailPage .entry-headline, .blogDetailPage .entry-headline, .eventDetailPage .entry-headline,.pollDetailPage .entry-headline, .groupHub-groupTitleContainer').hide();
x$('body.sharing-noImage .sharedTitle').text("Shared Post....");
x$('body.sharing-hasImage .sharedTitle').text("Shared Post.....");
x$('body.sharePhoto.sharing-hasImage .sharedTitle').text("Shared Photo.....");
x$('body.shareVideo.sharing-hasImage .sharedTitle').text("Shared Video.....");
x$('body.shareEvent.sharing-hasImage .sharedTitle').text("Shared Event.....");
x$('body.visitor .shareTools').remove();
x$('.sharingLink').hide();
x$('.sharingAvailable .shareTools').show();
x$('.sharingAvailable .shareTools-share-group ').hide();
x$('.sharingAvailable .groupHub-group .shareTools-share').hide();
x$('.sharingAvailable .groupHub-group .shareTools-share-group').show();
x$('.sharingFinish').hide();
// Share Button
x$('.shareTools-share').click(function(){
x$(this).closest('.section-primaryContent').addClass('isSharing');
var PostsUrl = window.location.href;
x$('.sharingLink').append(PostsUrl);
x$('.isSharing .entry-title').clone().appendTo('.sharingPage-title');
x$('.sharingOverlay').addClass('active');
});
//Share Group Button
x$('.shareTools-share-group').click(function(){
x$('.groupHub-group').removeClass('sharingGroup');
var GroupUrl=x$(this).closest('a.matrix-media-1-1').attr('href');
x$(this).closest('.groupHub-group').addClass('sharingGroup');
x$('.sharingGroup .groupHub-groupTitle').clone().appendTo('.sharingPage-title');
x$('.sharingLink').append(GroupUrl);
x$('.sharingOverlay').addClass('active');
x$('.sharedTitle').text("Shared Group.....");
});
// Share Cancel Button
x$('.shareCancel').click(function(){
x$('.sharingOverlay').removeClass('active');
x$('.section-primaryContent').removeClass('isSharing');
x$('.shareTools-share').hide();
x$('.sharingGroup .shareTools-share-group').hide();
});
// Share This Button
x$('.shareThis-button ').click(function(){
var sharingPost =x$('.sharedTitle').text();
var sharingValue = x$('.sharingLink').text();
var sharingAddTitle =x$('.isSharing .entry-title').text().toUpperCase();
var saySomethingTxt = x$('.saySomething').val();
x$('.js-statusForm .input-full').append(sharingPost +"\n"+ sharingValue +"\n"+ sharingAddTitle +"\n"+ saySomethingTxt);
x$('.js-statusForm .button-primary').trigger('click');
x$('.sharingContainer-Part1').hide();
x$('.sharingFinish').show();
});
// Share Finish Button
x$('.sharingFinish-close').click(function(){
x$('.sharingLink, .sharingPage-title').text('');
x$('.sharingWrapper-container').removeClass('active');
x$('.sharingAvailable .shareTools, .sharingAvailable .shareTools-share-group').hide();
x$('.sharingOverlay').removeClass('active');
x$('.section-primaryContent').removeClass('isSharing');
});
// Sharing Into Activity Feed
x$('.activityFeed-detailTitle.create_status:contains("Shared Group.....")').closest('.feed-story').addClass('sharedPost-activity shared-Group ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Post.....")').closest('.feed-story').addClass('sharedPost-activity sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Post...")').closest('.feed-story').addClass('sharedPost-activity sharedPost-noImage');
x$('.activityFeed-detailTitle.create_status:contains("Shared Photo.....")').closest('.feed-story').addClass('sharedPost-activity sharedPhoto sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Video.....")').closest('.feed-story').addClass('sharedPost-activity sharedVideo sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Event.....")').closest('.feed-story').addClass('sharedPost-activity sharedEvent sharedPost-hasImage ');
x$('.sharedPost-activity .activityFeed-headline').html(function() {
return x$(this).html().replace("posted a", "is sharing a");
});
x$('.sharedPost-activity.sharedEvent .activityFeed-headline').html(function() {
return x$(this).html().replace("is sharing a", "is sharing an");
});
x$('.sharedPost-activity header:nth-child(1) > a:nth-child(2)').text('post');
x$('.sharedPost-activity.sharedPhoto header:nth-child(1) > a:nth-child(2)').text('photo');
x$('.sharedPost-activity.sharedVideo header:nth-child(1) > a:nth-child(2)').text('video');
x$('.sharedPost-activity.sharedEvent header:nth-child(1) > a:nth-child(2)').text('event');
x$('.shared-Group header:nth-child(1) > a:nth-child(2)').text('group');
x$('.feedEvent-createStatus.shared-Group a.media-img').each(function() {
var url=x$(this).attr('href');
x$(this).load(url + " .groupHeader-image, .groupHeader-groupName");
});
// Sharing Into Activity Feed updating the new items with code on click of the update buttons rather than the code running all the time on the activity feed
x$('.activityFeed-updateButton.activityFeed-moreOldItemsButton, .activityFeed-updateButton.activityFeed-moreNewItemsButton').click(function(){
x$('.activityFeed').ajaxStop(function() {
x$('.activityFeed-detailTitle.create_status:contains("Shared Group.....")').closest('.feed-story').addClass('sharedPost-activity shared-Group ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Post.....")').closest('.feed-story').addClass('sharedPost-activity sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Post...")').closest('.feed-story').addClass('sharedPost-activity sharedPost-noImage');
x$('.activityFeed-detailTitle.create_status:contains("Shared Photo.....")').closest('.feed-story').addClass('sharedPost-activity sharedPhoto sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Video.....")').closest('.feed-story').addClass('sharedPost-activity sharedVideo sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Event.....")').closest('.feed-story').addClass('sharedPost-activity sharedEvent sharedPost-hasImage ');
x$('.sharedPost-activity .activityFeed-headline').html(function() {
return x$(this).html().replace("posted a", "is sharing a");
});
x$('.sharedPost-activity header:nth-child(1) > a:nth-child(2)').text('post');
x$('.sharedPost-activity.sharedPhoto header:nth-child(1) > a:nth-child(2)').text('photo');
x$('.sharedPost-activity.sharedVideo header:nth-child(1) > a:nth-child(2)').text('video');
x$('.sharedPost-activity.sharedEvent header:nth-child(1) > a:nth-child(2)').text('event');
x$('.shared-Group header:nth-child(1) > a:nth-child(2)').text('group');
x$('.feedEvent-createStatus.shared-Group a.media-img').each(function() {
var url=x$(this).attr('href');
x$(this).load(url + " .groupHeader-image, .groupHeader-groupName");
});
});
});
});
</script>

 

OPTION 2 Linking to the code ( do not copy this line with the code )

To link the code we first need to copy the code to a text editor like wordpad or something like that. The code does not have the begining Script tags or the end tags. Code is below without the tags

//SHARING VER10 CODE JBIZLEY 2022
x$(document).ready(function(){
x$('.discussionDetailPage .entry-content,.articleDetailPage .entry-content, .blogDetailPage .entry-content').each(function() {
if (x$(this).find('img').length <= 0) {
x$(this).closest('body').addClass('sharing-noImage');
} else {
x$(this).closest('body').addClass('sharing-hasImage').removeClass('sharing-noImage');
}
});
x$('.blogDetailPage .blogDetailPage-image').closest('body').addClass('sharing-hasImage');
x$('.articleDetailPage .articleDetailPage-image').closest('body').addClass('sharing-hasImage');
x$('.photoDetailPage').closest('body').addClass('sharePhoto sharing-hasImage');
x$('.videoDetailPage').closest('body').addClass('shareVideo sharing-hasImage');
x$('.eventDetailPage').closest('body').addClass('shareEvent sharing-hasImage');
if (ning.CurrentProfile === null){
x$('body').addClass('visitor');
}else {
x$('body').addClass('isMember');
}
const sharingWrapperContainer = x$('<div class="sharingOverlay"><div class="sharingWrapper-container"><div class="sharingWrapper-inner"><section class="sharingContainer-Part1"><header class="sharingHeader"><h1 class="sharingTitle">Sharing</h1></header><div class="sharingStart-container"><h3 class="sharingPage-title"></h3><span class="sharedTitle"></span><span class="sharingLink"></span><div class="saySomething-div"><h3>Say Something About This ?</h3><textarea class="saySomething" placeholder="You can add a short message about the post here..."></textarea></div><footer class="sharingStart-footer sharingFooter"><div class="sharing-footerButtons"><button class="shareCancel sharingButtons" title="Cancel">Cancel</button><button class="shareThis-button sharingButtons" title="Share This">Share</button></footer></section><section class="sharingFinish"><h1 class="finishTitle">Sharing Complete</h1><footer class="sharingComplete-footer sharingFooter"><div class="sharing-footerButtons"><button class="sharingFinish-close sharingButtons" title="Finish Sharing">Finish</button></div></section></div></div>').prependTo('body').hide();
let shareContainerActual = x$('.module-name:contains("sharingContainer-page")').closest('.section-activity').addClass('sharingContainer-Actual').hide();//this is the actual activity section
let hasSharing = x$('.sharingContainer-Actual').closest('body').addClass('sharingAvailable'); // if an activity has been added to a page for sharing
let shareActivitySection = x$('.sharingContainer-Actual .feed-story, .sharingContainer-Actual .activityFeed-updateButton,.sharingContainer-Actual .activityFeed-moreOldItemsButton').hide();
let attachActivity = x$('.sharingContainer-Actual').appendTo('.sharingActivity-container');
let shareOptions = x$('<div class="shareTools"><a class="shareTools-share" title="Share Post" href="#/" >Share This<span>&#8634</span></a><a class="shareTools-share-group" title="Share Group" href="#/" >Share Group<span>&#8634</span></a></div>').insertBefore('.discussionDetailPage-mainSection .entry-headline, .videoDetailPage .entry-headline, .photoDetailPage .entry-headline, .articleDetailPage .entry-headline, .blogDetailPage .entry-headline, .eventDetailPage .entry-headline,.pollDetailPage .entry-headline, .groupHub-groupTitleContainer').hide();
x$('body.sharing-noImage .sharedTitle').text("Shared Post....");
x$('body.sharing-hasImage .sharedTitle').text("Shared Post.....");
x$('body.sharePhoto.sharing-hasImage .sharedTitle').text("Shared Photo.....");
x$('body.shareVideo.sharing-hasImage .sharedTitle').text("Shared Video.....");
x$('body.shareEvent.sharing-hasImage .sharedTitle').text("Shared Event.....");
x$('body.visitor .shareTools').remove();
x$('.sharingLink').hide();
x$('.sharingAvailable .shareTools').show();
x$('.sharingAvailable .shareTools-share-group ').hide();
x$('.sharingAvailable .groupHub-group .shareTools-share').hide();
x$('.sharingAvailable .groupHub-group .shareTools-share-group').show();
x$('.sharingFinish').hide();
// Share Button
x$('.shareTools-share').click(function(){
x$(this).closest('.section-primaryContent').addClass('isSharing');
var PostsUrl = window.location.href;
x$('.sharingLink').append(PostsUrl);
x$('.isSharing .entry-title').clone().appendTo('.sharingPage-title');
x$('.sharingOverlay').addClass('active');
});
//Share Group Button
x$('.shareTools-share-group').click(function(){
x$('.groupHub-group').removeClass('sharingGroup');
var GroupUrl=x$(this).closest('a.matrix-media-1-1').attr('href');
x$(this).closest('.groupHub-group').addClass('sharingGroup');
x$('.sharingGroup .groupHub-groupTitle').clone().appendTo('.sharingPage-title');
x$('.sharingLink').append(GroupUrl);
x$('.sharingOverlay').addClass('active');
x$('.sharedTitle').text("Shared Group.....");
});
// Share Cancel Button
x$('.shareCancel').click(function(){
x$('.sharingOverlay').removeClass('active');
x$('.section-primaryContent').removeClass('isSharing');
x$('.shareTools-share').hide();
x$('.sharingGroup .shareTools-share-group').hide();
});
// Share This Button
x$('.shareThis-button ').click(function(){
var sharingPost =x$('.sharedTitle').text();
var sharingValue = x$('.sharingLink').text();
var sharingAddTitle =x$('.isSharing .entry-title').text().toUpperCase();
var saySomethingTxt = x$('.saySomething').val();
x$('.js-statusForm .input-full').append(sharingPost +"\n"+ sharingValue +"\n"+ sharingAddTitle +"\n"+ saySomethingTxt);
x$('.js-statusForm .button-primary').trigger('click');
x$('.sharingContainer-Part1').hide();
x$('.sharingFinish').show();
});
// Share Finish Button
x$('.sharingFinish-close').click(function(){
x$('.sharingLink, .sharingPage-title').text('');
x$('.sharingWrapper-container').removeClass('active');
x$('.sharingAvailable .shareTools, .sharingAvailable .shareTools-share-group').hide();
x$('.sharingOverlay').removeClass('active');
x$('.section-primaryContent').removeClass('isSharing');
});
// Sharing Into Activity Feed
x$('.activityFeed-detailTitle.create_status:contains("Shared Group.....")').closest('.feed-story').addClass('sharedPost-activity shared-Group ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Post.....")').closest('.feed-story').addClass('sharedPost-activity sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Post...")').closest('.feed-story').addClass('sharedPost-activity sharedPost-noImage');
x$('.activityFeed-detailTitle.create_status:contains("Shared Photo.....")').closest('.feed-story').addClass('sharedPost-activity sharedPhoto sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Video.....")').closest('.feed-story').addClass('sharedPost-activity sharedVideo sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Event.....")').closest('.feed-story').addClass('sharedPost-activity sharedEvent sharedPost-hasImage ');
x$('.sharedPost-activity .activityFeed-headline').html(function() {
return x$(this).html().replace("posted a", "is sharing a");
});
x$('.sharedPost-activity.sharedEvent .activityFeed-headline').html(function() {
return x$(this).html().replace("is sharing a", "is sharing an");
});
x$('.sharedPost-activity header:nth-child(1) > a:nth-child(2)').text('post');
x$('.sharedPost-activity.sharedPhoto header:nth-child(1) > a:nth-child(2)').text('photo');
x$('.sharedPost-activity.sharedVideo header:nth-child(1) > a:nth-child(2)').text('video');
x$('.sharedPost-activity.sharedEvent header:nth-child(1) > a:nth-child(2)').text('event');
x$('.shared-Group header:nth-child(1) > a:nth-child(2)').text('group');
x$('.feedEvent-createStatus.shared-Group a.media-img').each(function() {
var url=x$(this).attr('href');
x$(this).load(url + " .groupHeader-image, .groupHeader-groupName");
});
// Sharing Into Activity Feed updating the new items with code on click of the update buttons rather than the code running all the time on the activity feed
x$('.activityFeed-updateButton.activityFeed-moreOldItemsButton, .activityFeed-updateButton.activityFeed-moreNewItemsButton').click(function(){
x$('.activityFeed').ajaxStop(function() {
x$('.activityFeed-detailTitle.create_status:contains("Shared Group.....")').closest('.feed-story').addClass('sharedPost-activity shared-Group ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Post.....")').closest('.feed-story').addClass('sharedPost-activity sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Post...")').closest('.feed-story').addClass('sharedPost-activity sharedPost-noImage');
x$('.activityFeed-detailTitle.create_status:contains("Shared Photo.....")').closest('.feed-story').addClass('sharedPost-activity sharedPhoto sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Video.....")').closest('.feed-story').addClass('sharedPost-activity sharedVideo sharedPost-hasImage ');
x$('.activityFeed-detailTitle.create_status:contains("Shared Event.....")').closest('.feed-story').addClass('sharedPost-activity sharedEvent sharedPost-hasImage ');
x$('.sharedPost-activity .activityFeed-headline').html(function() {
return x$(this).html().replace("posted a", "is sharing a");
});
x$('.sharedPost-activity header:nth-child(1) > a:nth-child(2)').text('post');
x$('.sharedPost-activity.sharedPhoto header:nth-child(1) > a:nth-child(2)').text('photo');
x$('.sharedPost-activity.sharedVideo header:nth-child(1) > a:nth-child(2)').text('video');
x$('.sharedPost-activity.sharedEvent header:nth-child(1) > a:nth-child(2)').text('event');
x$('.shared-Group header:nth-child(1) > a:nth-child(2)').text('group');
x$('.feedEvent-createStatus.shared-Group a.media-img').each(function() {
var url=x$(this).attr('href');
x$(this).load(url + " .groupHeader-image, .groupHeader-groupName");
});
});
});
});

Once you have added the code to your text editor save the file with a .js extension. You can name the file whatever you want but it MUST have this extension. Remember where you saved it as will need to add this later to your file manager

So for instance you would save it something like this      sharingV10.js

When saved it would look like this in the place you saved it:  10090852475?profile=RESIZE_710xNow we have that file we can now add it to our file manager ready for us to link to so head over to your Social Site Builder and select the File Manager from the list.

Next we need to add the file

10090855489?profile=RESIZE_710x10090855880?profile=RESIZE_710x

After you click the Add Files it will now be in your File Manager like this

10090856259?profile=RESIZE_710xWhile we are here we might as well copy the link we need for the file to add to our code box, so go ahead and open a text editor again ready to copy the link to so we can use it later as will be easier to add the link to the line of code we will need.

10090858461?profile=RESIZE_710xNow we have the link we need to insert it into the line of code below

<!-SHARING->
<script Class src="LINK WILL GO HERE"></script>

So copy the above then add you link you saved in the part LINK WILL GO HERE making sure you keep the quotation marks at each end so now it will look something like this but with your link in not mine as in the example below

<!-SHARING->
<script Class src="https://storage.ning.com/topology/rest/1.0/file/get/10075731267?profile=original"></script>

Next we simple add this to our Social Site Builder > Custom Code > End of page

Example

10090863483?profile=RESIZE_710xOK so now we have all the code added that we need to let's now add the modules to the pages for it all to work. This is how you will add the feature to all your pages where you want sharing available

 For this we are going to use the Activity content type for our shared content to be entered into. This is easy to do so head over to Your Social Site Builder then select on the left one of the pages you want it to be added to like a Forum for example, then click the little Add Content button and in the box which opens choose Content Type Activity

10090896889?profile=RESIZE_710xNext we Need to give it a title THIS IS IMPORTANT TO ADD EXACTLY AS SHOWN

10090904669?profile=RESIZE_710xNow we can remove the ticks from the other box's etc so it looks like this for the options

10090906864?profile=RESIZE_400xHit the Update / Save button and this will now be added to the page, you can have it where ever you want as this will not be seen but I tned to have it below my content as you can see in the Add Title image.

Ok that's it all done and sharing will now be available. To add sharing to more pages you just follow the instructions above for adding the Activity Module.

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

Join Ning Creators Social Network

Votes: 1
Email me when people reply –

Replies

  • NC for Hire

    Whoa.... this looks incredible.... excited about it!  hope you are doing well Bizz!

    • Thanks Justin, yep got a few projects on the go lol. You are most welcome to try it out as it is available on my site. Also got a new following and featured indicators project on the go so as a member you can see which posts you are following and which have been featured as well, so far it's on forums and blogs. This will help finding the posts you want to stop following so you can stop any emails coming through for it. Will post more on this soon but if you go to a forum post on my site and follow it you will see them appear for you.

      • Terrific options Bizz.  

  • New Addition For Sharing Groups 😃

    9655464100?profile=RESIZE_930x9655468084?profile=RESIZE_930x

     

  • Outstanding!  I'll be following.............

    • Hi Kos, just sent an email about this to you :-)

  • you did it, you are a monster lol

  • Been updating the sharing feature, here is a video for a short demo. 😃👍

    • Bizz  it's wonderful!!! I'm sure you've already tried to integrate in the box mention option .

This reply was deleted.
 

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

⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ updated their profile photo
20 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Friends Module
"Thanks @Bizz!"
yesterday
Bizz replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Friends Module
"Sometimes this happens because it's still in the cache of the browser, if you go to that friends…"
yesterday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ shared their discussion on Facebook
yesterday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ liked ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion Friends Module
yesterday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ posted a discussion
Friends module is not updating when a friend is removed or suspended from the network. In the admin…
yesterday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ shared their discussion on Facebook
Saturday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ liked ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion Groups on Creators
Saturday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ posted a discussion
I made a group for my themes, but its still in pending approval can someone please allow or…
Saturday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ posted photos in Everyday Themes
Wednesday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ posted a discussion in Everyday Themes
Specify what themes you are looking for and get themes for free.Let us help you find a graphic or…
Wednesday
Rosas † Negras posted a discussion
 textarea.input-full { border: 2px groove #FFF;padding:border: 0px solid rgba(100, 100, 100, 1);…
Tuesday
More…

Meanwhile, you can check our social media channels