NEW Sharing Option I Have Been Working On ( Code Now Added: 11-02-22 )

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

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 )

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: Now 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

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

While 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.

Now 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

OK 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

Next we Need to give it a title THIS IS IMPORTANT TO ADD EXACTLY AS SHOWN

Now we can remove the ticks from the other box's etc so it looks like this for the options

Hit 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.

Replies

NC for Hire

⚡JFarrow⌁ September 29, 2021 at 1:09pm

★

★

★

★

★

★ ★ ★ ★ ★

Whoa.... this looks incredible.... excited about it! hope you are doing well Bizz!
- Bizz > ⚡JFarrow⌁ September 29, 2021 at 3:14pm
  
  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.
  - Pam Givens > Bizz October 7, 2021 at 6:12am
    
    Terrific options Bizz.
Bizz October 7, 2021 at 3:31pm

New Addition For Sharing Groups 😃
- NC for Hire
  
  ⚡JFarrow⌁ > Bizz February 21, 2022 at 10:27am
  
  wow... love it!
Kos December 15, 2021 at 1:08pm

Outstanding! I'll be following.............
- Bizz > Kos December 16, 2021 at 9:41am
  
  Hi Kos, just sent an email about this to you :-)
NC for Hire

Alex - Rosas † Negras December 16, 2021 at 1:30pm

you did it, you are a monster lol
Bizz January 26, 2022 at 4:00pm

Been updating the sharing feature, here is a video for a short demo. 😃👍
- NC for Hire
  
  Alex - Rosas † Negras > Bizz January 26, 2022 at 11:13pm
  
  Bizz it's wonderful!!! I'm sure you've already tried to integrate in the box mention option .