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

Tip: How I added Music To A Page

As there is no Add Content for the music to be added into a module on a page we can do so by iframing a page into a html module on a page.

You can see I added one here : https://jr-images.ning.com/

First we add some css to our design studio custom css

/** MUSIC PLAYER ON HOME PAGE **/
.musicApp iframe{width:100%; height:100vh; max-height:530px;}
.musicApp-block{ padding:5px }
.musicApp-block .module-header{margin: 10px; padding:0px }
.musicApp-block .module-name{ font-size: 1.4rem }
@media only screen and (min-width:480px){
.audioPage-player {
position:relative!important}
}

Next we need to add some custom code which goes in your Social Site Builder > Custom Code > End Of Page section

NOTE: ADD THE URL FOR YOUR MUSIC PAGE IN THE PART WHICH SAYS YOUR URL GOES HERE

<script>
x$(document).ready(function(){
x$('.musicApp-page').closest('.section-html').addClass('musicApp-block');
x$('<div class="musicApp-content"></div>').appendTo('.musicApp-page').hide();
x$('<div class="musicApp"><iframe src=" YOUR URL GOES HERE " frameborder="0" marginwidth="0" marginheight="0" scrolling="yes"></iframe></div>').appendTo('.musicApp-content');
x$(".musicApp iframe").load(function (){
x$('.musicApp iframe').contents().find("head").append(x$("<style type='text/css'> .before-content{display:none;} .content-header{display:none;} .site-headerFrame{display:none} .site-footerFrame{display:none} .ningbar{display:none} .banner-frame{display:none} .site-bodyFrame{padding-left:0px} .site-body{padding:0px} .content-body{padding:10px} .column-narrow{display:none} body::before{display:none!important} .central-content{min-width:100px} .audioPage{padding:10px} .audioPage{margin-top:0px} body{margin:0px} .central-content{padding-bottom:0px} .audioPage .module-header{padding:4px} .audioPage .module-header{margin: 0px 0 10px 0} .audioPage-player{position:relative!important}</style>"));
x$('.musicApp-content').show();
});
});
</script>

 

Now to add the music to a page we use the add content and select the html option. Give it a name then in the small toolbar click on the html button a copy this line into it and click save at the bottom. You can add music to any page using this method

<div class="musicApp-page"></div>

6612459865?profile=RESIZE_584x

And here is how it looks on my homepage

6612497479?profile=RESIZE_710x

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 –

Replies

  • This reply was deleted.
    • Thanks Tavolo, glad you found it useful

  • this is a great add on, I was wondering is there a way to track plays and or views with this?

    • Thanks Charles, no unfortunatly not it just a way to get the music page onto a page

       

  • By the way you can also use this to add the music to a members profile page so they can listen to music while in thier profile.At the moment it will show all the music as so far there is not a way to filter by member

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

    6907835288?profile=RESIZE_930x

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

Vander NG replied to Anastasia_Ning_Support's discussion
Mention feature
"I tested it again yesterday, it seems the NING Support has fixed the problem without notifying me. …"
4 hours ago
This Is bully replied to Anastasia_Ning_Support's discussion
Mention feature
"The notification email was from a .Ning.com domain I went to my domain host which is go daddy and…"
9 hours ago
Max Ning Support is now friends with Rosas † Negras and kostasgr
20 hours ago
Vander NG replied to Anastasia_Ning_Support's discussion
Mention feature
"Thanks!  So you got the notification email from this new feature, with the same sender as all other…"
yesterday
This Is bully replied to Anastasia_Ning_Support's discussion
Mention feature
"You need to set up an MX record with your domain provider in order to enable this feature."
yesterday
Ana Massien replied to Anastasia_Ning_Support's discussion
Mention feature
"About time, ning. Yes, will it be added to over all network entirely? 
 "
yesterday
Ana Massien shared their discussion on Facebook
yesterday
Ana Massien liked Anastasia_Ning_Support's discussion Mention feature
yesterday
Rosas † Negras posted a discussion
impossible to work in the codes does not allow to add codes, modify or other
yesterday
Rosas † Negras liked Max Ning Support's profile
Friday
Max Ning Support is now a member of Ning Creators Social Network
Friday
Jen liked Anastasia_Ning_Support's discussion Mention feature
Thursday
More…

Meanwhile, you can check our social media channels