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

  • 6710618883?profile=RESIZE_584x

     
    thank you very much with your help I was able to reopen my old music site
  • 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

  • 7287739692?profile=RESIZE_930x

    Hi my friend ... how do I resize the player to make the album scroll arrows visible .. since the player is placed in the center on my site ... thanks in advance a hug
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

Luca Boscardelli left a comment on Creatori NING Italiani
"Buongiron. Qualcuno tra voi sviluppa app collegate alle API Ning?"
Jul 5
More…

Meanwhile, you can check our social media channels