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

Alex - Rosas † Negras posted a discussion
yesterday
Alex - Rosas † Negras replied to Suave's discussion
I AM LOOKING FOR DEVELOPER ASSISTANCE WITH ADDING AUTOMATIC MUSIC TO MY HOME PAGE
"if you need I'm here, if you look in my discussions you will also find the playstil"
May 23
Alex - Rosas † Negras replied to ⚡JFarrow⌁'s discussion
What is going on with Ning? What Do We have to Look Forward To?
"Bizz ⚡JFarrow⌁ 
I'm sorry that many like us have worked so hard and given up, but at least I'm…"
May 23
⚡JFarrow⌁ posted a discussion
Back in the day, this community was jumping with activity.   But since the Ukraine war broke out we…
May 22
⚡JFarrow⌁ and Truebook are now friends
May 22
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I want to thank JOHN BIZLEY ( BIZZ) for his invaluable help, active icons on the Ning bar,CODES ADDED
"A thousand thanks"
May 20
Alex - Rosas † Negras replied to Pam Givens's discussion
Landing Page
"Pam Givens this is an example i created of an old 3.0 site"
May 20
Alex - Rosas † Negras replied to Pam Givens's discussion
Landing Page
""
May 20
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
Sorry for my absence
"Pam Givens hi my friend, yes everything is ok a big hug"
May 19
Alex - Rosas † Negras replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"⚡JFarrow⌁  hi my bro! the situation is sad, Biz and all the programmers are missing, once we all…"
May 19
Alex - Rosas † Negras and Truebook are now friends
May 19
Melissa V updated their profile
May 7
More…

Meanwhile, you can check our social media channels