soundcloud - FORUM - Ning Creators Social Network2024-03-29T08:54:40Zhttps://creators.ning.com/forum/topics/feed/tag/soundcloudNing 3.0 Tip: Insert Videos and Music Players on Profile Pageshttps://creators.ning.com/forum/topics/ning-3-0-tip-insert-videos-and-music-players-on-profile-pages2013-08-22T15:34:54.000Z2013-08-22T15:34:54.000ZSweetPotatohttps://creators.ning.com/members/SweetPotato<div><p>Hi all,</p>
<p><span style="color: #339966;" class="font-size-3"><strong>UPDATED 10th Jan 2015 and now compatible with v2 themes, and supported <a rel="nofollow" href="http://sweetpotato.me.uk/groups/ning-3-0-tips-hacks/forum/topic/video-music-players-on-profile-pages/" target="_blank">here</a>.<br></strong></span></p>
<p>Inspired by the conversation going on over <a href="http://creators.ning.com/xn/detail/4244211:Topic:1331881?xg_source=activity" target="_self">here</a>, I have spent today writing a hack so that members of your Ning 3.0 network can include YouTube, Vimeo, ReverbNation, SoundCloud etc embeds on their profile pages (like they can in text boxes on Ning 2.0).<br> <br> This places an embed below the member profile cover area, like so:<br> <br> <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/555982?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/555982?profile=RESIZE_1024x1024" width="600"></a></p>
<p>The script assumes that the embed code is iFrame based, as those eagle-eyed in the code stakes will soon see, and works by asking members to insert the embed code into a profile question.</p>
<p>Here is a step-by-step guide:</p>
<p><strong>1)</strong> Add a Profile Question to your Ning 3.0 site. Make it a <em><strong>"Website Address"</strong></em> answer and you MUST include the word 'embed' in your question. In this instance the question is<br> <br> <strong>Include a video or music player on your profile page by inserting <span style="color: #008000;">embed</span> code below</strong></p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/556007?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/556007?profile=original" width="670"></a>You might want to change the wording but make sure that <span style="color: #008000;">embed</span> is in there.</p>
<p><strong>2)</strong> Go to the Custom Code section of your Ning 3.0 site and add the following script to the <strong>End of Page Code box</strong>.</p>
<div style="background: #f9f9f9; padding: 5px;">
<br> <!-- PROFILE PAGE EMBED
<a href="http://www.SweetPotato.me.uk">www.SweetPotato.me.uk</a> -->
<br> <script>
<br> x$(document).ready(function() {
<br> if (x$('.aboutTab-question:contains("embed")').length > 0) {
<br> x$('.module-body.aboutMember').append('<div class="SP_Profile_Embed_Wrap"><div class="SP_Profile_Embed"></div></div>');
<br> }
<br> x$('.aboutTab-question:contains("embed")').remove();
<br> var embed = x$('.aboutTab-questionAndAnswer:contains("iframe")').text();
<br> x$('.SP_Profile_Embed').html(embed);
<br> x$('.SP_Profile_Embed').contents().filter(function(){ return this.nodeType != 1; }).remove();
<br> x$('.aboutTab-questionAndAnswer:contains("iframe")').remove();
<br> });
<br>
<br> </script>
<br>
</div>
<p><br> <strong>3)</strong> Now add this css to the Design Studio:</p>
<div style="background: #f9f9f9; padding: 5px;">
.SP_Profile_Embed {
<br> text-align: center;
<br> width: 100%;
<br> margin-top:20px;
<br> }
</div>
<p><br> Members will now be able to add embeddable vids and music players via their profile update screen.<br> <br> <a href="http://whineglass.ning.com/members/Lilp" target="_blank">Here is a working example.</a><br> <br> All seem to be responsive if you select the right embed options.<br> <br> The css ninjas among you will want to tweak the look and feel of the .SP_Profile_Embed wrap, so by all means go ahead.</p>
<p>For now I've gone for simplicity. The embed is below the cover area but it can of course be modified to sit anywhere on the page, just drop me a PM.<br> <br> Enjoy!</p>
<p>SP<br> <br> <a href="http://creators.ning.com/profile/sweetpotato" target="_self">More Tips Here</a></p></div>Stratus is Perhaps an Alternative Option for a Music Playerhttps://creators.ning.com/forum/topics/stratus-is-perhaps-a-better-music-player2012-12-19T21:38:02.000Z2012-12-19T21:38:02.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>I read all sorts of complaints about the Music player on Ning networks, so I ran across something which may be interesting to you if you have been looking for an alternative way to display and play music on your network.</p>
<p>NOTE: This may require you to create a soundcloud channel and import the music from your site, but it looks clean and works awesome!</p>
<p>First let me make it clear that I do not have the music feature on my network, this is just in response to so many complaints about the Ning music player. It is quite apparent from the feedback I read on this network that Ning might be dropping the ball (and a hand full of cash) by not keeping their music player in sync with technology and current web standards. With a better music player, Ning would shut the entire game down.</p>
<p></p>
<div class="PostContent">
<p><strong><a rel="nofollow" href="https://soundcloud.com/" target="_blank">SoundCloud</a></strong> is an awesome application with a huge music library and it <a rel="nofollow" href="http://developers.soundcloud.com/" target="_blank">has multiple ways</a> for integrating any selected tracks to websites.</p>
<p><strong><a rel="nofollow" href="http://stratus.sc/" target="_blank">Stratus</a></strong>, a free-to-use and <strong>jQuery-powered widget</strong>, offers an alternative and tight integration with <strong>a player that can sit in the bottom or top</strong> of web pages.</p>
<p>The widget accepts any number of tracks, sets, users or groups to play, can be set to <strong>auto-play</strong> and has an optional animation on initial load.</p>
<p><a target="_blank" href="http://stratus.sc/"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/553587?profile=original" width="480"></a></p>
<p>There are controls for volume, sharing, commenting/favoriting and <strong>a pop-up player link exists</strong> so that users changing pages won’t lose the tracks.</p>
<p>Besides mentioning the tracks/sets as a list, adding a custom class to any <strong>SoundCloud</strong> link also works (handy for websites with lots of SoundCloud links) and the player <strong>can be skinned with CSS</strong>.</p>
<p></p>
<p>Installation Looks Simple Enough:</p>
<p>Include the javascript library by adding this to the custom code box</p>
<pre>
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script><br><br>followed by this plugin:<br><br>
</pre>
<div class="line" id="file-stratus-installation-LC1">
<script type="text/javascript">
</div>
<div class="line" id="file-stratus-installation-LC2">
x$(document).ready(function(){
</div>
<div class="line" id="file-stratus-installation-LC3">
x$.stratus({
</div>
<div class="line" id="file-stratus-installation-LC4">
links: 'http://soundcloud.com/foofighters/sets/wasting-light'
</div>
<div class="line" id="file-stratus-installation-LC5">
});
</div>
<div class="line" id="file-stratus-installation-LC6">
});
</div>
<div class="line" id="file-stratus-installation-LC7">
</script>
</div>
<h2>Customization</h2>
<p>You can customize Stratus by passing the appropriate <a rel="nofollow" href="http://stratus.sc/#options">options</a> to the <code>stratus</code> function.</p>
<p>For example, the code below will cause the player to auto play a random QOTSA track and hide the download button.</p>
<table class="lines highlight" cellspacing="0">
<tbody>
<tr>
<td class="line_numbers"><span id="file-stratus-customization-L1">1</span> <span id="file-stratus-customization-L2">2</span> <span id="file-stratus-customization-L3">3</span> <span id="file-stratus-customization-L4">4</span> <span id="file-stratus-customization-L5">5</span> <span id="file-stratus-customization-L6">6</span> <span id="file-stratus-customization-L7">7</span> <span id="file-stratus-customization-L8">8</span> <span id="file-stratus-customization-L9">9</span> <span id="file-stratus-customization-L10">10</span></td>
<td class="line_data" width="100%">
<div class="line" id="file-stratus-customization-LC1">
<script type="text/javascript">
</div>
<div class="line" id="file-stratus-customization-LC2">
$(document).ready(function(){
</div>
<div class="line" id="file-stratus-customization-LC3">
$stratus({
</div>
<div class="line" id="file-stratus-customization-LC4">
auto_play: true,
</div>
<div class="line" id="file-stratus-customization-LC5">
download: false,
</div>
<div class="line" id="file-stratus-customization-LC6">
links: 'http://soundcloud.com/qotsa',
</div>
<div class="line" id="file-stratus-customization-LC7">
random: true
</div>
<div class="line" id="file-stratus-customization-LC8">
});
</div>
<div class="line" id="file-stratus-customization-LC9">
});
</div>
<div class="line" id="file-stratus-customization-LC10">
</script>
</div> </td>
</tr>
</tbody>
</table>
</div></div>