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

Forum

NC for Hire

Hi all,

UPDATED 10th Jan 2015 and now compatible with v2 themes, and supported here.

Inspired by the conversation going on over here, 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).

This places an embed below the member profile cover area, like so:

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.

Here is a step-by-step guide:

1) Add a Profile Question to your Ning 3.0 site. Make it a "Website Address" answer and you MUST include the word 'embed' in your question. In this instance the question is

Include a video or music player on your profile page by inserting embed code below

You might want to change the wording but make sure that embed is in there.

2) Go to the Custom Code section of your Ning 3.0 site and add the following script to the End of Page Code box.


<!-- PROFILE PAGE EMBED www.SweetPotato.me.uk -->
<script>
x$(document).ready(function() {
if (x$('.aboutTab-question:contains("embed")').length > 0) {
x$('.module-body.aboutMember').append('<div class="SP_Profile_Embed_Wrap"><div class="SP_Profile_Embed"></div></div>');
}
x$('.aboutTab-question:contains("embed")').remove();
var embed = x$('.aboutTab-questionAndAnswer:contains("iframe")').text();
x$('.SP_Profile_Embed').html(embed);
x$('.SP_Profile_Embed').contents().filter(function(){ return this.nodeType != 1; }).remove();
x$('.aboutTab-questionAndAnswer:contains("iframe")').remove();
});

</script>


3) Now add this css to the Design Studio:

.SP_Profile_Embed {
text-align: center;
width: 100%;
margin-top:20px;
}


Members will now be able to add embeddable vids and music players via their profile update screen.

Here is a working example.

All seem to be responsive if you select the right embed options.

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.

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.

Enjoy!

SP

More Tips Here

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Replies

  • Hi SP,

    Very nice tip!  That was a good idea to use Ning to store the embed in the form of a Profile Question, so nothing external is needed. 

    And I love that you used SP in the class name so we know its your work.  Maybe use SP in the js variables too, i.e. SP_embed.  I use jQH prefixes to "watermark" my code these days.  Makes it easy to find when helping someone who has your code and you are viewing their source to help them debug it.

    Keep up the good work, and best wishes!

    "TJ"

    • NC for Hire
      Thanks TJ and Jen,
      I used your watermarking idea TJ from a while back, although its not second nature which is why I missed the variable. Will change that!
      Hopefully some of those who need third party music players on profile pages will find this of particular use.

      TJ, will reply to your pm soon.

      SP
      • Yep, would be good if we all use a code watermark.  Then when someone shares something here that they found but do not remember where it came from, we can know who it was originally from, just looking at the code! :-)

        I'm sure many people will find your tip useful!

        Best wishes!

    • That was a good idea to use Ning to store the embed in the form of a Profile Question, so nothing external is needed.

      This is a great tip! And I agree, storing it with the profile question was a very outside of the box way of thinking for implementation. Major kudos.

      On a side-note, I don't think many NC's realize and take the time to appreciate the premium resources other creators offer on this forum. Places like WordPress, Tumblr, etc. often require plugin purchases for snippets of code to enhance one's site, whereas, here they are found commonly free. Many thanks for this free premium level tip!

      Fantastic Job,
      -Jords

  • NC for Hire

    SP, Impressive!

    =)

  • I am not using the 3.0 platform yet.. But this was an excellent idea! very cool!

    • NC for Hire
      Lol. I don't think anyone that is griping about absence text boxes (and therefore lack of embeds on profile ages) is actually on Ning 3.0 yet, so I dare say that not many people will use this yet.
      But it's out there for the odd few who need it right now.
      Glad you like it
      SP
      • No, your right.. but look as someone who deals with finding creative ways to manipulate the ning environment... It's stuff like this that I can use to spark perhaps another idea... I like that a lot.

        • NC for Hire
          Cool, let me know what you come up with.
          • I just recently applied to the sand box group. I am not sure that I will be accepted I haven't exactly been labeled here as someone who is helpful sadly. However, this did give me an idea for something else :D ... good stuff hon! Of course if I can pull something off cool I will share it with you. That's the least I can do! :D

This reply was deleted.

Search the Creators Network

Latest Activity

Manuel Adame Jimenez replied to Kyryl_Ning_Support's discussion Our Efforts - Your Feedback
"Patience ... with the look in the moment that comes ... thanks
♤♡♧"
23 minutes ago
Bizz ( John ) replied to Naveen Jain's discussion How can I disable Ning Search in 3.0
"Mike can't seem to find a way yet to block the search for private groups but here is a way you can…"
39 minutes ago
⚡JFarrow⌁ replied to Bizz ( John )'s discussion Photo Albums and Video Albums ( the one thing missing that could really improve things )
"Yes I would like this"
1 hour ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Still no chat and no communication about when.  I can almost tolerate an issue if I am being told w…"
1 hour ago
Rosario Sarno (Saro) replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"On my site, chat is no longer working, you do not see who's online
http://www.fotografiapuntodincon&hellip;"
1 hour ago
Fran replied to Marcelo Rodrigues's discussion Chat problem
"My chat,  down too :S"
2 hours ago
Bizz ( John ) replied to Alex's discussion NING 3 Groups on Home Page
"Your welcome Alex :-)"
3 hours ago
⚡JFarrow⌁ replied to Fabricio Giugni's discussion Create a member Pro. What can he do that others can't?
"You could offer access to a group or set of pages that other members can't see..."
4 hours ago
Kevin Acosta replied to Kyryl_Ning_Support's discussion Chat Feature Update on Ning 3.0 is ready!
"FYI - some programming glitch is also affecting the old Ning 2.0 Pro sites . . . same "blank" regis…"
6 hours ago
Kevin Acosta replied to Marcelo Rodrigues's discussion Chat problem
"Apparently having the same issue here, including the timing as reported by site members while I was…"
6 hours ago
Kevin Acosta replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"@ Kyryl - - thanks for these updates.  I was out of pocket traveling the past week, and several mem…"
6 hours ago
Tyler Durbin replied to Marcelo Rodrigues's discussion Chat problem
"My chat has been down for 2 days!  They are saying that it is a bug.  Ugggg...."
6 hours ago
Alex replied to Alex's discussion NING 3 Groups on Home Page
"Thank you John... works a treat.
Much obliged!
Alex"
6 hours ago
Manuel Adame Jimenez replied to Kyryl_Ning_Support's discussion Chat Feature Update on Ning 3.0 is ready!
"Patience Kos
{[°III ♤ ♡ ♧ III°]}"
6 hours ago
Bizz ( John ) replied to Naveen Jain's discussion How can I disable Ning Search in 3.0
"Not sure, but will have to take a look to see if it's possible."
7 hours ago
Bizz ( John ) replied to Alex's discussion NING 3 Groups on Home Page
"I would write this with this code below as it would keep the groups a nice size and not to small mu…"
7 hours ago
Ning via Facebook

#Ning #radio #online Tune in to the radio, find your playmates - and have fun on…

Mike Collins replied to Naveen Jain's discussion How can I disable Ning Search in 3.0
"John is there anyway of excluding the search in private groups through code?"
8 hours ago
Naveen Jain replied to Naveen Jain's discussion How can I disable Ning Search in 3.0
"This worked. Thanks"
8 hours ago
Naveen Jain replied to Naveen Jain's discussion How can I disable Ning Search in 3.0
"culytics.com"
8 hours ago
More…